button to open and close div elements

Question

I have the following JS:

$('.mydata:gt(4)').hide().last().after(
$('<a />').attr('href', '#').text('Show more').click(function () {
    var a = this;
    $('.mydata:not(:visible):lt(5)').fadeIn(function () {
        if ($('.mydata:not(:visible)').length == 0) $(a).remove();
    });
    return false;
}));

which you can find here: http://jsfiddle.net/niklasvh/nTv7D/

Instead of .text('Show more') I want to use a button.

Any help?

Answer 1

Try this, it's a button that should inherit the Magento button style

$('.mydata:gt(4)').hide().last().after(
    $('<button />').attr('type','button').attr('class','button').html('<span><span>Show more</span></span>').click(function(){
        var a = this;
        $('.mydata:not(:visible):lt(5)').fadeIn(function(){
         if ($('.mydata:not(:visible)').length == 0) $(a).remove();   
        }); return false;
    })
);