CODEWITHSUNDEEP
javascriptjqueryhtmlshow-hide
user2508300
user2508300

Reputation: 25

JQuery: div appears and disappears normally but second time clicked it does not work

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.

Upvotes: 0

Views: 1670

Answers (4)

A. Wolff
A. Wolff

Reputation: 74420

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');
    });
});

Upvotes: 1

codingrose
codingrose

Reputation: 15699

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.

Upvotes: 2

MaxRev17
MaxRev17

Reputation: 393

$('.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 :).

Upvotes: 1

Jacek Krysztofik
Jacek Krysztofik

Reputation: 1366

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

Upvotes: 1

Related Questions