Toggling The Div's On And Off Through JQuery

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

Solution 1:

Your div's need to have a common attribute (e.g. 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();
});

Solution 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;
});

Solution 3:

toggle to hide not current ones:

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