CODEWITHSUNDEEP
jquery
Airikr
Airikr

Reputation: 6436

Hide the visible content before view the next content

When you click on the link with id="viewers" to view it's content and then, after it's visible, when you click on the link with id="voters", id="viewers" will hide and then show id="voters"'s content. How can I do that? I've tried for myself but I didn't come so far :/ Here is my code:

$('#view_voters').click(function() {
    if($('#viewers').is(':visible')) {
        $('#viewers').slideUp('slow');
    }

    if($('#viewers').is(':hidden')) {
        $('#voters').slideToggle('slow');
    }
});

HTML

echo '<div class="paddingbottom-10" id="voters" style="display: none;">';
    echo '<table width="100%" cellpadding="0" cellspacing="0" class="blog-viewers">';
        # content
    echo '</table>';
echo '</div>';

Thanks in advance.

Upvotes: 0

Views: 111

Answers (3)

elclanrs
elclanrs

Reputation: 94131

Without your html is hard to tell but you can simplify and do something like this which is also more extensible.

var $panels = $('.panel'); // All your sections with class `.panel`

var panelSlide = function ($this) {
    $panels.find(':visible').slideUp('fast', function () {
        $this.slideDown();
    });
};
$('#voters, #viewers').click(function () {
    panelSlide($(this).find('.panel'));
});

Upvotes: 1

user463535
user463535

Reputation:

Set one of the elements to hidden, and set the other to visible.

<input id='view_voters' value='Toggle Viewers/Voters' type='button' />

<div style='display: none;' id='viewers'>
    These are my viewers
</div>
<div id='voters'>
    These are my voters
</div>

And then toggle both elements when you click.

$('#view_voters').click(function() {
    $('#viewers').toggle();
    $('#voters').toggle();

});

Full example here:

http://jsfiddle.net/7akvT/2/

Upvotes: 0

raina77ow
raina77ow

Reputation: 106453

Why check for the same condition twice? Just transform your 'if-if' code into 'if-else' one, as visible and hidden are the opposite conditions. Like this:

if ($('#viewers').is(':visible')) {
    $('#viewers').slideUp('slow');
}
else {
    $('#voters').slideToggle('slow');
}

Upvotes: 1

Related Questions