Accordion not collapsing

rewild
New Member
3 0 0

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>

0 Likes

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

 

Spent too much support time dealing with order cancellation request from customer? Wouldn't it be good if customer can cancel order on their own without bugging your support? Try out Cancellable app! https://apps.shopify.com/cancellable . I also write articles about store customization that can improve your customer shopping experience here : Yagi Software Blog
0 Likes