Toggle visibility of 2 divs with 2 buttons
Question
I am having issues with my code
I am trying to show 1 div ( show_1 ) by default and then hide it and show a second div ( show_2 ) when button 2 is clicked. And then when button 1 is clicked hide show_2 and show show_1 again
https://jsfiddle.net/mgzurjgL/4/
It is not working though, nothing happens when I click either buttons.
function switch_div(show_1, show_2) { var a = document.getElementById(show_1); var a2 = document.getElementById(show_2); if (a.style.display == 'block') { a.style.display = 'block'; a2.style.display = 'none'; } else { a.style.display = 'none'; a2.style.display = 'block'; } }
.button { width: 100px; height: 30px; display: inline-block; background-color: black; margin: 0 10px 10px 0; color: #fff; text-align: center; line-height: 30px; cursor: pointer; } .button:hover { background-color: red; } .content { width: 400px; height: 100px; display: block; background-color: gray; } .hide { display: none; }
<div class="button" onclick="switch_div('show_1', 'show_2');"> 1 </div> <div class="button" onclick="switch_div('show_1', 'show_2');"> 2 </div> <div class="content" id="show_1"> Show by default (and when button 1 is clicked) </div> <div class="content hide" id="show_2"> Show this div when button 2 is clicked </div>
5 answers
solution1
2 2016-02-03 16:44:19
Two items: script placement and a typo. Working version at JSFiddle , tested in Google Chrome.
The script has to run before the
divs. In the JSFiddle Javascript settings, I changed "Load Type" to "No wrap - in<head>." This way theswitch_divfunction exists when thedivs are loaded.There was a typo:
if (a.style.display == 'block')should be
if (a.style.display == 'none')Otherwise you are setting
blockdisplay on an element that's alreadyblock:) .
Edit : This code still doesn't do what you appear to want, because the function you have written toggles the div visibility regardless of which button is pressed. What you really want is in this fiddle :
<div class="button" onclick="switch_div('show_1', 'show_2', true);">
and
<div class="button" onclick="switch_div('show_1', 'show_2', false);">
together with
function switch_div(show_1, show_2, should_show_1) {
var a = document.getElementById(show_1);
var a2 = document.getElementById(show_2);
if(should_show_1) {
a.style.display = 'block';
a2.style.display = 'none';
}
else {
a.style.display = 'none';
a2.style.display = 'block';
}
}
That way you get only the div you want.
solution2
2 ACCPTED 2016-02-03 16:46:26
You had your settings wrong in JSFiddle, you need to run the script in the head not onload. Also you passed in the same parameters twice. Also why dont you try something simpler like this.
https://jsfiddle.net/mgzurjgL/5/
function switch_div(show) { document.getElementById("show_"+show).style.display = "block"; document.getElementById("show_"+((show==1)?2:1)).style.display = "none"; }
.button { width: 100px; height: 30px; display: inline-block; background-color: black; margin: 0 10px 10px 0; color: #fff; text-align: center; line-height: 30px; cursor: pointer; } .button:hover { background-color: red; } .content { width: 400px; height: 100px; display: block; background-color: gray; } .hide { display: none; }
<div class="button" onclick="switch_div(1);"> 1 </div> <div class="button" onclick="switch_div(2);"> 2 </div> <div class="content" id="show_1"> Show by default (and when button 1 is clicked) </div> <div class="content hide" id="show_2"> Show this div when button 2 is clicked </div>
solution3
0 2016-02-03 16:45:24
You need to switch the statements in if-else or change the condition in the if to "if (a.style.display !== 'block') "
When a.style.display is 'block' then you have to set it to 'none' to hide it.
function switch_div(show_1, show_2) { var a = document.getElementById(show_1); var a2 = document.getElementById(show_2); if (a.style.display !== 'block') { a.style.display = 'block'; a2.style.display = 'none'; } else { a.style.display = 'none'; a2.style.display = 'block'; } }
.button { width: 100px; height: 30px; display: inline-block; background-color: black; margin: 0 10px 10px 0; color: #fff; text-align: center; line-height: 30px; cursor: pointer; } .button:hover { background-color: red; } .content { width: 400px; height: 100px; display: block; background-color: gray; } .hide { display: none; }
<div class="button" onclick="switch_div('show_1', 'show_2');"> 1 </div> <div class="button" onclick="switch_div('show_1', 'show_2');"> 2 </div> <div class="content" id="show_1"> Show by default (and when button 1 is clicked) </div> <div class="content hide" id="show_2"> Show this div when button 2 is clicked </div>
solution4
0 2016-02-03 16:49:46
I changed the js function and the "call" for buttons.
function switch_div(show_1, show_2) { var a = document.getElementById(show_2); var a2 = document.getElementById(show_1); a.style.display = 'none'; a2.style.display = 'block'; }
.button { width: 100px; height: 30px; display: inline-block; background-color: black; margin: 0 10px 10px 0; color: #fff; text-align: center; line-height: 30px; cursor: pointer; } .button:hover { background-color: red; } .content { width: 400px; height: 100px; display: block; background-color: gray; } .hide { display: none; }
<div class="button" onclick="switch_div('show_1', 'show_2');"> 1 </div> <div class="button" onclick="switch_div('show_2', 'show_1');"> 2 </div> <div class="content" id="show_1"> Show by default (and when button 1 is clicked) </div> <div class="content hide" id="show_2"> Show this div when button 2 is clicked </div>
solution5
0 2016-02-03 17:00:39
This also works with:
<div class="button" onclick="switch_div(1,2);">
1
</div>
<div class="button" onclick="switch_div(2,1);">
2
</div>
<div class="content" id="show_1">
Show by default (and when button 1 is clicked)
</div>
<div class="content hide" id="show_2">
Show this div when button 2 is clicked
</div>
<script>
function switch_div(n1,n2) {
document.getElementById("show_"+n1).style.display = 'block';
document.getElementById("show_"+n2).style.display = 'none';
}
</script>
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.