CODEWITHSUNDEEP
jquery
Palemo
Palemo

Reputation: 215

Jquery fadeToggle - hides and comes back?

We have the following script:

$('#toggledot1').on('click', function(e) {
e.preventDefault();
$('.dotclick:visible').fadeOut();
$('#parkdaycare').fadeToggle();
});
$('#toggledot2').on('click', function(e) {
e.preventDefault();
$('.dotclick:visible').fadeOut();
$('#displaysales').fadeToggle();
});

What this does, is clicking on the div, toggles the other div to show/hide whilst also hiding the other divs. Problem with this, is that if you click on the same div again, it fades out and then fades straight back in.

Solution?

Upvotes: 0

Views: 444

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

The problem is $('.dotclick:visible').fadeOut(); fades out the current item when you click again which will trigger the fadeToggle to display it back again

The solution is to omit the current target element from the $('.dotclick:visible') selector

$('#toggledot1').on('click', function (e) {
    e.preventDefault();
    $('.dotclick:visible').not('#parkdaycare').stop(true, true).fadeOut();
    $('#parkdaycare').stop(true, true).fadeToggle();
});
$('#toggledot2').on('click', function (e) {
    e.preventDefault();
    $('.dotclick:visible').not('#displaysales').stop(true, true).fadeOut();
    $('#displaysales').stop(true, true).fadeToggle();
});

Upvotes: 1

Related Questions