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

Popular posts from this blog

python Tkinter Capturing keyboard events save as one single string -

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

javascript - Z-index in d3.js -