title: modal gallery inside accordion closes accordion
body: <p>starting with some of w3schools CSS templates I made a simple image gallery grid, with modal.</p>
  <p>now I have added that image gallery to an accordion; I have it set to one tab open at a time to keep clutter down, I achieved this with JS</p>
  <p>now the image grid is inside the accordion</p>
  <p>modal still makes them pop up and provides the close button as expected;</p>
  <p>the problem is</p>
  <p>when image is opened the accordion it came from closes immediately, and it has to be reopened to look at next image.</p>
  <p>I created a fiddle <a href="https://jsfiddle.net/preppietrash/ze24qy18/7/" rel="nofollow noreferrer">here</a></p>
  <p>thank you for any advice or direction on how to fix</p>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  
    &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://www.w3schools.com/w3css/4/w3.css&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://fonts.googleapis.com/css?family=Raleway&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;portstyle.css&quot;&gt;
  
      &lt;title&gt;testenv 7&lt;/title&gt;
  
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;h2&gt;Lorem ipsum dolor sit amet.&lt;/h2&gt;
      &lt;p&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus aliquid, adipisci optio consequuntur officiis
        expedita doloremque consectetur culpa, odit ut suscipit magnam dolorum. Quibusdam earum error exercitationem
        nisi doloribus suscipit iusto atque ab vero veniam illum consequatur maxime illo corrupti dicta culpa veritatis,
        minima mollitia? Molestias velit provident ut officiis?&lt;/p&gt;
  
      &lt;div class=&quot;accordion&quot;&gt;
        &lt;button class=&quot;section&quot;&gt;People&lt;/button&gt;
        &lt;div class=&quot;panel&quot;&gt;
          &lt;!-- content goes below --&gt;
          &lt;!-- Group 1  --&gt;
          &lt;div class=&quot;w3-row&quot;&gt;
  
            &lt;div class=&quot;w3-third&quot;&gt;
              &lt;!-- Column  1--&gt;
              &lt;!-- Tile 1 --&gt;
              &lt;img src=&quot;https://source.unsplash.com/user/c_v_r/1900x800&quot; style=&quot;width:100%&quot; onclick=&quot;onClick(this)&quot; alt=&quot;editorial&quot;&gt;
              &lt;!-- Tile 2 --&gt;
              &lt;img src=&quot;https://source.unsplash.com/user/c_v_r/1900x800&quot; style=&quot;width:100%&quot; onclick=&quot;onClick(this)&quot; alt=&quot;editorial&quot;&gt;
              &lt;!-- Tile 3 --&gt;
              &lt;img src=&quot;https://source.unsplash.com/user/c_v_r/1900x800&quot; style=&quot;width:100%&quot; onclick=&quot;onClick(this)&quot; alt=&quot;editorial&quot;&gt;
  
  
  
  
            &lt;/div&gt;
  
            &lt;div class=&quot;w3-third&quot;&gt;
              &lt;!-- Column  2--&gt;
              &lt;!-- Tile 4 --&gt;
              &lt;img src=&quot;https://source.unsplash.com/user/c_v_r/1900x800&quot; style=&quot;width:100%&quot; onclick=&quot;onClick(this)&quot; alt=&quot;editorial&quot;&gt;
              &lt;!-- Tile 5 --&gt;
              &lt;img src=&quot;https://source.unsplash.com/user/c_v_r/1900x800&quot; style=&quot;width:100%&quot; onclick=&quot;onClick(this)&quot; alt=&quot;editorial&quot;&gt;
              &lt;!-- Tile 6 --&gt;
              &lt;img src=&quot;https://source.unsplash.com/user/c_v_r/1900x800&quot; style=&quot;width:100%&quot; onclick=&quot;onClick(this)&quot; alt=&quot;editorial&quot;&gt;
            &lt;/div&gt;
  
            &lt;div class=&quot;w3-third&quot;&gt;
              &lt;!-- Column  3--&gt;
              &lt;!-- Tile 7 --&gt;
              &lt;img src=&quot;https://source.unsplash.com/user/c_v_r/1900x800&quot; style=&quot;width:100%&quot; onclick=&quot;onClick(this)&quot; alt=&quot;editorial&quot;&gt;
              &lt;!-- Tile 8 --&gt;
              &lt;img src=&quot;https://source.unsplash.com/user/c_v_r/1900x800&quot; style=&quot;width:100%&quot; onclick=&quot;onClick(this)&quot; alt=&quot;editorial&quot;&gt;
              &lt;!-- Tile 9 --&gt;
              &lt;img src=&quot;https://source.unsplash.com/user/c_v_r/1900x800&quot; style=&quot;width:100%&quot; onclick=&quot;onClick(this)&quot; alt=&quot;editorial&quot;&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- content goes above --&gt;
  
        &lt;/div&gt;
  
        &lt;button class=&quot;section&quot;&gt;Places&lt;/button&gt;
        &lt;div class=&quot;panel&quot;&gt;
          &lt;!-- content goes below --&gt;
          &lt;!-- Group 2  --&gt;
          &lt;div class=&quot;w3-row&quot;&gt;
  
            &lt;div class=&quot;w3-third&quot;&gt;
              &lt;!-- Column  4--&gt;
              &lt;!-- Tile 10 --&gt;
              &lt;img src=&quot;https://source.unsplash.com/user/c_v_r/1900x800&quot; style=&quot;width:100%&quot; onclick=&quot;onClick(this)&quot; alt=&quot;editorial&quot;&gt;
              &lt;!-- Tile 11 --&gt;
              &lt;img src=&quot;https://source.unsplash.com/user/c_v_r/1900x800&quot; style=&quot;width:100%&quot; onclick=&quot;onClick(this)&quot; alt=&quot;editorial&quot;&gt;
              &lt;!-- Tile 12 --&gt;
              &lt;img src=&quot;https://source.unsplash.com/user/c_v_r/1900x800&quot; style=&quot;width:100%&quot; onclick=&quot;onClick(this)&quot; alt=&quot;editorial&quot;&gt;
  
  
  
  
            &lt;/div&gt;
  
            &lt;div class=&quot;w3-third&quot;&gt;
              &lt;!-- Column  5--&gt;
              &lt;!-- Tile 13 --&gt;
              &lt;img src=&quot;https://source.unsplash.com/user/c_v_r/1900x800&quot; style=&quot;width:100%&quot; onclick=&quot;onClick(this)&quot; alt=&quot;editorial&quot;&gt;
              &lt;!-- Tile 14 --&gt;
              &lt;img src=&quot;https://source.unsplash.com/user/c_v_r/1900x800&quot; style=&quot;width:100%&quot; onclick=&quot;onClick(this)&quot; alt=&quot;editorial&quot;&gt;
              &lt;!-- Tile 15 --&gt;
              &lt;img src=&quot;https://source.unsplash.com/user/c_v_r/1900x800&quot; style=&quot;width:100%&quot; onclick=&quot;onClick(this)&quot; alt=&quot;editorial&quot;&gt;
            &lt;/div&gt;
  
            &lt;div class=&quot;w3-third&quot;&gt;
              &lt;!-- Column  6--&gt;
              &lt;!-- Tile 16 --&gt;
              &lt;img src=&quot;https://source.unsplash.com/user/c_v_r/1900x800&quot; style=&quot;width:100%&quot; onclick=&quot;onClick(this)&quot; alt=&quot;editorial&quot;&gt;
              &lt;!-- Tile 17 --&gt;
              &lt;img src=&quot;https://source.unsplash.com/user/c_v_r/1900x800&quot; style=&quot;width:100%&quot; onclick=&quot;onClick(this)&quot; alt=&quot;editorial&quot;&gt;
              &lt;!-- Tile 18 --&gt;
              &lt;img src=&quot;https://source.unsplash.com/user/c_v_r/1900x800&quot; style=&quot;width:100%&quot; onclick=&quot;onClick(this)&quot; alt=&quot;editorial&quot;&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- content goes above --&gt;
        &lt;/div&gt;
  
        &lt;button class=&quot;section&quot;&gt;stories&lt;/button&gt;
        &lt;div class=&quot;panel&quot;&gt;
          &lt;!-- content goes below --&gt;
          &lt;!-- Group 3  --&gt;
          &lt;div class=&quot;w3-row&quot;&gt;
  
            &lt;div class=&quot;w3-third&quot;&gt;
              &lt;!-- Column  7--&gt;
              &lt;!-- Tile 19 --&gt;
              &lt;img src=&quot;https://source.unsplash.com/user/c_v_r/1900x800&quot; style=&quot;width:100%&quot; onclick=&quot;onClick(this)&quot; alt=&quot;editorial&quot;&gt;
              &lt;!-- Tile 20 --&gt;
              &lt;img src=&quot;https://source.unsplash.com/user/c_v_r/1900x800&quot; style=&quot;width:100%&quot; onclick=&quot;onClick(this)&quot; alt=&quot;editorial&quot;&gt;
              &lt;!-- Tile 21 --&gt;
              &lt;img src=&quot;https://source.unsplash.com/user/c_v_r/1900x800&quot; style=&quot;width:100%&quot; onclick=&quot;onClick(this)&quot; alt=&quot;editorial&quot;&gt;
  
  
  
  
            &lt;/div&gt;
  
            &lt;div class=&quot;w3-third&quot;&gt;
              &lt;!-- Column  8--&gt;
              &lt;!-- Tile 22 --&gt;
              &lt;img src=&quot;https://source.unsplash.com/user/c_v_r/1900x800&quot; style=&quot;width:100%&quot; onclick=&quot;onClick(this)&quot; alt=&quot;editorial&quot;&gt;
              &lt;!-- Tile 23 --&gt;
              &lt;img src=&quot;https://source.unsplash.com/user/c_v_r/1900x800&quot; style=&quot;width:100%&quot; onclick=&quot;onClick(this)&quot; alt=&quot;editorial&quot;&gt;
              &lt;!-- Tile 24 --&gt;
              &lt;img src=&quot;https://source.unsplash.com/user/c_v_r/1900x800&quot; style=&quot;width:100%&quot; onclick=&quot;onClick(this)&quot; alt=&quot;editorial&quot;&gt;
            &lt;/div&gt;
  
            &lt;div class=&quot;w3-third&quot;&gt;
              &lt;!-- Column  9--&gt;
              &lt;!-- Tile 25 --&gt;
              &lt;img src=&quot;https://source.unsplash.com/user/c_v_r/1900x800&quot; style=&quot;width:100%&quot; onclick=&quot;onClick(this)&quot; alt=&quot;editorial&quot;&gt;
              &lt;!-- Tile 26 --&gt;
              &lt;img src=&quot;https://source.unsplash.com/user/c_v_r/1900x800&quot; style=&quot;width:100%&quot; onclick=&quot;onClick(this)&quot; alt=&quot;editorial&quot;&gt;
              &lt;!-- Tile 27 --&gt;
              &lt;img src=&quot;https://source.unsplash.com/user/c_v_r/1900x800&quot; style=&quot;width:100%&quot; onclick=&quot;onClick(this)&quot; alt=&quot;editorial&quot;&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- content goes above --&gt;
        &lt;/div&gt;
  
  
  
      &lt;/div&gt;
  
      &lt;script type=&quot;text/javascript&quot; src=&quot;w3accoscript.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;modal.js&quot;&gt;&lt;/script&gt;
  
  
      &lt;!-- Modal for full size images on click--&gt;
      &lt;div id=&quot;modal01&quot; class=&quot;w3-modal w3-transparent&quot; style=&quot;padding-top:0&quot; onclick=&quot;this.style.display='none'&quot;&gt;
        &lt;span class=&quot;w3-button w3-black w3-xlarge w3-display-topright&quot;&gt;×&lt;/span&gt;
        &lt;div class=&quot;w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64&quot;&gt;
          &lt;img id=&quot;img01&quot; class=&quot;w3-image&quot;&gt;
          &lt;p id=&quot;caption&quot;&gt;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p><strong>CSS</strong></p>
  <pre><code>.section {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
  }
  
  .active,
  .section:hover {
    background-color: #ccc;
  }
  
  .section:after {
    content: &quot;\002B&quot;;
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
  }
  
  .section.active:after {
    content: &quot;\2212&quot;;
  }
  
  .panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
  }
  
  /* square grid object fit
  .image-container .image img {
    height: 100%;
    width: 100%;
   -o-object-fit: cover;
   object-fit: cover;
    left: 0;
    position: absolute;
    top: 0;
  } */
  
  /* hover condensed */
  
  .alt-dropdown-hover {
    position: relative;
    display: inline-block;
    cursor: pointer;
  }
  
  .alt-dropdown-hover:hover .alt-dropdown-content {
    display: block;
  }
  
  .alt-dropdown-hover:first-child {
    background-color: #ccc;
    color: #000;
  }
  
  .alt-dropdown-hover:hover&gt;.w3-button:first-child,
  .w3-dropdown-click:hover&gt;.w3-button:first-child {
    background-color: #ccc;
    color: #000;
  }
  
  .w3-bar-block .alt-dropdown-hover .alt-dropdown-content,
  .w3-bar-block .w3-dropdown-click .alt-dropdown-content {
    min-width: 100%;
  }
  
  .w3-bar-block .alt-dropdown-hover .w3-button,
  .w3-bar-block .w3-dropdown-click .w3-button {
    width: 100%;
    text-align: left;
    padding: 8px 16px;
  }
  
  .alt-dropdown-hover.w3-mobile .alt-dropdown-content,
  .w3-dropdown-click.w3-mobile .alt-dropdown-content {
    position: relative;
  }
  
  .w3-bar-item.w3-mobile,
  .alt-dropdown-hover.w3-mobile,
  .w3-dropdown-click.w3-mobile {
    text-align: center;
  }
  
  .alt-dropdown-hover.w3-mobile,
  .alt-dropdown-hover.w3-mobile .w3-btn,
  .alt-dropdown-hover.w3-mobile .w3-button,
  .w3-dropdown-click.w3-mobile,
  .w3-dropdown-click.w3-mobile .w3-btn,
  .w3-dropdown-click.w3-mobile .w3-button {
    width: 100%;
  }
  
  .alt-dropdown-hover.w3-mobile .alt-dropdown-content,
  .w3-dropdown-click.w3-mobile .alt-dropdown-content {
    position: relative;
  }
  
  .w3-bar-item.w3-mobile,
  .alt-dropdown-hover.w3-mobile,
  .w3-dropdown-click.w3-mobile {
    text-align: center;
  }
  
  .alt-dropdown-hover:hover&gt;.alt-button:first-child,
  .alt-dropdown-click:hover&gt;.alt-button:first-child {
    background-color: #ccc;
    color: rgb(0, 217, 255);
  }
  
  /* &lt;button style=&quot;text-align: right;&quot;&gt; */
  
  .w3-bar-block .alt-dropdown-hover .alt-button,
  .w3-bar-block .alt-dropdown-click .alt-button {
    width: 100%;
    text-align: right;
    padding: 8px 16px;
  }
  </code></pre>
  <p><strong>JS</strong></p>
  <pre><code>console.log(&quot;working accordion test env 7&quot;);
  
  var acc = document.getElementsByClassName(&quot;accordion&quot;);
  var i;
  
  for (i = 0; i &lt; acc.length; i++) {
    acc[i].addEventListener(&quot;click&quot;, function() {
      this.classList.toggle(&quot;active&quot;);
      var panel = this.nextElementSibling;
      if (panel.style.maxHeight) {
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = panel.scrollHeight + &quot;px&quot;;
      }
    });
  }
  
  // Set up the click event on the accordion itself
  // When a panel is clicked, that event will bubble up
  // to the accordion and can be handled there.
  document
    .querySelector(&quot;.accordion&quot;)
    .addEventListener(&quot;click&quot;, function(event) {
      // Check to see if the clicked panel was the currently open one.
      let alreadyActive = event.target.classList.contains(&quot;active&quot;);
  
      // Loop over all the panels an close each one
      document.querySelectorAll(&quot;.panel&quot;).forEach(function(panel) {
        panel.style.maxHeight = &quot;0&quot;;
        panel.previousElementSibling.classList.remove(&quot;active&quot;);
      });
  
      // If the clicked panel wasn't the already active one go ahead
      // and open the clicked panel. Otherwise, do nothing and leave
      // all the panels closed.
      if (!alreadyActive) {
        // Then show the clicked panel which is accessible as event.target
        event.target.classList.add(&quot;active&quot;);
        var panel = event.target.nextElementSibling;
        panel.style.maxHeight = panel.scrollHeight + &quot;px&quot;;
      }
    });
  
  
  
  // Modal Image Gallery
  function onClick(element) {
    document.getElementById(&quot;img01&quot;).src = element.src;
    document.getElementById(&quot;modal01&quot;).style.display = &quot;block&quot;;
    var captionText = document.getElementById(&quot;caption&quot;);
    captionText.innerHTML = element.alt;
  }
  </code></pre>
  <p>update:</p>
  <p>changing &quot;.accordion&quot; to &quot;.section&quot; stops the underlying accordion from closing; however stops the &quot;one at a time&quot; feature</p>
  <pre><code>console.log(&quot;working accordion test env 7&quot;);
  
  var acc = document.getElementsByClassName(&quot;section&quot;);
  var i;
  
  for (i = 0; i &lt; acc.length; i++) {
    acc[i].addEventListener(&quot;click&quot;, function () {
      this.classList.toggle(&quot;active&quot;);
      var panel = this.nextElementSibling;
      if (panel.style.maxHeight) {
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = panel.scrollHeight + &quot;px&quot;;
      }
    });
  }
  
  // Set up the click event on the accordion itself
  // When a panel is clicked, that event will bubble up
  // to the accordion and can be handled there.
  document.querySelector(&quot;.section&quot;).addEventListener(&quot;click&quot;, function (event) {
    // Check to see if the clicked panel was the currently open one.
    let alreadyActive = event.target.classList.contains(&quot;active&quot;);
  
    // Loop over all the panels an close each one
    document.querySelectorAll(&quot;.section&quot;).forEach(function (panel) {
      panel.style.maxHeight = &quot;0&quot;;
      panel.previousElementSibling.classList.remove(&quot;active&quot;);
    });
  
    // If the clicked panel wasn't the already active one go ahead
    // and open the clicked panel. Otherwise, do nothing and leave
    // all the panels closed.
    if (!alreadyActive) {
      // Then show the clicked panel which is accessible as event.target
      event.target.classList.add(&quot;active&quot;);
      var panel = event.target.nextElementSibling;
      panel.style.maxHeight = panel.scrollHeight + &quot;px&quot;;
    }
  });
  </code></pre>