Jump to content
aritambourine

How to Start with All Open Accordions

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!

Share this post


Link to post
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!

Share this post


Link to post
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

Share this post


Link to post
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?

Share this post


Link to post
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>

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...