One click to open/second click to close accordian

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 to review the non-working accordian.
2.) PLease visit to see where the accordian is working the way I’d like it to.

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 :slight_smile:

Just did… refresh to see the working URL

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?

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.)


on the working site you have,

                            <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> 

and the same part on the broken site you have

<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> 

so the collapsed class is missing there

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?

I will have a look now :slight_smile: watch this space.

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?

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.

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

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

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.


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

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

Yeah… takes a bit of ‘tinkering’ but I’m sure simply replicating the ‘card div.card’ breaks the set. See 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.

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?

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 :slight_smile: )
Or Checking bootstrap docs about how to add extra dropdown in accordions etc.

Pinegrow may send you a box of worms in the post :slight_smile: if you Bother them with this :smiley:

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 :slight_smile:

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

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

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?

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…

He doesn’t look too relaxed to me there :slight_smile:

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

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


Across all our domains :frowning:

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 :slight_smile:

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.