Product Description Accordion - Brooklyn Theme

[Bells2]

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

[JHKCreate]

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!

[AudreyCov]

Hi @Bells2 

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

Thanks

[suyash1]

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

[Bells2]

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. 

[suyash1]

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

[AudreyCov]

@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 %}

[DunkAgain]

@AudreyCov Thanks for sharing! Could you please specify where do you use this snippet? As product-tabs.liquid?

Are the remaining steps specified in the stack-overflow page that Bells2 shared still valid in this case?