Question

I’m working on a new menu, where I have a multiple hidden divs, but I only want to show one div on the page at any one time.

Here is my code;
http://jsfiddle.net/sXqnD/

HTML is nice and simple;

<div id="linkwrapper">
<a id="link1" href="#">link1</a><br/>
<a id="link2" href="#">link2</a><br/>
<a id="link3" href="#">link3</a>
</div>

<div id="infocontent">
    <div id="link1content">Information about 1.</div>
    <div id="link2content">Information about 2.</div>
    <div id="link3content">Information about 3.</div>
</div>

Here is my attempt at jQuery, which doesn’t seem to play nicely.

$(document).ready(function(){

$('#infocontent').children().hide();

$('#linkwrapper a').click(function(){

    var chosen1 = this.id;

    $('#infocontent').children('div').each(function(i) {
        var i = i+1;
        if( $("#" + this.id).is(":visible") == true ) {
            $("#" + this.id).hide(function(){
                $("#" + chosen1 + "content").show();
            });
            return false;

        } else {
        $("#" + this.id).show();
        return false;
        }
    });
});
});

Can anyone see where I have gone wrong or suggest a more elegant solution?

Answer 1

Thanks for all the advice.

I found this to be the best solution for what I was trying to achieve.

http://jsfiddle.net/sXqnD/15/

HTML

<div id="linkwrapper">
    <a id="link1" href="#">link1</a><br/>
    <a id="link2" href="#">link2</a><br/>
    <a id="link3" href="#">link3</a>
</div>

<div id="infocontent">
    <div id="link1content">Information about 1.</div>
    <div id="link2content">Information about 2.</div>
    <div id="link3content">Information about 3.</div>
</div>

jQuery

$("#infocontent").hide();
$("#infocontent div").hide();


    $('#linkwrapper a[id]').click(function(){

    var vsubmen = this.id +"content";  

    if( $("#infocontent").is(":visible") == false ) {
        $("#" + vsubmen).show('fast',function() {
            $("#infocontent").slideDown();
        });
    } else if ( $("#" + vsubmen).is(":visible") == false ) {
    $("#infocontent").slideUp('slow',function(){
        $("#infocontent div").hide();
        $("#" + vsubmen).show();
        $("#infocontent").slideDown('slow');    
        });
    } else {
    $("#infocontent").slideUp('slow',function(){
        $("#infocontent div").hide();
    });
    }
    return false;
});