Html / Javascript - Div Showing & Hiding
Question
Little Layout MDIV ADIV = BDIV
I'm trying to hide and show divs with onclicks and failing miserably.
When function MA() button is clicked = ADIV to show and BDIV to hide
When function MB() button is clicked = BDIV to show and ADIV to hide
function MA() { document.getElementById("ADIV").style.display = ""; document.getElementById("BDIV").style.display = "none"; } function MB() { document.getElementById("ADIV").style.display = "none"; document.getElementById("BDIV").style.display = ""; }
<div id="MDIV"> <button onclick="MA()">MA</button> <button onclick="MB()">MB</button> </div> <div id="ADIV"> <button onclick="A()">ADIV</button> </div> <div id="BDIV"> <button onclick="B()">BDIV</button> </div>
Sidenote Also if anyone can explain how to load with just MDIV - ADIV on page load.
Cheers in advance.
3 answers
solution1
0 ACCPTED 2017-11-14 21:54:19
Your code already toggles the visibility of the two elements on click of the respective buttons. However, you'll probably want to turn your elements to style.display = block when they're visible, rather than just removing the display style entirely.
In order to have #BDIV hidden by default, simply run
document.getElementById("BDIV").style.display = "none"; outside of your two functions.
This can be seen in the following example:
document.getElementById("BDIV").style.display = "none"; function MA() { document.getElementById("ADIV").style.display = "block"; document.getElementById("BDIV").style.display = "none"; } function MB() { document.getElementById("ADIV").style.display = "none"; document.getElementById("BDIV").style.display = "block"; }
<body> <div id="MDIV"> <button onclick="MA()">MA</button> <button onclick="MB()">MB</button> </div> <div id="ADIV"> <button onclick="A()">ADIV</button> </div> <div id="BDIV"> <button onclick="B()">BDIV</button> </div> </body>
Hope this helps! :)
solution2
0 2017-11-14 21:55:28
Regarding the sidenote: you should provide a default style of display: none for that BDIV:
function MA() { document.getElementById("ADIV").style.display = "block"; document.getElementById("BDIV").style.display = "none"; } function MB() { document.getElementById("ADIV").style.display = "none"; document.getElementById("BDIV").style.display = "block"; }
<div id="MDIV"> <button onclick="MA()">MA</button> <button onclick="MB()">MB</button> </div> <div id="ADIV"> <button onclick="A()">ADIV</button> </div> <div id="BDIV" style="display: none;"> <button onclick="B()">BDIV</button> </div>
Edit : I would recommend explicitly setting a value for the display -property. Either use inline , block , or inline-block , depending on what you need.
solution3
0 2017-11-14 22:00:19
Add a hidden style or CSS to the elements you want hidden on page load. I have added inline styling here to hide "BDIV".
Don't use JavaScript for styling on page load unless you have to. It is better to use CSS or styling.
<html>
<head></head>
<body>
<div id="MDIV">
<button onclick="MA()">MA</button>
<button onclick="MB()">MB</button>
</div>
<div id="ADIV">
<button onclick="A()">ADIV</button>
</div>
<div id="BDIV" style="display: none;">
<button onclick="B()">BDIV</button>
</div>
</body>
</html>
<script>
//CACHE YOUR ELEMENTS
var mdiv = document.getElementById('MDIV');
var adiv = document.getElementById('ADIV');
var bdiv = document.getElementById('BDIV');
//helper functions
function hide(elm) { elm.style.display = 'none'; }
function show(elm) { elm.style.display = 'block'; }
function MA() {
hide(adiv);
show(bdiv);
}
function MB() {
hide(adiv);
show(bdiv);
}
</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.