stackoom
  简体   繁体   中英

Accordion - display only one event at a time

 原文  2018-03-13 18:34:10  5   3    javascript/ jquery

Question

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

        }
    }
}

3 answers

solution1
 0  2018-03-13 18:37:18

The way to show only one event at a time is to give all events a class you can use to hide them all.

So when you want to show a new event, you just

  1. Select for your class and hide everything
  2. Show the specific event

solution2
 0 ACCPTED  2018-03-13 19:09:30

I think this is what you want, what I have done is when someone click on any event I hide every event except that event on which user has click and decide whether hide or show that event in main function. 

 onload=hide; var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function() { hide(this); this.nextElementSibling.classList.toggle("hide"); } } function hide(e){ for (i = 0; i < acc.length; i++) { if(e!==acc[i] && acc[i].nextElementSibling.classList.value.indexOf("hide")<0) acc[i].nextElementSibling.classList.toggle("hide"); } } 
 .hide{ display:none; } 
 <!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 { color: orange; } #a:hover { color: gray; } </style> </head> <body> <div id="header"> <h1>Fox Valley Runners Club</h1> </div> <div id="main"></div> <div id="pics"> <div class="race_box"> <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"> <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">NEW 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"> <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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> </script> </body> </html>

solution3
 0  2018-03-13 19:26:36

Just in case you were intent on using Jquery's accordion component, here's an adaptation from their example page. Also here's a JsFiddle . 

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Accordion - Default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $(function() { $(".accordion").accordion({ header: 'h3', collapsible: true, expanded: false, active: false, autoHeight: false, autoActivate: false }); }); </script> </head> <body> <div id="main"> <h3>5k/10k Events</h3> <div class="accordion"> <h3>Mini Sprint</h3> <div class='panel'> <p>10/30/17, Memorial Park, Appleton</p> </div> <h3>Iron Horse</h3> <div class='panel'> <p>11/6/17, Bay Beach Park, Green Bay</p> </div> <h3>Twilight Trail</h3> <div class='panel'> <p>11/13/17, River's Edge Park, Wrightstown</p> </div> </div> <h3>Half Marathon Events</h3> <div class="accordion"> <h3>Fox River Marathon</h3> <div class="panel"> <p>10/15/17, Pierce Park, Appleton</p> </div> <h3>NEW Half Marathon</h3> <div class="panel"> <p>10/29/17, Bay Beach Park, Green Bay</p> </div> <h3> Winnebago Run</h3> <div class="panel"> <p>11/27/17, Menominee Park, Oshkosh</p> </div> </div> <h3>Full Marathon Events</h3> <div class="accordion"> <h3>Cheesehead Marathon</h3> <div class="panel"> <p>9/24/17, Pamperin Park, Green Bay</p> </div> <h3>Chain O'Lakes Marathon</h3> <div class="panel"> <p>10/29/17, Bay Beach Park, Green Bay</p> </div> <h3>Fox Cities Marathon</h3> <div class="panel"> <p>11/12/17, Menominee Park, Oshkosh</p> </div> </div> </div> </body> </html>

Obviously, styling is still left up to you.

Hope this helps!

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Only open one accordion tab at one time How to open only 1 accordion at one time jQuery Accordion Open only one tab at a time How to expand only one accordion tab at a time? How to show only one accordion at time jQuery FAQ Accordion only open one at a time Designed accordion menu using js but want to do only open one accordion tab at one time Event works only one time How to make only one accordion slide open at a time Jquery accordion type functionality only one item open at a time
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM