Reputation: 1261
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
Reputation: 8154
Reverse your functions
box.toggle(function() {
content.slideUp(400);
}, function() {
content.slideDown(400);
});
Upvotes: 2