Toggling the Div's on and off through jQuery

Question

Stackoverflowers!

Over the last few post's you have all helped me get extremely far and I am now facing another problem if you are able to help me, I also think that the last times I have not explained very well, so here it goes.

I have 3 id divs, named: white, v2black, v3black. My aim is to have a hyperlink nav that toggles each one of the Div's on and Off; however, when one is clicked, it must hide the current active div so two are not visible at the same time.

Just incase, the link for the source and the live site is: www.steveatattooartist.com

I have tried enough and this is where I am at the moment:

My jQuery:

<script>
 jQuery(function() {
  $('.toggle').on('click', function() {
    var id = $(this).attr('data-for');
    $('#' + id).toggle();
  });
});
</script>

My Html Structure:

<div class="altstevenav" style="display:none">
<div class="stevenav">
<ul class="navigation">
<li><a href="#firstpagename" id="firstpagename"><?php echo the_field('first_page_name'); ?></a></li>
<li><a href="#secondpagename" id="secondpagename"><?php echo the_field('second_page_name'); ?></a></li>
<li><a href="#thirdpagename" id="thirdpagename"><?php echo the_field('third_page_name'); ?></a></li>
</ul>
</div>
</div>

</div> <!--MAIN CLOSING DIV-->
</div> <!--CONTENT CLOSING DIV-->

<div class="delstevenav">
<div class="stevenav">
<ul class="navigation">
<li><a href="#firstpagename" id="firstpagename"><?php echo the_field('first_page_name'); ?></a></li>
<li><a href="#secondpagename" id="secondpagename"><?php echo the_field('second_page_name'); ?></a></li>
<li><a href="#thirdpagename" id="thirdpagename"><?php echo the_field('third_page_name'); ?></a></li>
</ul>
</div>
</div>
<!--ALL DIVS ARE CLOSE HERE-->

<!--Divisional Panels-->
<div id="white  class="toggle" data-for="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 id="v2black" class="toggle" data-for="v2black">
<div style="width:968px; height:500px; margin: 0 auto;">

</div>
</div>

<div id="v3black"  class="toggle" data-for="v3black">
<div style="width:968px; height:500px; margin: 0 auto;">

</div></div>

</div>

Really hope someone could help me because you guys have seriously helped me get really far in this project and I appreciate it, A LOT!

Answer 1

Your div's need to have a common attribute (eg class), so you can hide them all first, and then show the active div. The toggle class is common to all of them, so:

$('.toggle').on('click', function() {
    $(".toggle").hide();
    var id = $(this).attr('data-for');
    $('#' + id).show();
});

Answer 2

UPDATE:

Using the console in my browser, I changed the links to look like this:

<div class="altstevenav" style="display: none; ">
    <div class="stevenav">
        <ul class="navigation">
            <li>
                <a href="#firstpagename" id="firstpagename" data-for="white">Steve A</a>
            </li>
            <li>
                <a href="#secondpagename" id="secondpagename" data-for="v2black">Tattoos</a>
            </li>
            <li>
                <a href="#thirdpagename" id="thirdpagename" data-for="v3black">Sketchbook</a>
            </li>
        </ul>
    </div>
</div>

<div class="stevenav">
    <ul class="navigation">
        <li>
            <a href="#firstpagename" id="firstpagename2" data-for="white">Steve A</a>
        </li>
        <li>
            <a href="#secondpagename" id="secondpagename2" data-for="v2black">Tattoos</a>
        </li>
        <li>
            <a href="#thirdpagename" id="thirdpagename2" data-for="v3black">Sketchbook</a>
        </li>
    </ul>
</div>

then I re-assigned the click handlers thusly:

$('ul.navigation a[data-for]').click(function (e) {
    var targetDiv = $(this).attr('data-for');
    $('div.common').hide();
    $('div#' + targetDiv).show();
    e.preventDefault();
    return false;
});

You will probably also want to do:

$('div.common').hide();
$('div#white').show();

somewhere in $(document).ready() to have only the white div showing initially.

This seemed to have the desired effect. Try these changes and let us know if that worked for you.

-- previous answer below --

A couple of suggestions:

1. The line <div id="white class="toggle" data-for="white"> should probably be <div id="white" class="toggle" data-for="white"> instead.
2. The only real difference between div.altstevenav and div.delstevenav is the containing element. You should either give the links in one different id attributes or consider not using id attributes at all.
3. The v2black and v3black divs are both children of the white div. You should make them siblings of the white div, either by moving them out of the white div, or by using the current div (with id="white" ) as a container div (with no id attribute) and making a new child div of the container with id="white" instead.
4. For the links that you want to use to trigger the div visibility-toggling action, you should move the data-for attributes to the those links instead of on the target divs.

Example of links (Point 2):

<div class="altstevenav" style="display:none">
    <div class="stevenav">
        <ul class="navigation">
            <li>
                <a href="#firstpagename" id="altfirstpagename">Steve A</a>
            </li>
            <li>
                <a href="#secondpagename" id="altsecondpagename">Tattoos</a>
            </li>
            <li>
                <a href="#thirdpagename" id="altthirdpagename">Sketchbook</a>
            </li>
        </ul>
    </div>
</div>
</div>
<!--MAIN CLOSING DIV-->
</div>
<!--CONTENT CLOSING DIV-->
<div class="delstevenav">
    <div class="stevenav">
        <ul class="navigation">
            <li>
                <a href="#firstpagename" id="delfirstpagename">Steve A</a>
            </li>
            <li>
                <a href="#secondpagename" id="delsecondpagename">Tattoos</a>
            </li>
            <li>
                <a href="#thirdpagename" id="delthirdpagename">Sketchbook</a>
            </li>
        </ul>
    </div>
</div>

or

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

You can then use the follwing jQuery to get the job done (Point 4):

$('a[data-for]').click(function (e) {
    var targetDiv = $(this).attr('data-for');
    $('div.toggle').hide();
    $(targetDiv).show();
    e.preventDefault();
    return false;
});

Answer 3

toggle to hide not current ones:

$('.toggle').on('click', function() {
    $(".toggle").not('#' + $(this).data('for')).hide();
});