# Open accordian with the panel(s) closed **URL:** \ **Category:** Beginners\ **Created:** [December 3, 2018, 11:49pm UTC](https://forum.pinegrow.com/t/open-accordian-with-the-panel-s-closed/2483 "2018-12-03T23:49:17Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![randyrie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/randyrie/32/2103_2.png) [@randyrie](https://forum.pinegrow.com/u/randyrie)\ **Post date:** [December 3, 2018, 11:49pm UTC](https://forum.pinegrow.com/t/open-accordian-with-the-panel-s-closed/2483/1 "2018-12-03T23:49:17Z")
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: ![44%20PM](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/a/afb8142b290ea816be653adaee3339feebdc1303.png) 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? ---
**Author:** ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)\ **Post date:** [December 4, 2018, 4:04am UTC](https://forum.pinegrow.com/t/open-accordian-with-the-panel-s-closed/2483/2 "2018-12-04T04:04:08Z")
Need to see the rest of the code on the page. Can you post or upload the HTML? ---
**Author:** ![Rob](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rob/32/9_2.png) [@Rob](https://forum.pinegrow.com/u/Rob)\ **Post date:** [December 4, 2018, 6:15pm UTC](https://forum.pinegrow.com/t/open-accordian-with-the-panel-s-closed/2483/3 "2018-12-04T18:15:32Z")
@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. ---
**Author:** ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)\ **Post date:** [December 4, 2018, 8:16pm UTC](https://forum.pinegrow.com/t/open-accordian-with-the-panel-s-closed/2483/4 "2018-12-04T20:16:52Z")
Check your code to make sure there isn’t a second instance of #collapse1 somewhere else on the page. ---
**Author:** ![randyrie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/randyrie/32/2103_2.png) [@randyrie](https://forum.pinegrow.com/u/randyrie)\ **Post date:** [December 4, 2018, 8:30pm UTC](https://forum.pinegrow.com/t/open-accordian-with-the-panel-s-closed/2483/5 "2018-12-04T20:30:37Z")
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. ![49%20PM](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/6/637e319dae493e78374f87a176be82a4ac96ab42.png) ---
**Author:** ![randyrie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/randyrie/32/2103_2.png) [@randyrie](https://forum.pinegrow.com/u/randyrie)\ **Post date:** [December 4, 2018, 8:35pm UTC](https://forum.pinegrow.com/t/open-accordian-with-the-panel-s-closed/2483/6 "2018-12-04T20:35:25Z")
Rob, Yep… and the class has to be added to the first accordion title’s link: ![49%20PM](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/6/637e319dae493e78374f87a176be82a4ac96ab42.png) and the class’ parameter should be collapse **d**? - (present-tense collapse didn’t work for me). Am I correct, guys? ---
**Author:** ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)\ **Post date:** [December 5, 2018, 7:26am UTC](https://forum.pinegrow.com/t/open-accordian-with-the-panel-s-closed/2483/7 "2018-12-05T07:26:32Z")
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? ---
**Author:** ![randyrie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/randyrie/32/2103_2.png) [@randyrie](https://forum.pinegrow.com/u/randyrie)\ **Post date:** [December 5, 2018, 7:05pm UTC](https://forum.pinegrow.com/t/open-accordian-with-the-panel-s-closed/2483/8 "2018-12-05T19:05:58Z")
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? ---
**Author:** ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)\ **Post date:** [December 5, 2018, 7:33pm UTC](https://forum.pinegrow.com/t/open-accordian-with-the-panel-s-closed/2483/9 "2018-12-05T19:33:13Z")
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.