CODEWITHSUNDEEP
javascript
GoldenGonaz
GoldenGonaz

Reputation: 1166

Toggle visibility of 2 divs with 2 buttons

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>

Upvotes: 0

Views: 2421

Answers (5)

dexhering
dexhering

Reputation: 422

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>

Upvotes: 0

Luca Giardina
Luca Giardina

Reputation: 518

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>

Upvotes: 0

cxw
cxw

Reputation: 17041

Two items: script placement and a typo. Working version at JSFiddle, tested in Google Chrome.

  1. The script has to run before the divs. In the JSFiddle Javascript settings, I changed "Load Type" to "No wrap - in <head>." This way the switch_div function exists when the divs are loaded.

  2. There was a typo: 

    if (a.style.display == 'block')

    should be 

    if (a.style.display == 'none')

    Otherwise you are setting block display on an element that's already block :) .

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.

Upvotes: 2

Dustin Poissant
Dustin Poissant

Reputation: 3418

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>

Upvotes: 2

Siva
Siva

Reputation: 2785

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>

Upvotes: 0

Related Questions