Is the HTML Accordion Panel set to be open by default?

Question

Is the HTML Accordion Panel set to be open by default?

I recently found this amazing animated accordion menu on the W3 Schools website and I really appreciate its design. However, I am struggling to figure out how to set a specific section to be open and "active" by default.

Visit the original page here

I attempted changing the class of the button to "active," but that didn't seem to work as expected. It only changed the "+" sign to a "-" sign without displaying the menu content.

Any suggestions on how to achieve this?

<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>The tuition for this three-day course is $1890 per person at one of our scheduled public courses. Onsite pricing is available. For more information or to register, please contact us at 410-956-8805 or send an email to <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82e3f6ebc2e3f6ebe1edf7f0f1e7f1ace1edef">[email protected]</a>.</p>

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

javascript html css menu accordion

Answer 1

Answer №1

If you wish for a specific accordion panel to be open by default when the page loads, you can update the script as follows:

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

Modify it to look like this:

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

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

If you prefer not to have the first section open by default, you can specify a different index instead of 0.

Check out this codepen demonstration.

Answer 2

If you wish for a specific accordion panel to be open by default when the page loads, you can update the script as follows:

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

Modify it to look like this:

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

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

If you prefer not to have the first section open by default, you can specify a different index instead of 0.

Check out this codepen demonstration.

Answer 3

Answer №2

<script>
const accordionItems = document.getElementsByClassName("accordion");
let index;

for (index = 0; index < accordionItems.length; index++) {
  accordionItems[index].classList.toggle("active");
  const panelContent = accordionItems[index].nextElementSibling;
  panelContent.style.maxHeight = panelContent.scrollHeight + "px";
}
</script>

Answer 4

<script>
const accordionItems = document.getElementsByClassName("accordion");
let index;

for (index = 0; index < accordionItems.length; index++) {
  accordionItems[index].classList.toggle("active");
  const panelContent = accordionItems[index].nextElementSibling;
  panelContent.style.maxHeight = panelContent.scrollHeight + "px";
}
</script>

Answer 5

Answer №3

You have the ability to manually initiate a click event

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

You have the ability to manually initiate a click event

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

Answer №4

To include the desired functionality, simply insert the following code snippet at the end of your script:

acc[1].click();

You have the flexibility to modify the index value within the code to suit your specific requirements for selecting and opening a particular section by default.

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

Answer 8

To include the desired functionality, simply insert the following code snippet at the end of your script:

acc[1].click();

You have the flexibility to modify the index value within the code to suit your specific requirements for selecting and opening a particular section by default.

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

Is the HTML Accordion Panel set to be open by default?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Guide on how to print a particular DIV along with its corresponding CSS styling

"NaN is being caused by the presence of quotation marks within the split property

Confirmation for deletion in HTML form

iPhone: Fixed position div disappearing

An unexpected error occurs when attempting to invoke the arrow function of a child class within an abstract parent class in Typescript

`CSS Content Placeholder Issue When Used Alongside JavaScript`

Instructions for selecting all checkboxes in an HTML table with just one click

Manipulate numerous documents within MongoDB by updating them with varying data in each

Using jQuery to access a server-side SQL database through PHP

What is causing the text to not wrap around properly?

What is the purpose of enclosing Arrow function body in parentheses?

Ensuring Data Accuracy Prior to Saving in Zend Framework 1.12

Creating a dynamic route in Node Express allows for flexible path handling

The state in Reactjs is not displaying as expected

Engaging with ng-change and select: Modifying data source results in a change

Eliminate specific elements from an array while retaining others

Achieving sequential actions in Javascript without the need for state updates

What is the process for including a favicon on my website?

Issue with the useSWR hook causing the DOM not to update correctly due to mutation

Cannot retrieve Global variables when using chrome.tabs.executescript in Chrome 55