JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <button onclick="toggleGallery()">Click to view images</button>
  <p>I want the hidden image-gallery div to show up here despite being display none.</p>
  <div id="image-gallery">
    <ul>
      <li>Image 1</li>
      <li>Image 2</li>
      <li>Image 3</li>
    </ul>
  </div>
</div>
<!--container-->
<script>
function toggleGallery() {
var x = document.getElementById('image-gallery');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}

</script>

CSS

#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;
  }
  #image-gallery li {
    border: 1px solid red;
  }
}