I’m trying to set an accordion (Bootstrap 4) to open collapsed. Here is a screen capture of two code blocks – the top one (from an earlier site) opens collapsed, the bottom one (from my current site) opens expanded:
Anyone know why the top code block opens collapsed and the second code block opens expanded – or how/where to set the accordion so it opens collapsed?
Need to see the rest of the code on the page. Can you post or upload the HTML?
@randyrie I think the piece of code you want to change is in the div following the section of code you’ve posted. If you look at the class on that div it reads:
class="collapse show"
by changing this to just
class="collapse"
it should work. Maybe compare your code with the older site to see if is similar to what I’ve suggested. Hope this is of some use to you. Let us know how you get on with it.
Check your code to make sure there isn’t a second instance of #collapse1 somewhere else on the page.
Thanks for your offer to help (again), Printninja, but I found what I was doing wrong… I was applying the ‘collapsed’ class to the wrong element. Adding class=“collapsed” to the accordion title’s link does the trick.
Rob,
Yep… and the class has to be added to the first accordion title’s link:
and the class’ parameter should be collapsed ? - (present-tense collapse didn’t work for me). Am I correct, guys?
There is no Bootstrap class known as “collapsed” (with a ‘d’)
What has probably happened here is that in spelling it with a d, you’ve simply removed the .collapse class, which has coincidentally solved your problem. You can test this by deliberately changing that ‘d’ to some other letter, an ‘x’ for example."
The problem is elsewhere in your code. Why don’t you post the whole page?
I studied the code on a new page that I placed the accordion on and found that the first instance of the class=“collapse show” needs to have ‘show’ removed (just as Rob suggested). Then the page opens with the accordion closed. I guess I was over-thinking/reacting to the issue and missed the obvious.
Thanks to both Printninja and Rob for showing me how to close the accordion on page-open.
I wish this was an option rather than a default - perhaps place the option on an accordion properties panel?
It’s just the way Bootstrap styles the default accordion element. You kind of just have to get used to the default state of things, and modify them as needed. It becomes second nature as you build more websites.
