Jump to content

How to Start with All Open Accordions


aritambourine

Recommended Posts

I'm basically a coding amateur and need help! I used this page to find an accordion that works well for what I need (I'm looking for an accordion that can have all open at once) and am basically using this permutation, edited only for content & style. Is there a way to start with them all open instead of all closed? The simpler the better for this frustrated amateur! Thanks!

Link to comment
Share on other sites

To start with them all open instead of closed, you can look at how the page considers the accordion as open.

In this case, for the clickable part of the accordion (that darkens when opened) it requires a class of "Active"

For the second part (the information to be shown) you can use your page inspector (which comes in most browsers) to see what's changed.

Give it a try!

Link to comment
Share on other sites

I feel like I'm not looking in the right place or am not interpreting it or extrapolating what to do correctly because all I see changing is <button class="accordion"> to <button class="accordion active"> and a line of style for the panel, and I'm not quite sure what to do.  I've attached a couple screencaps of what changes on the open/close click.  (I used chrome inspector).

Before click (accordion closed):

1539792345_BeforeClick.png.4571f7519fc86dea1942af758500f450.png

After click (accordion open):

936387988_Afterclick.png.5e6a81314e5f14df88559e02beeb2f52.png

Link to comment
Share on other sites

You've noticed the differences. That's good. That's what changes how it looks.

Now in terms of making those changes a reality, lets look at what the JavaScript does right now.

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

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
</script>

Well, we know that these changes manifest when you click on the accordion.

As the loop adds the eventListeners we could try simulating a click. That will immediately open all the accordions when the JavaScript loads.

This command should help you with that https://www.w3schools.com/jsref/met_html_click.asp

There are other methods, but this was one of the quickest that came to mind.

Do you know what to do?

Link to comment
Share on other sites

1 hour ago, aritambourine said:

I gotta be honest -- I have absolutely no idea!

That's totally fine. Sometimes you just need a bit of light.

In the code above, you can access the element in question with acc[ i ], to simulate a click on that element, we can do this

acc[i].click();

Because this needs to be clicked after the eventListener has been added, we put it at the bottom of the for loop.

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

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", 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[i].click()
}
</script>
Link to comment
Share on other sites

Yep! This would also be pretty simple!

You'd just need to add a click event listener to your button, then go through all the accordions and simulate clicks on all of them. After all their mechanisms for clicking still work.
If you wanted to make it 'Close Only' or 'Open Only' you'd just need to add a check for if the accordion contains the class "active", and click or don't click accordingly.


Try something like this.

<button id="toggle_button">Toggle All</button>
<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", 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[i].click();
}

var toggle_all = document.getElementbyId("toggle_button");
toggle_all.addEventListener("click", function() {
  for (var j = 0; j < acc.length; j++) {
    acc[j].click();
  }
};

</script>
Edited by Funce
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...