I want to make a function to show and hide a div tag and hide all others:
function showPage(showdiv){
$('#midRight').not(showdiv).hide();
$(showdiv).show();
}
Link calling the function:
<ul>
<a style="cursor:pointer;" onclick="showPage('#home_page1')">
<li>Show Page 1</li>
</a>
<a style="cursor:pointer;" onclick="showPage('#home_page2')">
<li>Show Page 2</li>
</a>
</ul>
DIVs on page:
<div id="midRight">
<div id="home_page1">Content 1</div>
<div id="home_page2" style="display:none;">Content 2</div>
</div>
The function showPage ends up hiding every div within midRight, while on JSFiddle, the click event doesn't seem to be handled at all.
What is the correct way to show/hide a DIV with jQuery?
I want to make a function to show and hide a div tag and hide all others:
function showPage(showdiv){
$('#midRight').not(showdiv).hide();
$(showdiv).show();
}
Link calling the function:
<ul>
<a style="cursor:pointer;" onclick="showPage('#home_page1')">
<li>Show Page 1</li>
</a>
<a style="cursor:pointer;" onclick="showPage('#home_page2')">
<li>Show Page 2</li>
</a>
</ul>
DIVs on page:
<div id="midRight">
<div id="home_page1">Content 1</div>
<div id="home_page2" style="display:none;">Content 2</div>
</div>
The function showPage ends up hiding every div within midRight, while on JSFiddle, the click event doesn't seem to be handled at all.
What is the correct way to show/hide a DIV with jQuery?
Share Improve this question edited Aug 20, 2013 at 18:52 Eric Leschinski 154k96 gold badges422 silver badges337 bronze badges asked Jul 1, 2013 at 17:25 BenBen 9,0119 gold badges47 silver badges82 bronze badges 8-
Why are you appending
showdivto two empty strings? Just curious... – crush Commented Jul 1, 2013 at 17:27 -
1
Wouldn't
function showPage(){$('#midRight div').toggle(); }suffice? – j08691 Commented Jul 1, 2013 at 17:29 - 1 @Crush - I changed it back; it was just to see if it would help but obviously made no difference! j08691 only if there are two list items and no more... – Ben Commented Jul 1, 2013 at 17:30
- 1 Here's a version without the old-fashioned "onfoo" event handler attributes. – Pointy Commented Jul 1, 2013 at 17:31
-
2
Also wrapping your
<li>elements in<a>tags isn't really valid HTML. – Pointy Commented Jul 1, 2013 at 17:35
4 Answers
Reset to default 6You could write you selector to hide all child div's of midRight, then show the div with the passed ID. No need to cast to a String, since that is what you are passing:
function showPage(showdiv){
$('#midRight > div').hide()
$(showdiv).show();
}
Fixed up some syntax errors. As the ments say, you're appending an empty string with the variable, just use the variable. Also, you need to tell the selector to select the children of the targetted container:
function showPage(showdiv){
$('#midRight').children().not(showdiv).hide();
$(showdiv).show();
}
Demo: http://jsfiddle/ACGMj/1/
DEMO
function showPage(showdiv){
$(showdiv).show().siblings().hide();
}
Or, without using IDs:
DEMO
$('ul a').click(function() {
var index = $(this).index();
$('#midRight > div').hide().eq(index).show();
});
The fiddle isn't working because it can't find the function, it can't find the function because you specified the functions to be interpreted during onLoad. To fix it, in the upper left of the jsFiddle, set the dropdown from onLoad to No wrap - in <body>.
Here's a working version that doesn't use in-line events:
http://jsfiddle/gRDdC/
<ul>
<li>
<a style="cursor:pointer;" class="nav-link" href="#home_page1">Show Page 1</a>
</li>
<li>
<a style="cursor:pointer;" class="nav-link" href="#home_page2">Show Page 2</a>
</li>
</ul>
<div id="midRight">
<div id="home_page1">Content 1</div>
<div id="home_page2" style="display:none;">Content 2</div>
</div>
$(document).ready(function() {
$('.nav-link').click(function(e) {
e.preventDefault();
$('#midRight > div').hide();
$($(this).attr('href')).show();
});
});