Product Description Accordion - Brooklyn Theme

Bells2
New Member
2 0 0

Hi community,

I have tried every possible tutorial I could find but I could not get it to work. I am desperately looking for a solution to manually add an accordion description to Brooklyn theme product pages. I would like to add accordions for description, ingredients, nutritional information and additional information but this content needs to be unique per product. I really hope I can find a solution that is not an app. I have found tutorials using the h6 heading tag to separate the content into accordion tabs but those were for tabs and not accordions. 

Hope someone might have the answer! I have tried this code but it did not open anything on click. 

Thank you kindly

0 Likes
JHKCreate
Shopify Partner
2052 335 448

Hi @Bells2 

If you would like to create this without an app would you have to implement custom metafields & Liquid Code/logic to get this the way you want it. Let us know if you require assistance on that!

Start off with grasping the concept of accordions here: How To Create an Accordion (w3schools.com)

Cheers!

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
0 Likes
AudreyCov
New Member
3 0 0

Hi @Bells2 

I'm encountering the same issues. Did you manage to install this feature on Brooklyn?

 

Thanks

0 Likes
suyash1
Shopify Partner
2025 207 306

@AudreyCov - accordion can be added in product description, you can add is separately for each product, just need to take bit care while editing

you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly

My timezone is GMT+5:30
0 Likes
Bells2
New Member
2 0 0

Yes I did! I searched like crazy and then another keyword led me to this: How to make product description tabs in Shopify with out APP? - Stack Overflow The answer is at the bottom. I had some issues but I just had to make sure the javascript was working. 

0 Likes
suyash1
Shopify Partner
2025 207 306

@Bells2 - great, so everything is working now, if you face any issue you can contact me on email given below.

you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly

My timezone is GMT+5:30
0 Likes
AudreyCov
New Member
3 0 0

@Bells2 Thank you for the reply! 

I found something too, I merged several tutorials to having both simple text and then accordions. Here is the snippet I created, in case you need something from it :).

Accordions are used if there are h6 in the product description. I also added a "Shipping and Payment" tab with a page content. The content depends on the product type.

Now I just need to find out how to create a smooth animation...!

 

Best, 

Audrey

{% comment %}
if combine_pretext is false, the text before the first <H6> will be shown above all tabs, otherwise added to the first tab
{% endcomment %}
{% assign combine_pretext = false %}

{% assign description = tabbed-description | default: product.description %}
{% if description contains "<h6>" %}
	{% assign tab_heads = '' %}
	{% assign tab_texts = '' %}
	{% assign pretext = '' %}

{% assign chunks = description | strip | split: "<h6>" %}
	{% for c in chunks %}
		{% if c contains "</h6>" %}
			{% assign chunk = c | split: "</h6>" %}
			{% assign tab_heads = tab_heads | append: ",," | append: chunk.first %}
			{% assign tab_texts = tab_texts | append: ",," %}
			{% if pretext != blank  and combine_pretext %}
				{% assign tab_texts = tab_texts | append: pretext | append: "<br>" %}
				{% assign pretext = '' %}
			{% endif %}
			{% assign tab_texts = tab_texts | append: chunk.last  %}
		{% elsif forloop.first %}
			{% assign pretext =  c %}
         {% endif %}
	{% endfor %}

	{% assign tab_heads = tab_heads | remove_first: ",," | split: ",," %}
	{% assign tab_texts = tab_texts | remove_first: ",," | split: ",," %}

	{% assign index =  1  %}

<div class="product-single___lifestyle">
  {% if pretext != blank and combine_pretext == false %}
      {{ pretext }}
  {% endif %}
</div>

<div class="accordions">
  {% assign description_parts = product.description | split: '<h6>'%}
  {% for part in description_parts %}
      {% unless part == pretext %}
      {% assign part_parts = part | split: '</h6>' %}
      {% assign heading_handle = part_parts.first | handle %}
      <h6 class="accordion"><a href="#{{ heading_handle }}" class="link_accordion" data-accordion-action>{{ part_parts.first }} <span class="deploy">+</span></a></h6>
      <p id="{{ heading_handle }}" class="accordion" data-accordion-target>{{ part_parts.last | remove: '<p>' | replace: '</p>' }}</p>
    {% endunless %}
  {% endfor %}
  <h6 class="accordion"><a href="#shipping" class="link_accordion" data-accordion-action>{% if product.type != 'Surfboard' or product.type != 'Planche de surf' or product.type != 'test surf' %}{{ pages.livraison-et-paiement.title }}{% else %}{{ pages.livraison-et-paiement-surf.title }}{% endif %} <span class="deploy">+</span></a></h6>
      <div id="shipping" class="accordion" data-accordion-target>{% if product.type == 'Surfboard' or product.type == 'Planche de surf' or product.type == 'test surf' %}{{ pages.livraison-et-paiement-surf.content }}{% else %}{{ pages.livraison-et-paiement.content }}{% endif %}</div>
</div>
{% else %}
	{{ product.description }}
{% endif %}

 

0 Likes