jQuery：div出现并正常消失，但是第二次单击它不起作用

Question

I am pretty new to JQuery. I was looking for divs to hide and show in my homepage. This worked with following code pretty good:

jQuery(document).ready(function () {
jQuery(".tab-filteractivation2").hide(); //hide at the beginning

function hideDiv(e) {
    e.preventDefault();
    jQuery(this).text('open it')  // text after first click
    .click(showDiv)
    .siblings(".tab-filteractivation2").hide(400);
}
function showDiv(e) {
    e.preventDefault();
    jQuery(this).text('close it')  // text when it is open
    .click(hideDiv)
    .siblings(".tab-filteractivation2").show(400);
}
jQuery('.hover').click( showDiv );

This is my HTML-code:

<div class="filter">
    <a class="hover" href="javascript:;">open</a>
    <div class="tab-filteractivation2">test</div>
</div>

My DIV is called tab-filteractivation2 and it appears and disappears as I want. But only for the first click: As soon as I click more than one time the show button, it appears somehow exponential.

Here is a little step-by-step introduction: 1. I click on "open" and the tab appears with the delay (400) (with the text "test") 2. I click on "close it" and the tab disappears with the delay (400) (until here everything is fine) 3. I click again on "open it" and the tab appears BUT first it appears with the delay (400) and then immediately disappears with the delay (400) and then again appears with the delay (400). 4. I click on "close it" and the tap disappears with the delay (400) and it appears with the delay and it disappears with the delay and it appears with the delay and it disappears with the delay (400).

Therefore I wrote it is somehow exponential. It will be from click by click more and more actions until it is finished. But I would be happy only having this delay once and all the other steps not.

Can someone help me by this function and say how I could prevent it? That would be great!

Many thanks in advance. And I hope it was somehow clear for you guys.

Answer 1

Try:

jQuery(".tab-filteractivation2").hide(); //hide at the beginning

function showDiv(e) {
    e.preventDefault();
    if(jQuery(this).text() == 'close it'){
        jQuery(this).text('open it').siblings(".tab-filteractivation2").hide(400);
    }
    else{        
        jQuery(this).text('close it').siblings(".tab-filteractivation2").show(400);
    }

}
jQuery('.hover').click( showDiv );

DEMO here.

Answer 2

You add an event listener every time you hide or show the tab. You need to initialize nodes' listeners separately.

Answer 3

$('.hover').on('click', function() {
    if($('tab-filteractivation2').is(':visible')) {
        $('.tab-filteractivation2').slideUp(400);
    } else {
        $('.tab-filteractivation2').slideDown(400);
    }
});

The code above will do what you are trying to do in a much more simple manner. If you are struggling to understand how it works give me a shout :).

Answer 4

you could use toggle() :

jQuery('.hover').click(function (e) {
    e.preventDefault();
    var $this = $(this);
    $this.siblings(".tab-filteractivation2").stop().toggle(400, function () {
       $this.text($(this).is(':visible') ? 'close it' : 'open it');
    });
});