I'm trying to implement a button that can hide and show a div, but for some reason, it only shows the div and doesn't hide it when clicked.
Check out my fiddle:
This is my code:
<div class="buttons" style="background-color: rgba(0,0,0,.8);">
<a class="button" id="showdiv1">Div 1</a>
<a class="button" id="showdiv2">Div 2</a>
<a class="button" id="showdiv3">Div 3</a>
<a class="button" id="showdiv4">Div 4</a>
</div>
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
CSS
.button {
cursor:pointer;
display:inline-block;
margin:10px;
clip: rect(auto,auto,auto,auto);
}
#div1 {
background:aqua;
padding:20px;
width:100px;
text-align:center;
display:none;
}
#div2 {
background:blue;
padding:20px;
width:100px;
text-align:center;
display:none;
}
#div3 {
background:orange;
padding:20px;
width:100px;
text-align:center;
display:none;
}
#div4 {
background:green;
padding:20px;
width:100px;
text-align:center;
display:none;
}
a {
color:aqua;
-webkit-filter: grayscale(1.0);
}
a:hover {
color:red;
-webkit-filter: grayscale(0.0);
}
Javascript
$('#showdiv1').click(function () {
$('div[id^=div]').hide();
$('#div1').show();
});
$('#showdiv2').click(function () {
$('div[id^=div]').hide();
$('#div2').show();
});
$('#showdiv3').click(function () {
$('div[id^=div]').hide();
$('#div3').show();
});
$('#showdiv4').click(function () {
$('div[id^=div]').hide();
$('#div4').show();
});
I also want to add a special effect when revealing the hidden div, similar to the "explode" effect shown in this example.
How do I incorporate this effect into my fiddle?
Thanks!