CODEWITHSUNDEEP
jqueryjquery-plugins
Phillip
Phillip

Reputation: 73

jQuery show div on click, hide the others within multiple nested divs

When I place them inside of multiple divs, it does not seem to work any longer. What am I missing? Thanks

Demo: http://jsfiddle.net/HVfaA/206/

<div id="content">
<div id="first">
<div id="first-1">
<div id="first-2">
<div id="first-3">
<li><a href="#" class="one">One</a></li>
<li><a href="#" class="two">Two</a></li>
<li><a href="#" class="three">Three</a></li>
<li><a href="#" class="four">Four</a></li>
</div>
</div>
</div>
</div>
<div id="second">
<div id="second-1">
<div id="second-2">
<div id="second-3">
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div>
</div>
</div>
</div>
</div>
</div>

$("div#second > div").hide();
var divs = $("#one, #two, #three, #four");
$('li a').on('click', function () {
$(divs).hide();
$("#" + $(this).attr("class")).show();
});​

This function is a modified version of the one offered by Peter Ajtai jQuery show div on click, hide the others

Original question below: I was trying use a separate divs containing the links and to show the divs. Currently When the links are clicked, the hidden divs do not show. Thanks for your help. Here's the demo on the jsfiddle - http://jsfiddle.net/HVfaA/184/

<div id="first">
<li><a href="#" class="one">One</a></li>
<li><a href="#" class="two">Two</a></li>
<li><a href="#" class="three">Three</a></li>
<li><a href="#" class="four">Four</a></li>
</div>
<br /><br />
<div id="second">
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</div>

// Optional code to hide all divs
$("div#second").hide();

// Selector
var divs = $("#one, #two, #three, #four");

// Show chosen div, and hide all others
$("li a").click(function () 
{
$("#" + $(this).attr("class")).show();
divs.not(("#" + $(this).attr("class"))).hide();
});

Upvotes: 2

Views: 11170

Answers (3)

user626963
user626963

Reputation:

CSS:

.Main-Div {position: relative; left: -9999px;}
.Inner-Div {position: relative; left: 9999px;}

Javascript:

// Optional code to hide all divs
$("div#second > div").addClass('Main-Div');

// Selector
var divs = $("#one, #two, #three, #four");

// Show chosen div, and hide all others
$('li a').on('click', function () {
    $(divs).removeClass('Inner-Div');
    $("#" + $(this).attr("class")).addClass('Inner-Div');
});

Fiddle

Upvotes: 0

Alex Kendrick
Alex Kendrick

Reputation: 969

The issue is that you've wrapped all your divs in div#second and then hidden that element. Because their parent is hidden, none of the child divs (#one, #two, #three, #four) will show up.

If you'd like to hide all divs to begin with try 

// Optional code to hide all divs
$("div#second > div").hide();

This isn't directly related, but as an aside you can leave off your divs.not(("#" + $(this).attr("class"))).hide(); by just shifting the order of when you hide your divs (hide them all, then show the one). Also, since you already stored them as divs you can also just reference them directly.

// Show chosen div, and hide all others
$("li a").click(function () {
    $(divs).hide();
    $("#" + $(this).attr("class")).show();
});​

See updated Fiddle http://jsfiddle.net/HVfaA/190/

Upvotes: 4

Eli
Eli

Reputation: 14827

Just show your div in your click handler and it will work:

$("div#second").show();

DEMO: http://jsfiddle.net/HVfaA/191/

Upvotes: 2

Related Questions