在负载下折叠手风琴

Question

I'm trying to get my accordion items to not be visible on page load. I would like them to only be visible when they are clicked on, and would like the item to disappear when a different item is clicked on. I have tried a few different options and can't seem to get it to work. Please see my code below..

 var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "none") { panel.style.display = "block"; } else { panel.style.display = "none"; } } } 

 <div id="header"> <h1>Fox Valley Runners Club</h1> </div> <div id="main"></div> <div id="pics" class="panel"> <div class="race_box"> <img src="images/run1.jpg" id="5kpic" /><br /> <figcaption>5k/10k Events</figcaption> <div class="races" id="5k"> <h3>5k/10 Events</h3> <ul> <li class="accordion">Mini Sprint</li> <div class="panel"> <p>10/30/17, Memorial Park, Appleton</p> </div> <li class="accordion">Iron Horse</li> <div class="panel"> <p>11/6/17, Bay Beach Park, Green Bay</p> </div> <li class="accordion">Twilight Trail</li> <div class="panel"> <p>11/13/17, River's Edge Park, Wrightstown</p> </div> </ul> </div> </div> <div class="race_box"> <img src="images/run2.jpg" id="halfpic" /></button><br /> <figcaption>Half Marathon Events</figcaption> <div class="races" id="half"> <h3>Half Marathon Events</h3> <ul> <li class="accordion">Fox River Marathon</li> <div class="panel"> <p>10/15/17, Pierce Park, Appleton</p> </div> <li class="accordion">NEW Half Marathon</li> <div class="panel"> <p>10/29/17, Bay Beach Park, Green Bay</p> </div> <li class="accordion">Winnebago Run</li> <div class="panel"> <p>11/27/17, Menominee Park, Oshkosh</p> </div> </ul> </div> </div> <div class="race_box"> <img src="images/run3.jpg" id="fullpic" /><br /> <figcaption>Full Marathon Events</figcaption> <div class="races" id="full"> <h3>Full Marathon Events</h3> <ul> <li class="accordion">Cheesehead Marathon</li> <div class="panel"> <p>9/24/17, Pamperin Park, Green Bay</p> </div> <li class="accordion">Chain O'Lakes Marathon</li> <div class="panel"> <p>10/29/17, Bay Beach Park, Green Bay</p> </div> <li class="accordion">Fox Cities Marathon</li> <div class="panel"> <p>11/12/17, Menominee Park, Oshkosh</p> </div> </ul> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 1

Simply keep display:none initially like this

.panel{
display:none;
}

and remove class="panel" from main div with id="pics"

 var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } } } 

 .panel{ display:none; } 

 <div id="header"> <h1>Fox Valley Runners Club</h1> </div> <div id="main"></div> <div id="pics"> <div class="race_box"> <img src="images/run1.jpg" id="5kpic" /><br /> <figcaption>5k/10k Events</figcaption> <div class="races" id="5k"> <h3>5k/10 Events</h3> <ul> <li class="accordion">Mini Sprint</li> <div class="panel"> <p>10/30/17, Memorial Park, Appleton</p> </div> <li class="accordion">Iron Horse</li> <div class="panel"> <p>11/6/17, Bay Beach Park, Green Bay</p> </div> <li class="accordion">Twilight Trail</li> <div class="panel"> <p>11/13/17, River's Edge Park, Wrightstown</p> </div> </ul> </div> </div> <div class="race_box"> <img src="images/run2.jpg" id="halfpic" /></button><br /> <figcaption>Half Marathon Events</figcaption> <div class="races" id="half"> <h3>Half Marathon Events</h3> <ul> <li class="accordion">Fox River Marathon</li> <div class="panel"> <p>10/15/17, Pierce Park, Appleton</p> </div> <li class="accordion">NEW Half Marathon</li> <div class="panel"> <p>10/29/17, Bay Beach Park, Green Bay</p> </div> <li class="accordion">Winnebago Run</li> <div class="panel"> <p>11/27/17, Menominee Park, Oshkosh</p> </div> </ul> </div> </div> <div class="race_box"> <img src="images/run3.jpg" id="fullpic" /><br /> <figcaption>Full Marathon Events</figcaption> <div class="races" id="full"> <h3>Full Marathon Events</h3> <ul> <li class="accordion">Cheesehead Marathon</li> <div class="panel"> <p>9/24/17, Pamperin Park, Green Bay</p> </div> <li class="accordion">Chain O'Lakes Marathon</li> <div class="panel"> <p>10/29/17, Bay Beach Park, Green Bay</p> </div> <li class="accordion">Fox Cities Marathon</li> <div class="panel"> <p>11/12/17, Menominee Park, Oshkosh</p> </div> </ul> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

You could (like George Campbell said) use CSS instead of inline styles. For this you should add classes to your accordion elements instead of the styles. For example, you have the following structure:

   <ul>
      <li class="accordion">Fox River Marathon</li>
      <div class="panel">
        <p>10/15/17, Pierce Park, Appleton</p>
      </div>
   </ul>

The related CSS could be this:

.accordion + .panel:not(.active) {
  display: none;
}

Now you can toggle the class "active" like you already done in your code:

this.classList.toggle("active");

This ensures all your elements will initially be hidden. If you want to close all other elements after you triggered an accordion you could simply traverse through all accordion elements and check if the element you just clicked matches the current element in your loop, if not you can remove the "active" class from it.

Answer 3

As already said, make the panels invisible on default via css.

When a title is clicked, check if got the class. If yes, remove it. If not, remove the class from every panel and then explicitly set it on the panel.

Some Example (not the best solution, but it will show you the idea):

var acc = document.getElementsByClassName("accordion");
var i
var panels = document.getElementsByClassName("panel");
var j;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function() {
        var panel = this.nextElementSibling;

        if (panel.classList.contains("active")) {
            panel.classList.remove("active");
        } else {
            for (j = 0; j < panels.length; j++) {
                panels[j].classList.remove("active");
            }

            panel.classList.add("active");
        }
    }
}