Question

Hello All at StackOverflow, over the last few days I have had some problems with my site and have got to a very comfortable point on where it is. My current jQuery script is:

jQuery(document).ready(function() { 
    $("#firstpagename, #firstpagename2").click(function () {
        $("div#white").toggle();
    });

    $("#secondpagename, #secondpagename2").click(function () {
        $("div#v2black").toggle();
    });

    $("#thirdpagename, #thirdpagename2").click(function () {
        $("div#v3black").toggle();
    });
});

I know this might not be the cleanest and best method, but it works and has had me going crazy over the past 5 days as I have only start using jQuery for a week now.

What I am trying to do now is to make the div’s white, v2black and v3black open; and when it does open, it closes any of the other div’s (see above) that might be open at the same time.

Here is my HTML incase it is needed for reference:

 <div class="altstevenav" style="display:none">
    <div class="stevenav">
        <ul class="navigation">
            <li>
                <a href="#firstpagename" id="firstpagename">Steve A</a>
            </li>
            <li>
                <a href="#secondpagename" id="secondpagename">Tattoos</a>
            </li>
            <li>
                <a href="#thirdpagename" id="thirdpagename">Sketchbook</a>
            </li>
        </ul>
    </div>
</div>
</div>
<!--MAIN CLOSING DIV-->
</div>
<!--CONTENT CLOSING DIV-->
    <div class="stevenav">
        <ul class="navigation">
            <li>
                <a href="#firstpagename" id="firstpagename2">Steve A</a>
            </li>
            <li>
                <a href="#secondpagename" id="secondpagename2">Tattoos</a>
            </li>
            <li>
                <a href="#thirdpagename" id="thirdpagename2">Sketchbook</a>
            </li>
        </ul>
    </div>

<!--ALL DIVS ARE CLOSE HERE-->
<!--Divisional Panels-->
<div id="white">
<div style="width:968px; margin: 0 auto;">
<div class="panel" style="color:#000000;">
<div style="width:450px; float:left;">
<img src="<?php echo the_field('image_one_of_biography'); ?>" width="425" alt="Biography Image" />
<br /><br />
<img src="<?php echo the_field('image_two_of_biography'); ?>" width="425" alt="Biography Image" />
<br /><br />
<img src="<?php echo the_field('image_three_of_biography'); ?>" width="425" alt="Biography Image" />
</div>
<div style="width:450px; float:left; text-align:left;">
<?php echo the_field('biography_content'); ?>
</div>
</div>
</div>
</div>
<div id="v2black">
<div style="width:968px; height:1000px; margin: 0 auto;">

</div>
</div>

<div id="v3black">
<div style="width:968px; height:1000px; margin: 0 auto;">

</div>
</div>

I would like to think this is pretty simple, but would just like a bit of direction of how I should go about this..

My question in a nut shell: Only one div open at one time out of white, v2black and v3black.

Answer 1

You could assign a common class and force them all closed on click then re-open the one you want…

jQuery(document).ready(function() { 
    $("#firstpagename, #firstpagename2").click(function () {
        $('.common').hide();
        $("div#white").toggle();
    });

    $("#secondpagename, #secondpagename2").click(function () {
        $('.common').hide();
        $("div#v2black").toggle();
    });

    $("#thirdpagename, #thirdpagename2").click(function () {
        $('.common').hide();
        $("div#v3black").toggle();
    });
});

Then add the class to html…

<div id="white" class="common">
</div>
<div id="v2black" class="common">
</div>
<div id="v3black" class="common">
</div>