javascript - Toggling div requires 2 clicks. Should be 1 click -
i got here on hiding div on mobile, there additional issue have. starting learn more javascript, newbie.
this working example of content div hidden on mobile unless button clicked. works fine, except takes 2 clicks open div. want 1 click.
i’ve seen answers on type of question, , have tried them beyond ability understand right now. i’m not getting it.
how rework script takes 1 button click open div? thanks!
function togglegallery() { var x = document.getelementbyid('image-gallery'); if (x.style.display === 'none') { x.style.display = 'block'; } else { x.style.display = 'none'; } }
#image-gallery { display: block; width: 600px; border: 1px solid black; } #image-gallery li { width: 150px; height: 150px; color: white; text-align: center; margin: 10px; background-color: gray; display: inline-block; } button { display: none; } @media (max-width: 600px) { #image-gallery { display: none; width: 100%; } button { display: block; } }
<div class="container"> <button onclick="togglegallery()">click view images</button> <p>i want reveal content on mobile 1 button click. </p> <div id="image-gallery"> <ul> <li>image 1</li> <li>image 2</li> <li>image 3</li> </ul> </div> </div> <!--container-->
in togglegallery()
function, replace condition x.style.display === 'none'
x.style.display !== 'block'
.
the display
property not equal none
meaning function set none
in condition, meaning next time function , set block
. rather checking display
not equal block
work first time.
Comments
Post a Comment