Selecting elements in jQuery

Question

In continuation of the question at this link I wanted to add some functionality in test.html
The event trigger is 'clicking' on any <p class=""> tag. After clicking I wanted that particular <p> to disappear (which was fairly straightforward) but I also want that

1. If out of the three either one or two <p> are hidden, then "Hide 'em" button should 'show' along with "Show 'em" But
2. If all <p> are hidden then "Hide 'em" should also get Hidden And
3. When all <p> are visible then "Show 'em" should get Hidden.

I tried to go about the thing with my knowledge of jQuery selectors and the selector documentation avaliable, but didn't reach anywhere near what I want. This is what I have done till now.

$('p.*').live('click', function() {
        $(this).hide('slow');
        if( $('p').is(':hidden') ) {
            $('.shower').show();
        }
        if( $('p.*').is(':hidden') ) {
            $('.hider').show();
        }

    });

However This code does not selectively toggle at the extreme conditions of all <p> hidden

Answer 1

Here's a way to do it

var all_ps = $('p.*').length;
var hidden_ps = 0;

$('p.*').live('click', function() {
    $(this).hide('slow');
    hidden_ps++;
    updateButtons();
});
function updateButtons()
{
    $('.hider').show();
    $('.shower').show();
    if(hidden_ps == all_ps-1) {
        $('.hider').hide();
    } else if(hidden_ps == 0) {
        $('.shower').hide();
    }
}
function resetButtons()
{
    $('p.*').show();
    hidden_ps = 0;
    updateButtons()
}