aritambourine Posted May 4, 2019 Share Posted May 4, 2019 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 More sharing options...
Funce Posted May 5, 2019 Share Posted May 5, 2019 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 More sharing options...
aritambourine Posted May 6, 2019 Author Share Posted May 6, 2019 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): After click (accordion open): Link to comment Share on other sites More sharing options...
Funce Posted May 7, 2019 Share Posted May 7, 2019 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 More sharing options...
aritambourine Posted May 8, 2019 Author Share Posted May 8, 2019 I gotta be honest -- I have absolutely no idea! Link to comment Share on other sites More sharing options...
Funce Posted May 8, 2019 Share Posted May 8, 2019 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 More sharing options...
aritambourine Posted May 8, 2019 Author Share Posted May 8, 2019 It worked! That's amazing and so simple! THANK YOU! Is there a way to now incorporate this mechanism into a close all/open all link/button? Link to comment Share on other sites More sharing options...
Funce Posted May 8, 2019 Share Posted May 8, 2019 (edited) 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 May 8, 2019 by Funce Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now