Why is my accordion feature not collapsing on my website?

Shopify Discussion
1

Hi

I have built an accordion on my page here however it is not collapsing. Is anyone able to suggest why? I will paste below the code used in the page template and also the page. Plus I have added three icons to assets.

This is the code used in the page template:

{{ page.title }}

{{ page.content }}
.accordion { margin: 0; padding:10px; border-top:#F6EEE8 1px solid; background: #D48BC8; text-decoration:none; color: #000; font-size:1em; position:relative; } .accordion-open { background:#50b3da; color: #fff; } .accordion-open span { display:block; position:absolute; right:3px; top:25%; padding:10px; } .accordion-open span { background:url('{{ 'minus.png' | asset_url }}') center center no-repeat; } .accordion-close span { display:block; position:absolute; right:3px; top:25%; background:url('{{ 'plus.png' | asset_url }}') center center no-repeat; padding:10px; } .faqpage div.container { padding:0; margin:0; } .faqpage div.container { max-width:100%; padding:5px 0; } .faqpage div.content { background:#F6EEE8; margin: 0; padding:10px; font-size:.9em; line-height:1.5em; } .faqpage div.content ul { padding:0; margin:0; padding:3px; } .faqpage div.content p { padding:0; margin:3px 0 10px; padding:3px; } .faqpage div.content ul li { list-style-position:inside; line-height:25px; }

This is the code used on the page:

HOW DO I SHOP REWILD HQ?

If you would like to shop Rewild HQ but can’t make it to a market you can browse our shop here.

2

Heya Rewild,

I just checked your FAQ page, it was because the jQuery library was not imported, you have to insert jQuery script tag on the template file at the top :

Alternatively, if you want a simple accordion that works without jQuery, I have made an accordion HTML generator tool here : https://accordion.yagisoftware.com , hope this can help!

You can customize the accordion button and content styling with this css :

.yagi-accordion button {
  /* the button that expand/collapse */
}

.yagi-accordion .accordion-content  p {
  /* the expanded/collapsed text content */
}
3

Hey @soulchild37 ,

Your accordion maker worked incredible so thank you for that! I just have one insanely long answer and it was originally hiding the text below the dropdown’s section height so I changed the code to display it and now when you expand that question the text goes all the way down into the footer.

Is there any way I can either manually change the height of that section or make it grow as there’s longer answers?

Thanks so much!

Katie

4

hi @KatieGootenberg ,

You’re welcome! Ah I see, in the code you have copied, you can look for this part:

.yagi-accordion .max-h-tall{
   max-height: 100rem;
}

Then change the max height value to something higher like 200rem :

.yagi-accordion .max-h-tall{
   max-height: 200rem;
}

Hope this helps!

5

Thanks so much for that! I’ve increased it a few time and even just up’d it
to 1500rem, but it doesn’t seem to be getting any larger:
[image: image.png]

6

Hi @soulchild37 . Thanks for sharing that code! I’ve copied and pasted it exactly as is with no other coding, but the accordions don’t expand. Is there some special add-on that I need to make the HTML code work?

7

Hi @MonicaGonz ,

Do you mind sharing the link to the page which you have pasted the accordion code into? I will take a look into it.

Regards,

Axel Kee

8

Hey there! I actually figured it out by changing the height to “auto”! :slightly_smiling_face:

1 Like
9

Thanks so much for the offer, but I found a free app that will get me sorted for the immediate term. I’m just trying to figure out how shopify works and get something set up. As I move along, I’ll start looking more into design features, etc. and consider new options. :slightly_smiling_face: