CODEWITHSUNDEEP
jqueryjquery-uitoggleslidedownslideup
Maanstraat
Maanstraat

Reputation: 1261

Jquery UI slideUp and slideDown

I am busy to show and hide some boxes with a click on a button. It is working well but i must click 2 times the first time i want to hide a box?

This is my JS code:

$(function() {
    $('.title .hide').showContent();
});

$.fn.showContent = function() {
    return this.each(function() {
        var box = $(this);
        var content = $(this).parent().next('.content');

        box.toggle(function() {
            content.slideDown(400);
        }, function() {
            content.slideUp(400);
        });

    });
};

And de HTML

<div class="box">
    <div class="title">
        Title
        <span class="hide"></span>
    </div>
    <div class="content">Content</div>
</div>

Why is this? Can somewone help me?

And here is a demo: http://jsfiddle.net/wq7PF/ (click on the black button. When you click the first time it is doing nothing, but the second time then the content will collapse.)

Upvotes: 1

Views: 2564

Answers (1)

Kyle Macey
Kyle Macey

Reputation: 8154

Reverse your functions

box.toggle(function() {
  content.slideUp(400);
}, function() {
  content.slideDown(400);
});

Upvotes: 2

Related Questions