How can I hide one div and show another div using an onclick button?
I have two divs in my html file. I want to hide the first div and show another div on the input button onclick
in the html page.
Here is my code,
function switchVisible() {
if (document.getElementById('Div1') !== undefined) {
if (document.getElementById('Div1').style.display == 'Block') {
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'Block';
} else {
document.getElementById('Div1').style.display = 'Block';
document.getElementById('Div2').style.display = 'none';
}
}
}
#Div2 {
display: none;
}
<input id="Button1" type="button" value="" onclick="javascript:switchVisible();" />
But it doesn't work. Any help would be appreciated.
Thank.
+3
source to share
7 replies
1) Inside onclick, you don't need to use "javascript:", which is implied.
2) You check for "display: block", I always check for "display: none" (since display can also be "inline block", etc.)
Try the following:
function switchVisible() {
if (document.getElementById('Div1')) {
if (document.getElementById('Div1').style.display == 'none') {
document.getElementById('Div1').style.display = 'block';
document.getElementById('Div2').style.display = 'none';
}
else {
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'block';
}
}
}
#Div2 {
display: none;
}
<div id="Div1">Div 1</div>
<div id="Div2">Div 2</div>
<input id="Button1" type="button" value="Click" onclick="switchVisible();"/>
+9
source to share
Since it is tagged with jQuery, here is a simple jQuery answer
$('body').on("click touchstart", "#Button1", function(e){
$("#Div1, #Div2").toggle();
});
to use to listen to #Button id, I used both clicks and touchstart to make it mobile and then used toggle () which sets the display state: as opposed to what is now. So if it's display: none it becomes display: block, if it was displayed: block becomes display: none
+3
source to share
Try the following:
var div1 = document.getElementById('Div1'),
div2 = document.getElementById('Div2');
function switchVisible() {
if(!div1) return;
if (getComputedStyle(div1).display == 'block') {
div1.style.display = 'none';
div2.style.display = 'block';
} else {
div1.style.display = 'block';
div2.style.display = 'none';
}
}
document.getElementById('Button1').addEventListener('click', switchVisible);
#Div2 {
display:none;
}
<div id="Div1">Div 1</div>
<div id="Div2">Div 2</div>
<input id="Button1" type="button" value="Click me" />
However, this approach might be better:
var wrapper = document.getElementById('wrapper');
function switchVisible() {
wrapper.classList.toggle('switched');
}
document.getElementById('Button1').addEventListener('click', switchVisible);
#wrapper > :last-child {
display: none;
}
#wrapper.switched > :last-child {
display: block;
}
#wrapper.switched > :first-child {
display: none;
}
<div id="wrapper">
<div>Div 1</div>
<div>Div 2</div>
</div>
<input id="Button1" type="button" value="Click me" />
+1
source to share
you can try this.
function switchVisible() {
var div1=document.getElementById('Div1');
var div2=document.getElementById('Div2');
if (div1 !== undefined && div2 !== undefined) {
div1.style.display = div2.style.display === '' ? 'none' : div2.style.display === 'none' ? 'none' : 'block';
div2.style.display = div1.style.display === 'block' ? 'none' : 'block';
}
}
#Div1{
display: block;
background: blue;
}
#Div2 {
display: none;
background: red;
}
.divs
{
width: 50px;
height: 50px;
border: 1px solid #000;
}
<input id="Button1" type="button" value="Hide" onclick="switchVisible();" />
<div id="Div1" class="divs"> </div>
<div id="Div2" class="divs"> </div>
+1
source to share
You may have some syntax errors in your code. It works:
function switchVisible() {
if (document.getElementById('Div1') !== undefined) {
if (document.getElementById('Div1').style.display == 'block') {
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'block';
} else {
document.getElementById('Div1').style.display = 'block';
document.getElementById('Div2').style.display = 'none';
}
}
}
#Div1 {
display:none;
}
#Div1 {
background: red;
}
#Div2 {
background: green;
}
#Div1, #Div2 {
width: 50px;
height:50px;
}
<div id="Div1"></div>
<div id="Div2"></div>
<input id="Button1" type="button" value="" onclick="javascript:switchVisible();" />
0
source to share
Don't add click event via html. Add an event listener likedocument.getElementById ("Button1").addEventListener ("click", switchVisible, false);
See a working jsFiddle here: http://jsfiddle.net/bevanr01/gmkconLw/
0
source to share
function switchVisible() {
var div1=document.getElementById('Div1');
var div2=document.getElementById('Div2');
if (div1 !== undefined && div2 !== undefined) {
div1.style.display = div2.style.display === '' ? 'none' : div2.style.display === 'none' ? 'none' : 'block';
div2.style.display = div1.style.display === 'block' ? 'none' : 'block';
}
}
#Div1{
display: block;
background: blue;
}
#Div2 {
display: none;
background: red;
}
.divs
{
width: 50px;
height: 50px;
border: 1px solid #000;
}
<input id="Button1" type="button" value="Hide" onclick="switchVisible();" />
<div id="Div1" class="divs"> </div>
<div id="Div2" class="divs"> </div>
function switchVisible() {
var div1=document.getElementById('Div1');
var div2=document.getElementById('Div2');
if (div1 !== undefined && div2 !== undefined) {
div1.style.display = div2.style.display === '' ? 'none' : div2.style.display === 'none' ? 'none' : 'block';
div2.style.display = div1.style.display === 'block' ? 'none' : 'block';
}
}
#Div1{
display: block;
background: blue;
}
#Div2 {
display: none;
background: red;
}
.divs
{
width: 50px;
height: 50px;
border: 1px solid #000;
}
<input id="Button1" type="button" value="Hide" onclick="switchVisible();" />
<div id="Div1" class="divs"> </div>
<div id="Div2" class="divs"> </div>
-2
source to share