How do I show DIV when click again in jquery?
Question
I have made 4 boxes that are all hidden, and it shows only div(HOME) when page load.
When click the text "box2", hide other DIVs and show box2(DIV) and click box3 hide other DIVs and show box3(DIV).......
The question is while box2 is shown and click text box2 again, how do i show the first one box(home) ? I mean when click the menu again, how to show to home DIV?
Here is Demo http://fiddle.jshell.net/3qepfzvn/11/
Here is my code
<div class="m1"><a href="#" class="s1">HOME</a><a href="#" class="s2">box2</a><a href="#" class="s3">box3</a><a href="#" class="s4">box4</a></div>
<div class="m2"><a href="#" class="s1">HOME</a><a href="#" class="s2">box2</a><a href="#" class="s3">box3</a><a href="#" class="s4">box4</a></div>
<div class="m3"><a href="#" class="s1">HOME</a><a href="#" class="s2">box2</a><a href="#" class="s3">box3</a><a href="#" class="s4">box4</a></div>
<div class="m4"><a href="#" class="s1">HOME</a><a href="#" class="s2">box2</a><a href="#" class="s3">box3</a><a href="#" class="s4">box4</a></div>
jQuery(function(){
$(".m1").show();
$(".m2").hide();
$(".m3").hide();
$(".m4").hide();
$(".s1").click(function(){
$(".m1").show();
$(".m2").hide();
$(".m3").hide();
$(".m4").hide();
$(".s1").addClass("bold");
$(".s2").removeClass("bold");
$(".s3").removeClass("bold");
$(".s4").removeClass("bold");
});
$(".s2").click(function(){
$(".m1").hide();
$(".m2").slideDown();
$(".m3").hide();
$(".m4").hide();
$(".s1").removeClass("bold");
$(".s2").addClass("bold");
$(".s3").removeClass("bold");
$(".s4").removeClass("bold");
});
$(".s3").click(function(){
$(".m1").hide();
$(".m2").hide();
$(".m3").slideDown();
$(".m4").hide();
$(".s1").removeClass("bold");
$(".s2").removeClass("bold");
$(".s3").addClass("bold");
$(".s4").removeClass("bold");
});
$(".s4").click(function(){
$(".m1").hide();
$(".m2").hide();
$(".m3").hide();
$(".m4").slideDown();
$(".s1").removeClass("bold");
$(".s2").removeClass("bold");
$(".s3").removeClass("bold");
$(".s4").addClass("bold");
});
});
a { color:black; margin:0 5px;}
.m1 { background:gray; width:400px; height:100px; }
.m2 { background:blue; width:400px; height:400px; }
.m3 { background:yellow; width:400px; height:300px; }
.m4 { background:green; width:400px; height:600px; }
.bold { font-weight:bold; }
5 answers
solution1
2 2015-07-24 14:36:58
You can use this:
jQuery(function(){
$(".m1").show();
$(".m2").hide();
$(".m3").hide();
$(".m4").hide();
var m1Status = true;
var m2Status = false;
var m3Status = false;
var m4Status = false;
$(".s1").click(function(){
$(".m1").show();
$(".m2").hide();
$(".m3").hide();
$(".m4").hide();
$(".s1").addClass("bold");
$(".s2").removeClass("bold");
$(".s3").removeClass("bold");
$(".s4").removeClass("bold");
m1Status = true;
m2Status = false;
m3Status = false;
m4Status = false;
});
$(".s2").click(function(){
if (!m2Status){
$(".m1").hide();
$(".m2").slideDown();
$(".m3").hide();
$(".m4").hide();
$(".s1").removeClass("bold");
$(".s2").addClass("bold");
$(".s3").removeClass("bold");
$(".s4").removeClass("bold");
m1Status = false;
m2Status = true;
m3Status = false;
m4Status = false;
}else{
$(".m1").show();
$(".m2").hide();
$(".m3").hide();
$(".m4").hide();
$(".s1").addClass("bold");
$(".s2").removeClass("bold");
$(".s3").removeClass("bold");
$(".s4").removeClass("bold");
m1Status = true;
m2Status = false;
m3Status = false;
m4Status = false;
}
});
$(".s3").click(function(){
if (!m3Status){
$(".m1").hide();
$(".m2").hide();
$(".m3").slideDown();
$(".m4").hide();
$(".s1").removeClass("bold");
$(".s2").removeClass("bold");
$(".s3").addClass("bold");
$(".s4").removeClass("bold");
m1Status = false;
m2Status = false;
m3Status = true;
m4Status = false;
}else{
$(".m1").show();
$(".m2").hide();
$(".m3").hide();
$(".m4").hide();
$(".s1").addClass("bold");
$(".s2").removeClass("bold");
$(".s3").removeClass("bold");
$(".s4").removeClass("bold");
m1Status = true;
m2Status = false;
m3Status = false;
m4Status = false;
}
});
$(".s4").click(function(){
if (!m4Status){
$(".m1").hide();
$(".m2").hide();
$(".m3").hide();
$(".m4").slideDown();
$(".s1").removeClass("bold");
$(".s2").removeClass("bold");
$(".s3").removeClass("bold");
$(".s4").addClass("bold");
m1Status = false;
m2Status = false;
m3Status = false;
m4Status = true;
}else{
$(".m1").show();
$(".m2").hide();
$(".m3").hide();
$(".m4").hide();
$(".s1").addClass("bold");
$(".s2").removeClass("bold");
$(".s3").removeClass("bold");
$(".s4").removeClass("bold");
m1Status = true;
m2Status = false;
m3Status = false;
m4Status = false;
}
});
});
solution2
1 2015-07-24 14:24:58
With toggle you can make it work
html
<table>
<tr>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a>
</div>
<div class="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div>
</td>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a id="myHeader2" href="javascript:showonlyone('newboxes2');" >show this one only</a>
</div>
<div class="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #2</div>
</td>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a id="myHeader3" href="javascript:showonlyone('newboxes3');" >show this one only</a>
</div>
<div class="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #3</div>
</td>
</tr>
</table>
jquery
With this code you can hide when you click box2 or box3.
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
solution3
1 2015-07-24 14:32:38
jQuery(function(){
$(".m1").show();
$(".m2").hide();
$(".m3").hide();
$(".m4").hide();
var homeshow = false;
$(".s1").click(function(){
$(".m1").show();
$(".m2").hide();
$(".m3").hide();
$(".m4").hide();
$(".s1").addClass("bold");
$(".s2").removeClass("bold");
$(".s3").removeClass("bold");
$(".s4").removeClass("bold");
});
$(".s2").click(function(){
if(homeshow){
homeshow = !homeshow;
$(".m1").hide();
$(".m2").slideDown();
}else{
homeshow = !homeshow;
$(".m2").hide();
$(".m1").slide();
}
$(".m3").hide();
$(".m4").hide();
$(".s1").removeClass("bold");
$(".s2").addClass("bold");
$(".s3").removeClass("bold");
$(".s4").removeClass("bold");
});
$(".s3").click(function(){
$(".m1").hide();
$(".m2").hide();
$(".m3").slideDown();
$(".m4").hide();
$(".s1").removeClass("bold");
$(".s2").removeClass("bold");
$(".s3").addClass("bold");
$(".s4").removeClass("bold");
});
$(".s4").click(function(){
$(".m1").hide();
$(".m2").hide();
$(".m3").hide();
$(".m4").slideDown();
$(".s1").removeClass("bold");
$(".s2").removeClass("bold");
$(".s3").removeClass("bold");
$(".s4").addClass("bold");
});
});
solution4
1 2015-07-24 14:33:42
var activeDiv = 1; jQuery(function(){ $(".m1").show(); $(".m2").hide(); $(".m3").hide(); $(".m4").hide(); $(".s1").click(function(){ activeDiv = 1; $(".m1").show(); $(".m2").hide(); $(".m3").hide(); $(".m4").hide(); $(".s1").addClass("bold"); $(".s2").removeClass("bold"); $(".s3").removeClass("bold"); $(".s4").removeClass("bold"); }); $(".s2").click(function(){ if(activeDiv==2) { activeDiv = 1; $(".m1").show(); $(".m2").hide(); } else { activeDiv = 2; $(".m1").hide(); $(".m2").slideDown(); $(".m3").hide(); $(".m4").hide(); } ....
solution5
1 2015-07-24 14:40:23
I'd use .siblings() and .index() for this, and if you're keeping the same pattern it can be done with a single function call -
$("div>a").click(function() {
var $this = $(this),
index = $this.index(); // first is 0, second is 1 etc
$("body>div").eq(index).show() // Change to find the correct divs
.siblings("div").hide();
$(".s" + (index + 1)).addClass("bold")
.siblings("a").removeClass("bold");
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How do I use JQuery to hide a div on click again?
JQuery - click to show div then hide again
How do I make a div hide onclick and make it show when it's clicked again?
How do I get this div to show again using JavaScript
show div when click and hide it when you click again
How to show a div when I click on a button
show hide div onclick jquery slowly when i click the button
jquery; how do I show the click-on div and hide all the others
how to hide/show siblings div when i click on div
Show div when click on a different div, and show a different div when clicked again
Related Tags