# One click to open/second click to close accordian

**URL:** <https://forum.pinegrow.com/t/one-click-to-open-second-click-to-close-accordian/2596>\
**Category:** Beginners\
**Created:** [January 13, 2019, 2:10am UTC](https://forum.pinegrow.com/t/one-click-to-open-second-click-to-close-accordian/2596 "2019-01-13T02:10:18Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**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:** [January 13, 2019, 2:10am UTC](https://forum.pinegrow.com/t/one-click-to-open-second-click-to-close-accordian/2596/1 "2019-01-13T02:10:18Z")

</div>

I’ve placed an accordian on a webpage that works but a second click does not close the dropdown which works perfectly on three other websites that use the accordian - just not on this new one. Anyone know what might prevent the second click from closing the dropdown? How do I fix the accordian to open/close like it should?  
1.) Please visit [http://statecollegedev.com/rfl/homepage-copy.php](http://statecollegedev.com/rfl/homepage-copy.php) to review the non-working accordian.  
2.) PLease visit [http://statecollegedev.com/breathing.html](http://statecollegedev.com/breathing.html) to see where the accordian is working the way I’d like it to.

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [January 13, 2019, 2:17am UTC](https://forum.pinegrow.com/t/one-click-to-open-second-click-to-close-accordian/2596/2 "2019-01-13T02:17:30Z")

</div>

Hi @randyrie, could you supply a URL of one of your working sites with the same accordion to compare? thanks.

Ah! you have edited it as I was checking.  
Scratch that 🙂

---

<div class="post-metadata">

**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:** [January 13, 2019, 2:18am UTC](https://forum.pinegrow.com/t/one-click-to-open-second-click-to-close-accordian/2596/3 "2019-01-13T02:18:08Z")

</div>

Just did… refresh to see the working URL

---

<div class="post-metadata">

**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:** [January 13, 2019, 2:29am UTC](https://forum.pinegrow.com/t/one-click-to-open-second-click-to-close-accordian/2596/4 "2019-01-13T02:29:59Z")

</div>

I think I’m adding the extra dropdown incorrectly - the three that the default accordion inserts work fine. It’s after I add the extra two (need five in this case) that causes the accordion to break. What is the best way to add extra dropdowns to the default set so I don’t wreck them?

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [January 13, 2019, 2:33am UTC](https://forum.pinegrow.com/t/one-click-to-open-second-click-to-close-accordian/2596/5 "2019-01-13T02:33:48Z")

</div>

not sure but I did notice that in the working one, you have the _collapsed_ class implemented  
but not on the broken site (first link on both.)

ie,

on the working site you have,

```auto
                            <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" href="#collapse4" aria-expanded="false" aria-controls="collapse4" style="color: #fdfbfb;">Calming Breath ⬍</a> </h5> 
                        </div>

```

and the same part on the broken site you have

```auto
<div class="card-header" role="tab" style="padding: 5px 5px 5px 15px; background-color: #636465;"> 
                            <h5 class="mb-0"><a data-toggle="collapse" href="#collapse1" aria-expanded="true" aria-controls="collapse1" style="color: #fdfbfb;">Generation Two&nbsp; &nbsp; ⬍</a> </h5> 
                        </div>

```

so the _collapsed_ class is missing there

---

<div class="post-metadata">

**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:** [January 13, 2019, 2:39am UTC](https://forum.pinegrow.com/t/one-click-to-open-second-click-to-close-accordian/2596/6 "2019-01-13T02:39:55Z")

</div>

I added the class=‘collapsed’ to each but that did not help… this class would be added by the insertion of the default accordion, not?

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [January 13, 2019, 2:41am UTC](https://forum.pinegrow.com/t/one-click-to-open-second-click-to-close-accordian/2596/7 "2019-01-13T02:41:14Z")

</div>

I will have a look now 🙂 watch this space.

---

<div class="post-metadata">

**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:** [January 13, 2019, 2:50am UTC](https://forum.pinegrow.com/t/one-click-to-open-second-click-to-close-accordian/2596/8 "2019-01-13T02:50:03Z")

</div>

Will do… thanks for jumping in to help me, btw. Since the default three that the accordian inserts on the page work fine, what is the best way to add extra dropdowns so I don’t break them?

---

<div class="post-metadata">

**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:** [January 13, 2019, 3:00am UTC](https://forum.pinegrow.com/t/one-click-to-open-second-click-to-close-accordian/2596/9 "2019-01-13T03:00:56Z")

</div>

Think I got this figured out… on a test page I added the default three dropdowns inserted by the accordian and to add extras, I again added another accordion set - - then renamed them 4 and 5 repspectively and deleted the sixth one. They all five seem to work correctly. Simply duplicating the “Card div.card” breaks the set, I guess.

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [January 13, 2019, 3:07am UTC](https://forum.pinegrow.com/t/one-click-to-open-second-click-to-close-accordian/2596/10 "2019-01-13T03:07:46Z")

</div>

oh well done!  
I was still tinkering .  
Good. and keep up the good work, Nicely productive still I see 🙂

and could you link to this working one to see what you did with regards the Card Renaming?  
Cheers.

just noticed something odd with Pinegrow too.

I was going to keep the original URL open in Pinegrow, then open your page again, after you had made changes.  
so two versions of your URL to compare, before and after your changes.

BUT

Pinegrow throws a hissy fit if you open the same site twice via URL.  
Ie

 ![2019-01-13_03-14-42](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/6/65c92ccf03af57e5006b0c47b55c526b6863d13b.png)

just posting this here, so it is in context if this may be a Bug @Emmanuel.  
right, back with the work in hand 🙂

---

<div class="post-metadata">

**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:** [January 13, 2019, 3:15am UTC](https://forum.pinegrow.com/t/one-click-to-open-second-click-to-close-accordian/2596/11 "2019-01-13T03:15:44Z")

</div>

Yeah… takes a bit of ‘tinkering’ but I’m sure simply replicating the ‘card div.card’ breaks the set. See [http://statecollegedev.com/rfl/test-accordion.html](http://statecollegedev.com/rfl/test-accordion.html) to see that adding extra default sets and renaming them to be conecutive (and remove the “show” from each of the first dropdowns) seems to work. I still think there has to be a better way to expand the number of needed dropdowns to the default three.

I’m going to email PineGrow tech support to see what they say – if they respond, that is.

---

<div class="post-metadata">

**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:** [January 13, 2019, 3:45am UTC](https://forum.pinegrow.com/t/one-click-to-open-second-click-to-close-accordian/2596/12 "2019-01-13T03:45:13Z")

</div>

Hmmm… I tried to add a default accordion to the homepage but it would not open/collapse. There must be something on the page that breaks the accordion since it works on a blank test-page. Perhaps there’s something assigned to the div tags that it doesn’t like?

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [January 13, 2019, 3:48am UTC](https://forum.pinegrow.com/t/one-click-to-open-second-click-to-close-accordian/2596/13 "2019-01-13T03:48:05Z")

</div>

> [@randyrie](#):
>
> I’m going to email PineGrow tech support to see what they say – if they respond, that is.

Well, to be honest, this is more a _Bootstrap_ issue than a Pinegrow issue I would have thought and your better off asking on here (but people will already have seen this 🙂 )  
Or Checking bootstrap docs about how to add extra dropdown in accordions etc.

Pinegrow may send you a box of worms in the post 🙂 if you Bother them with this 😃

Well, having said that, I have just added an accordion in Pinegrow and then just adding an accordion item, the behaviour isn’t as expected, ie, similar to you but, it doesn’t expand in the new item.

So, I shall investigate further. N.B. its nearly 4am here.  
I need to get out more.  
Or I may fall asleep whilst doing this but its interesting 🙂

---

<div class="post-metadata">

**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:** [January 13, 2019, 3:49am UTC](https://forum.pinegrow.com/t/one-click-to-open-second-click-to-close-accordian/2596/14 "2019-01-13T03:49:21Z")

</div>

I removed all the tests and will study the homepage to see what breaks the accordion on it. Thanks for your help, Schpengle.

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [January 13, 2019, 4:56am UTC](https://forum.pinegrow.com/t/one-click-to-open-second-click-to-close-accordian/2596/15 "2019-01-13T04:56:06Z")

</div>

no probs, I tinkered, then realised My eyes had glazed over at 5am 🙂WIll look again tmrw …er in a few hours, if someone hasn’t nailed it.

---

<div class="post-metadata">

**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:** [January 13, 2019, 4:59am UTC](https://forum.pinegrow.com/t/one-click-to-open-second-click-to-close-accordian/2596/16 "2019-01-13T04:59:59Z")

</div>

I missed this topic, but I did have a look at the working page and I was wondering two things…

1. Why does the header image stretch horizontally when you change the width of the window? Is that by design?
2. What are the box characters after the heading text on the accordions for?

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [January 13, 2019, 5:43am UTC](https://forum.pinegrow.com/t/one-click-to-open-second-click-to-close-accordian/2596/17 "2019-01-13T05:43:20Z")

</div>

Hi @Printninja I think they are dual ended arrows indicating up/down action. - at least on mine that was what they were, but @randyrie is busy at the mo, sorting his pages so they aren’t live so cant see them now. But they appeared clear to me.

oh and never mind stretching , try reducing the page width . hee hee…

![2019-01-13_05-39-16](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/5/51165f0aaddf4e9deb9f1d535c7428dcca19207e.png)  
He doesn’t look too relaxed to me there 🙂

---

<div class="post-metadata">

**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:** [January 13, 2019, 7:15am UTC](https://forum.pinegrow.com/t/one-click-to-open-second-click-to-close-accordian/2596/18 "2019-01-13T07:15:21Z")

</div>

I must not have a necessary font installed. Which means that the site should be loading it for people like me.

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [January 13, 2019, 7:30am UTC](https://forum.pinegrow.com/t/one-click-to-open-second-click-to-close-accordian/2596/19 "2019-01-13T07:30:42Z")

</div>

Could be.  
oh well, its 7.30am here, been up all night, as  
our webserver seems to have gone down.

![2019-01-13_07-28-04](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/1/1f3d00ef931f16b326630af011268873fb5e8c04.png)

Across all our domains ☹

Gah! and guess what?  
My mate went away for the weekend yay for the first time in ages.  
its mainly his bag.  
Oh. well, support ticket raised an bed for me.  
Nighty night… This year is getting off to a blinding start so far 🙂

---

<div class="post-metadata">

**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:** [January 13, 2019, 8:39am UTC](https://forum.pinegrow.com/t/one-click-to-open-second-click-to-close-accordian/2596/20 "2019-01-13T08:39:51Z")

</div>

Interesting, the arrow character displays in Firefox, but not Chrome or I.E. 11. If I copy and paste it into a Windows program, all I get is a ⬍ character. This is vexating. I am vexed.

[Next page](https://forum.pinegrow.com/t/one-click-to-open-second-click-to-close-accordian/2596.md?page=2)
