CODEWITHSUNDEEP
jqueryjquery-ui
DatsunBing
DatsunBing

Reputation: 9076

How to do a meta-toggle with jQuery

I have a number of divs on a page. In the top right corner of each div is an icon. When the user clicks an icon, it shows/hides the div. Here's the code:

$('div#display-area').on('click', 'span.fold-post-link', function() {        
    $('div.fold-post', $(this).parents('div.display-content')).toggle('blind');
});

Now, at the very top of the page I have two icons - one is an up-arrow, the other is a down-arrow. When the user clicks on the up arrow, I want it to hide all the divs; when they click on the down-arrow, I want to show all the divs.

Initially I thought I could do this with one function, such as this:

// fold and unfold all posts
$('div#display-area').on('click', '#master-folder', function() {      
    $('div.fold-post', 'div#display-area').toggle('blind');
});

But that's no good since it visits each of the divs and reverses its state. This means that if I have a few divs that are visible, they become hidden, and vice versa!

Upvotes: 0

Views: 95

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388316

I don't think you can use single method to do it

$('div#display-area').on('click', '#up-folder', function() {      
    $('div.fold-post', 'div#display-area').hide('blind');
});
$('div#display-area').on('click', '#down-folder', function() {      
    $('div.fold-post', 'div#display-area').show('blind');
});

Another idea is as follows

$('div#display-area').on('click', '#up-folder, #down-folder', function() {      
    var action = $(this).is('#up-folder');
    $('div.fold-post', 'div#display-area')[action]('blind');
});

Upvotes: 1

imkost
imkost

Reputation: 8163

var action = 'hide';

$('div#display-area').on('click', '#master-folder', function() {      
    var $divs = $('div.fold-post', 'div#display-area');
    if (action == 'hide') {
        $divs.hide('blind');
        action = 'show';
    }
    else {
        $divs.show('blind');
        action = 'hide';
    }
});

Upvotes: 0

Related Questions