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

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -