HTML Accoridion Panelがデフォルトで開きますか？

Question

私はW3 Schoolsのサイトからこのアニメーションアコーディオンのメニューに出くわしましたが、本当に好きですが、デフォルトで特定のセクションを開いて「アクティブ」にする方法についての詳細はありません。

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

私は「アクティブ」へのボタンのクラスを変更しようとしたが、それはいくつかの動作するようには思えなかったし、それだけに「+」を変更「 - 」メニューを表示せずに署名します。

誰も助言できますか？

<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

アコーディオンは（ページのロードの）デフォルトでは、特定のアコーディオンパネルを開いているために、あなたは、スクリプトタグを変更することができます。これに

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

：

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

デフォルトで最初のセクションを開きたくない場合は、0を目的のインデックスに変更できます。

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

は、手動であなただけのスクリプトの最後に

acc[1].click(); 

に追加することができます

<!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

クリックイベントをトリガすることができます。インデックスを変更して、デフォルトで開くセクションを開くことができます。

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();