Accordion – display only one event at a time

0

I would like only one event to display at a time. When another event is clicked, it should hide the last event. Right now, all events are staying visible and I can’t figure out how to hide previously clicked events.

Does anyone have suggestions for how I can hide all but one event at a time?

I would like only one event to display at a time. When another event is clicked, it should hide the last event. Right now, all events are staying visible and I can’t figure out how to hide previously clicked events.

Does anyone have suggestions for how I can hide all but one event at a time?

<!DOCTYPE html>
<html lang="en">

<head>
  <title>FV Runners</title>
  <meta charset="UTF-8">
  <link href="styles/normalize.css" rel="stylesheet" />
  <link href="styles/my_style.css" rel="stylesheet" />
<style>
.panel{
display:none;
color: orange;
}

#a:hover {
    color: gray;
}

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


</style>
</head>

<body>
  <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" id="a">Mini Sprint</li>
        <div class="panel">
            <p>10/30/17, Memorial Park, Appleton</p>
        </div>
        <br>
      <li class="accordion" id="a">Iron Horse</li>
      <div class="panel">
            <p>11/6/17, Bay Beach Park, Green Bay</p>
        </div>
        <br>
      <li class="accordion" id="a">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" id="a">Fox River Marathon</li>
      <div class="panel">
            <p>10/15/17, Pierce Park, Appleton</p>
        </div>
        <br>
      <li class="accordion" id="a">N.E.W. Half Marathon</li>
      <div class="panel">
            <p>10/29/17, Bay Beach Park, Green Bay</p>
        </div>
        <br>
      <li class="accordion" id="a">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" id="a">Cheesehead Marathon</li>
      <div class="panel">
            <p>9/24/17, Pamperin Park, Green Bay</p>
        </div>
        <br>
      <li class="accordion" id="a">Chain O'Lakes Marathon</li>
      <div class="panel">
            <p>10/29/17, Bay Beach Park, Green Bay</p>
        </div>
        <br>
      <li class="accordion" id="a">Fox Cities Marathon</li>
        <div class="panel">
            <p>11/12/17, Menominee Park, Oshkosh</p>
        </div>


    </ul>
  </div>
    </div>

  </div>


  <script>


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

        }
    }
}

Link: Accordion – display only one event at a time
Source: Stack Jquery

Share.

About Author

Leave A Reply