Question

I was able to get some simple code to work that allows me to show/hide using diffrent buttons for each action, but, I have six different divs that I want to apply this code too and only allow for one to appear at a time and if one is shown to hide it and display the new one. They will be at different places in my page.

I know that I could just write individual code for each DIV, but I’m sure there’s an easier way to do it.

I tried a couple different methods, but it just gets messy. Thanks.

Here’s the JS:

$(document).ready(function() {

    $(".slidingDiv").hide();
    $(".hide,.show").show();

    $('.show').click(function() {
        $(".slidingDiv").slideToggle();
        $(".show").hide();
    });

    $('.hide').click(function() {
        $(".slidingDiv").slideToggle();
        $(".show").show();
    });

});

Here’s the CSS:

.slidingDiv {
    height:300px;
    background-color: #99CCFF;
    padding:20px;
    margin-top:10px;
    border-bottom:5px solid #3399FF;
}

Here’s the HTML:

<a href="#" class="show">Show</a>
<div class="slidingDiv">
    Fill this space with really interesting content. <a href="#" class="hide">Hide</a>
</div>

Answer 1

Try this – DEMO

$(document).ready(function() {
    $('.show').click(function() { $(this).next().slideToggle(); });
    $('.hide').click(function() { $(this).parent().slideUp(); });
});​