onclick show div, but hide when other one is clicked
Question
I'm working with the code from this topic's answer #1 -- " Show a div onclick and hide the image that triggered it "
<img src="Icons/note_add.png" onclick="show('comment', this)"/>
then the function would apply a "display none" to it:
function show(target, trigger){
document.getElementById(target).style.display = 'block';
trigger.style.display = "none"
}
It works great, but I have 4 divs on a page using this onclick feature. When a user clicks on image 1, div 1 appears, but when they click on image 2 to toggle div 2, div 1 is still visible.
How can I make it so that the open div closes when another one is triggered to show? I only want one div to be open on a page, but right now, all 4 can be open.
3 answers
solution1
14 2013-10-08 15:12:46
METHOD 1
This can be done much easier with jQuery code.
EXAMPLE HERE
HTML
<img id="img1"/>
<img id="img2"/>
<div id="div1"/>
<div id="div2"/>
<div id="div3"/>
<div id="div4"/>
JQUERY
$("#img1").on('click', function() {
$(this).hide();
$("#div2, #div3, #div4").hide();
$("#div1").show();
});
Simply replace show / hide with what you want to show or hide when the img is clicked.
TOP TIP: You can also replace show/hide with toggle() or fadeIn() /fadeOut()
toggle() : Will alternate between display block and display none with each click.
fadeIn() : Will do the same as show() but with a nice fade animation.
METHOD 2
The new way is to use CSS animations . Tests tend to show that CSS is better on performance at handling animations than jQuery.
EXAMPLE HERE
HTML
<div id="imgWrap">
<img id="img1" class="Active" data-box="div1"/>
<img id="img2" data-box="div2"/>
<img id="img3" data-box="div3"/>
<img id="img4" data-box="div4"/>
</div>
<div id="divWrap">
<div id="div1" class="Active">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
</div>
CSS
#divWrap div{
opacity:0;
}
#divWrap .Active{
opacity:1;
-webkit-animation:fadeIn ease-in-out 0.5s;
animation:fadeIn ease-in-out 0.5s;
}
@-webkit-keyframes fadeIn{
from{opacity:0;}
to {opacity:1;}
}
@keyframes fadeIn{
from{opacity:0;}
to {opacity:1;}
}
Add display:none/block along with opacity (see fiddle) if you do not want the element to reserve page space when it is not visible.
The beauty of using css is you can make the animation anything you want. This code will simply trigger the animation when the Active class is added to the element.
Here are some animation examples .
JAVASCRIPT
$('img').on('click', function () {
var divID = $(this).attr('data-box');
$(this).addClass('Active').siblings().removeClass('Active');
$('#' + divID).addClass('Active').siblings().removeClass('Active');
})
Lastly add some javascript or jQuery as above to add the Active class on click. In this example Active has been hardcoded to one element in the html to create a default active element on page load.
This code also adds Active to the button clicked. This is optional but can be used to add css styling to the currently active button.
solution2
3 2013-10-08 15:09:08
var old_target,old_trigger;
function show(target, trigger){
if(old_target!==undefined) document.getElementById(old_target).style.display = 'none';
if(old_trigger!==undefined) old_trigger.style.display = "block";
document.getElementById(target).style.display = 'block';
trigger.style.display = "none"
old_target = target;
old_trigger = trigger;
}
Just save references to last clicked target/triggers and change styles of that old references.
solution3
1 2016-03-24 02:53:24
I have done this with a fixed div. Here is the code examples.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="mc.js"></script>
<link rel="stylesheet" type="text/css" href="mc.css">
</head>
<body onload=hideAll('mydiv1')>
<div id='mydiv1'><img src='img/1.jpg' alt="Image 1.jpg Not Found" height='300px' width='100%' />1</div>
<div id='mydiv2'><img src='img/2.jpg' alt="Image 2.jpg Not Found" height='300px' width='100%' />2</div>
<div id='mydiv3'><img src='img/3.jpg' alt="Image 3.jpg Not Found" height='300px' width='100%' />3</div>
<div id='mydiv4'><img src='img/4.jpg' alt="Image 4.jpg Not Found" height='300px' width='100%' />4</div>
<div id='mydiv5'><img src='img/5.jpg' alt="Image 5.jpg Not Found" height='300px' width='100%' />5</div>
<div id='mydiv6'><img src='img/6.jpg' alt="Image 6.jpg Not Found" height='300px' width='100%' />6</div>
<div id='mydiv7'><img src='img/7.jpg' alt="Image 7.jpg Not Found" height='300px' width='100%' />7</div>
<div id='mydiv8'><img src='img/8.jpg' alt="Image 8.jpg Not Found" height='300px' width='100%' />8</div>
<div id='mydiv9'><img src='img/9.jpg' alt="Image 9.jpgNot Found" height='300px' width='100%' />9</div>
<div id='mydiv10'><img src='img/10.jpg' alt="Image 10.jpgNot Found" height='300px' width='100%' />10</div>
<div id='mydiv11'><img src='img/11.jpg' alt="Image 11.jpgNot Found" height='300px' width='100%' />11</div>
<div id='mydiv12'><img src='img/12.jpg' alt="Image 12.jpg Not Found" height='300px' width='100%' />12</div>
<div id='mydiv13'><img src='img/13.jpg' alt="Image 13.jpg Not Found" height='300px' width='100%' />13</div>
<div id='mydiv14'><img src='img/14.jpg' alt="Image 14.jpg Not Found" height='300px' width='100%' />14</div>
<div id='mydiv15'><img src='img/15.jpg' alt="Image 15.jpg Not Found" height='300px' width='100%' />15</div>
<div id='mydiv16'><img src='img/16.jpg' alt="Image 16.jpg Not Found" height='300px' width='100%' />16</div>
<div id='mydiv17'><img src='img/17.jpg' alt="Image 17.jpg Not Found" height='300px' width='100%' />17</div>
<div id='mydiv18'><img src='img/18.jpg' alt="Image 18.jpg Not Found" height='300px' width='100%' />18</div>
<div id='mydiv19'><img src='img/19.jpg' alt="Image 19.jpg Not Found" height='300px' width='100%' />19</div>
<div id="topMenu">
<button type="button" onclick="hideAll('mydiv1')">1</button>
<button type="button" onclick="hideAll('mydiv2')">2</button>
<button type="button" onclick="hideAll('mydiv3')">3</button>
<button type="button" onclick="hideAll('mydiv4')">4</button>
<button type="button" onclick="hideAll('mydiv5')">5</button>
<button type="button" onclick="hideAll('mydiv6')">6</button>
<button type="button" onclick="hideAll('mydiv7')">7</button>
<button type="button" onclick="hideAll('mydiv8')">8</button>
<button type="button" onclick="hideAll('mydiv9')">9</button>
<button type="button" onclick="hideAll('mydiv10')">10</button>
<button type="button" onclick="hideAll('mydiv11')">11</button>
<button type="button" onclick="hideAll('mydiv12')">12</button>
<button type="button" onclick="hideAll('mydiv13')">13</button>
<button type="button" onclick="hideAll('mydiv14')">14</button>
<button type="button" onclick="hideAll('mydiv15')">15</button>
<button type="button" onclick="hideAll('mydiv16')">16</button>
<button type="button" onclick="hideAll('mydiv17')">17</button>
<button type="button" onclick="hideAll('mydiv18')">18</button>
<button type="button" onclick="hideAll('mydiv19')">19</button>
<button type="button" onclick="hideAll()">Hide All</button>
<button type="button" onclick="showAll()">Show All</button>
</div>
</body>
</html>
The CSS is as follows: Save as mc.css
#topMenu {
width: 100%;
text-align: center;
position: fixed;
background-color: black;
color: white;
left: 0px;
top: 0px;
}
div#mydiv1,
div#mydiv2,
div#mydiv3,
div#mydiv4,
div#mydiv5,
div#mydiv6,
div#mydiv7,
div#mydiv8,
div#mydiv9,
div#mydiv10,
div#mydiv11,
div#mydiv12,
div#mydiv13,
div#mydiv14,
div#mydiv15,
div#mydiv16,
div#mydiv17,
div#mydiv18,
div#mydiv19,
div#mydiv20 {
text-align:center;
width: 600px;
height: auto;
position: fixed;
left: 25%;
top: 20px;
}
div>button {
text-align: center;
}
Javascript as follows : save as mc.js
function hideAll(Adiv) {
var text = "";
var i;
for (i = 1; i < 20; i++) {
var text = ""
text += "mydiv" + i;
document.getElementById(text).style.visibility = "hidden";
}
document.getElementById(Adiv).style.visibility = "visible";
}
function showAll(Adiv) {
var text = "";
var i;
for (i = 1; i < 20; i++) {
var text = ""
text += "mydiv" + i;
document.getElementById(text).style.visibility = "visible";
}
}
Obviously you can add more images and place them in the same area as I did. The
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.