JQuery - Show only one div at any time

Question

I am working on a new menu where I have some hidden divs, but I want to show only one div per page at any 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 jQuery attempt which doesn't seem to play well.

 $(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 made a mistake, or suggest a more elegant solution?

Answer 1

Thanks for all the tips.

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

Answer 2

 $('div').filter('#idOfDivToShow').show(); $('div').not('#idOfDivToShow').hide(); 

$('div') will find all divs on your web page. .filter will search the results matching $('div') and match elements with id = idOfDivToShow. .not will search the results matching $('div') and match elements that don't have id = idOfDivToShow.

Finally, if you want to search only in a specific element, say #infocontent, then you can write:

 $('#infocontent').filter('div').filter('#idOfDivToShow').show(); $('#infocontent').filter('div').not('#idOfDivToShow').hide(); 

Answer 3

I would suggest simplifying it in a click function to just hide everything and then show the one you need.

 $('#linkwrapper a').click(function(){ $('#infocontent').children('div').each(function(i) { this.hide(); }); $('#' + this.id + 'content').show(); }); 

Answer 4

 $(window).ready(function(){ /* hide the content divs */ $('#infocontent div').css('display', 'none'); /* add click events */ $('#linkwrapper a').click(function(){ $('#infocontent div').css('display', 'none'); $('#'+this.id+'content').css('display', 'block'); }); }); 

I would also take a little time to change the href attributes of the link to "javascript: void (null);" to prevent page jumps if links are below page folding.

Answer 5

How about this? http://jsfiddle.net/sXqnD/2/

 <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 class="content" id="link1content">Information about 1.</div> <div class="content" id="link2content">Information about 2.</div> <div class="content" id="link3content">Information about 3.</div> </div> 

JS:

 $(document).ready(function(){ $('#infocontent').children().hide(); $('#linkwrapper a').click(function(){ var chosen1 = this.id; $('.content').hide(); $('#' + chosen1 + 'content').show(); }); }); 

I think you will find that manipulating files using identically formatted identifiers will not work very well in the end, though.

Answer 6

For quick changes:

FROM

 $(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; } }); }); }); 

For

 $(document).ready(function () { $('#infocontent').children().hide(); $('#linkwrapper a').click(function () { var chosen1 = this.id; $('#infocontent').children().hide(); $("#" + chosen1 + "content").show(); }); }); 

I basically replaced the .each () function: 1) hid all the children, and then 2) showing the desired div

Answer 7

My solution is here: http://jsfiddle.net/sXqnD/8/

the code:

 $(document).ready(function(){ var $allContentDivs = $('#infocontent div').hide(); // Hide All Content Divs $('#linkwrapper a').click(function(){ var $contentDiv = $("#" + this.id + "content"); if($contentDiv.is(":visible")) { $contentDiv.hide(); // Hide Div } else { $allContentDivs.hide(); // Hide All Divs $contentDiv.show(); // Show Div } return false; }); }); 

Answer 8

This is an answer close to what you had. It is based on this thought: - find the div and show only the specified div, if it is hidden - hide all other divs

 $(document).ready(function () { $('#infocontent').children().hide(); $('#linkwrapper a').click(function () { var chosen1 = this.id; var divIdToShow = chosen1 + 'content'; $('#infocontent').children('div').each(function (i) { var currentDiv = $(this); if (this.id == divIdToShow) { if (currentDiv.not(':visible')) { currentDiv.show(); } } else { currentDiv.hide(); } }); }); });