Skip to content

Instantly share code, notes, and snippets.

@radjivF
Last active July 8, 2018 08:24
Show Gist options
  • Save radjivF/0231acd1845720fe6c43c9ee8af17079 to your computer and use it in GitHub Desktop.
Save radjivF/0231acd1845720fe6c43c9ee8af17079 to your computer and use it in GitHub Desktop.
accordion for shopify product page
{% comment %}
<!--
Liquid will output content, split on h3s like this:
<div class="accordion">
<h5><a href="#free-shipping" data-accordian-action>Free & Fast USA Shipping <span>+</span></a></h5>
<p id="free-shipping" data-accordian-target>All orders are shipped through USPS. We pride ourselves on fast delivery. Orders typically arrive within 2-5 business days. You will receive an email with tracking information when your order is ready to ship.</p>
<h5><a href="#international-shipping" data-accordian-action>International Shipping <span>+</span></a></h5>
<p id="international-shipping" data-accordian-target>International shipping rates vary based on item(s). Shipping rates can be seen on the checkout page. International orders typically arrive within 7-10 business days, but can vary with customs clearance in each country. </p>
</div>
-->
{% endcomment %}
<div class="accordion">
{% assign description_parts = product.description | split: '<h3>' %}
{% for part in description_parts %}
{% unless part == blank %}
{% assign part_parts = part | split: '</h3>' %}
{% assign heading_handle = part_parts.first | handle %}
<h5><a href="#{{ heading_handle }}" data-accordian-action>{{ part_parts.first }} <span>+</span></a></h5>
<p id="{{ heading_handle }}" data-accordian-target>{{ part_parts.last | remove: '<p>' | replace: '</p>','<br><br>' }}</p>
{% endunless %}
{% endfor %}
</div>
<script>
var lastClick;
var accordianActions = document.querySelectorAll('[data-accordian-action]');
var accordianTargets = document.querySelectorAll('[data-accordian-target]');
var hideTargets = function () {
for (var i = 0; i < accordianTargets.length; i++) {
var accordianTarget = accordianTargets[i];
accordianTarget.style.display = 'none';
}
};
var showTarget = function (targetSelector) {
var target = document.querySelector(targetSelector);
target.style.display = 'block';
};
hideTargets();
for (var i = 0; i < accordianActions.length; i++) {
var accordianAction = accordianActions[i];
accordianAction.addEventListener('click', function (e) {
e.preventDefault();
hideTargets();
if (lastClick !== e.currentTarget) {
showTarget(e.currentTarget.getAttribute('href'));
lastClick = e.currentTarget;
} else {
lastClick = null;
}
});
}
/* jQuery version of the above code.
$(document).on('click', '[data-accordian-action]', function (e) {
e.preventDefault();
$('[data-accordian-target]').hide();
if (lastClick !== e.currentTarget) {
$(e.currentTarget.getAttribute('href')).show();
lastClick = e.currentTarget;
} else {
lastClick = null;
}
});
*/
</script>
<style>
.accordian h5 {
padding-bottom: 5px;
border-bottom: 1px solid #f0f0f0;
}
.accordian h5 span {
float: right;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment