Why is my accordion feature not collapsing on my website?

[rewild]

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:

<div class="page-width">
<div class="grid">
<div class="faqpage">
<div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
<div class="section-header text-center">
<h1>{{ page.title }}</h1>
</div>

<div class="rte">
{{ page.content }}
</div>
</div>
</div>
</div>

<script type="text/javascript" src="{{ 'jquery_accordion.js' | asset_url }}"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.accordion').accordion({
defaultOpen: 'section1',
cookieName: 'accordion_nav'
});
});
</script>
<style>
.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;
}
</style>

This is the code used on the page:

<div class="accordion" id="section1">HOW DO I SHOP REWILD HQ?<span></span></div>
<div class="container">
<div class="content">
<p>If you would like to shop Rewild HQ but can’t make it to a market you can browse our shop <a href="https://rewild-co.myshopify.com/">here</a>.</p>
</div>
</div>

[soulchild37]

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 : 

<script src="https://code.jquery.com/jquery-3.6.0.min.js"   integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="   crossorigin="anonymous"></script>

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 */
}

[KatieGootenberg]

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

[soulchild37]

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!
 

[KatieGootenberg]

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]

[MonicaGonz]

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?

[soulchild37]

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

[KatieGootenberg]

Hey there! I actually figured it out by changing the height to "auto"! 🙂

[MonicaGonz]

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