HTML Accoridion Panel standardmäßig geöffnet?

Question

Ich stieß auf dieses animierte Akkordeonmenü von der W3 Schools Seite und ich mag es wirklich, aber es scheint keine genauen Angaben darüber zu geben, wie man eine bestimmte Sektion offen und "aktiv" standardmäßig hält.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_animate

Ich habe versucht, die Klasse der Schaltfläche auf „aktiv“ zu ändern, aber das tat einige zu funktionieren scheint, und es verändert nur die „+“ auf ein „-“ Zeichen, ohne das Menü zeigt.

Kann jemand beraten?

<div id="accordion_menu"> 
        <button class="accordion">What You Will Learn</button> 
         <div class="panel scrolled"> 
          <ul> 
           <li>Fundamental algorithms for signal processing.</li> 
           <li>Techniques for beam forming.</li> 
           <li>Trade-offs among active waveform designs.</li> 
           <li>Ocean medium effects.</li> 
           <li>Shallow water effects and issues</li> 
           <li>Optimal and adaptive processing</li> 
          </ul> 
         </div> 

        <button class="accordion">Course Outline</button> 
         <div class="panel"> 
          <ol> 
           <li> 
            <p><em>Introduction to Sonar Signal Processing.</em> Introduction to sonar detection systems and types of signal processing performed in sonar. Correlation processing, Fournier analysis, windowing, and ambiguity functions. Evaluation of probability of detection and false alarm rate for FFT and broadband signal processors. </p>  
           </li> 

           <li> 
            <p><em>Beamforming and Array Processing.</em> Beam patterns for sonar arrays, shading techniques for sidelobe control, beamformer implementation. Calculation of DI and array gain in directional noise fields. </p> 
           </li> 

           <li> 
            <p><em>Passive Sonar Signal Processing.</em> Review of signal characteristics, ambient noise, and platform noise. Passive system configurations and implementations. Spectral analysis and integration. </p> 
           </li> 

           <li> 
            <p><em>Active Sonar Signal Processing.</em> Waveform selection and ambiguity functions. Projector configurations. Reverberation and multipath effects. Receiver design. </p> 
           </li> 

           <li> 
            <p><em>Passive and Active Designs and Implementations.</em>Advanced techniques for beamforming, detection, estimation, and classification will be explored. Optimal array processing. Data adaptive methods, super resolution spectral techniques, time-frequency representations and active/passive automated classification are among the advanced techniques that will be covered.</p> 
           </li> 
           <li> 
            <p><em>Advanced Signal Processing Techniques.</em>Advanced techniques for beamforming, detection, estimation, and classification will be explored. Optimal array processing. Data adaptive methods, super resolution spectral techniques, time-frequency representations and active/passive automated classification are among the advanced techniques that will be covered. </p> 
           </li> 



          </ol> 

         </div> 


        <button class="accordion">Tuition</button> 
         <div class="panel"> 
          <p>Tuition for this three-day course is $1890 per person at one of our scheduled public courses. Onsite pricing is available. Please call us at 410-956-8805 or send an email to ati@aticourses.com.</p> 

          <p><a href="https://www.aticourses.com/beta_mobile/register_secure.html">Register Now Without Obligation.</a></p> 
         </div> 
       </div> 

Answer 1

das Akkordeon ein spezifisches Akkordeon-Panel standardmäßig geöffnet (auf Seite Last), können Sie den Skript-Tag von ändern:

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.maxHeight){ 
     panel.style.maxHeight = null; 
    } else { 
     panel.style.maxHeight = panel.scrollHeight + "px"; 
    } 
    } 
} 

Um dies:

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.maxHeight){ 
     panel.style.maxHeight = null; 
    } else { 
     panel.style.maxHeight = panel.scrollHeight + "px"; 
    } 
    } 
} 

// New code to open the first section by default 
if(acc.length > 0) { 
    acc[0].classList.add("active"); 
    acc[0].nextElementSibling.style.maxHeight = acc[0].nextElementSibling.scrollHeight + "px"; 
} 

Wenn Sie den ersten Abschnitt nicht standardmäßig öffnen möchten, können Sie die 0 in den Index Ihrer Wahl ändern.

Here is a codepen showing it working.

Answer 2

<script> 
var acc = document.getElementsByClassName("accordion"); 
var i; 

for (i = 0; i < acc.length; i++) { 
    acc[i].classList.toggle("active"); 
    var panel = acc[i].nextElementSibling; 
    panel.style.maxHeight = panel.scrollHeight + "px"; 
} 
</script> 

Answer 3

Sie können manuell ein Click-Ereignis

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    button.accordion { 
 
     background-color: #eee; 
 
     color: #444; 
 
     cursor: pointer; 
 
     padding: 18px; 
 
     width: 100%; 
 
     border: none; 
 
     text-align: left; 
 
     outline: none; 
 
     font-size: 15px; 
 
     transition: 0.4s; 
 
    } 
 
    
 
    button.accordion.active, button.accordion:hover { 
 
     background-color: #ddd; 
 
    } 
 
    
 
    div.panel { 
 
     padding: 0 18px; 
 
     background-color: white; 
 
     max-height: 0; 
 
     overflow: hidden; 
 
     transition: max-height 0.2s ease-out; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <h2>Animated Accordion</h2> 
 
    <p>Click on the buttons to open the collapsible content.</p> 
 

 
    <button class="accordion">Section 1</button> 
 
    <div class="panel"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
    </div> 
 

 
    <button class="accordion">Section 2</button> 
 
    <div class="panel"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
    </div> 
 

 
    <button class="accordion">Section 3</button> 
 
    <div class="panel"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
    </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.maxHeight){ 
 
      panel.style.maxHeight = null; 
 
     } else { 
 
      panel.style.maxHeight = panel.scrollHeight + "px"; 
 
     } 
 
     } 
 
    } 
 
     
 
    /* open second panel by default */ 
 
    acc[1].click(); 
 
    
 
    </script> 
 

 
</body> 
 

 
</html>

Answer 4

Sie lösen in nur hinzufügen können

acc[1].click(); 

bis zum Ende des Skripts. Sie können den Index ändern, um den Abschnitt zu öffnen, der standardmäßig geöffnet werden soll.

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.maxHeight){ 
     panel.style.maxHeight = null; 
    } else { 
     panel.style.maxHeight = panel.scrollHeight + "px"; 
    } 
    } 
} 

acc[1].click();