0

I have searched for this but my javascript knowledge is very basic so I might have missed the answer.

I have an image gallery that I want visible by default on desktop. When viewed on mobile, I want that gallery hidden by default, but still visible if a button is clicked.

I have created the mobile part, using some code I had for mobile navigation. That part works fine... but obviously since my button and image-gallery div are set to "display none" by default it's not going to show up on desktop. But I don't know how to make both things happen with the same content.

How could I make it visible on desktop, and an optional toggle on mobile? Thanks!

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" style="display:none;">
        <ul>
            <li>Image 1</li>
            <li>Image 2</li>
            <li>Image 3</li>
            </ul>
        </div>
</div><!--container-->

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: block;
width: 100%;
}

button {
display: block;
}

#image-gallery li {
 border: 1px solid red;
} 
}

JS:

function toggleGallery() {
var x = document.getElementById('image-gallery');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
sterlingcooper
  • 7
  • 5

2 Answers2

0

It will be hidden in Small Screen Devices and visible in screen greater than 767px width. css :

#image-gallery {
display: none;
}

@media (min-width:767px){
   #image-gallery {
     display: block;
    }
}

then the toggle function for buttion

function toggleDiv(id) {
    var div = document.getElementById(id);
    div.style.display = div.style.display == "none" ? "block" : "none";
}
Sagun Gautam
  • 470
  • 6
  • 20
  • Thanks gudboisgn, I used the method from TalGabay for my issue but your code might also help for my double click to open issue. Only problem is I couldn't close it again after it was opened. – sterlingcooper Aug 07 '17 at 22:52
0

Your code was ok, just add the script tag at the end. Like in the fiddle i made for you here

toggleGallery() was not deifened.

<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>

Here you have a well-described answer about putting the script tag at the end of the HTML

Balaji.J.B
  • 618
  • 7
  • 14
TalGabay
  • 238
  • 2
  • 9
  • Thanks! That worked well. The only issue is I have to click the button twice on mobile to get it to open. Is there a way I can do it with just one click? Either way I can probably move forward with this one. – sterlingcooper Aug 07 '17 at 22:50
  • update: I wrapped my gallery in another div, included a "close window" button, then added some js to close the div and refresh the page so the person could start over. – sterlingcooper Aug 08 '17 at 00:16
  • Great! It will be nice if you mark this answer as the correct one – TalGabay Aug 08 '17 at 04:52