unique tabs in Block shop theme

[Kpalombo]

I'm trying to add a unique tabs dropdown section on the blockshop theme to add "key ingredients" to a skincare site. Each tab will have different information. I'm using the following code but it doesn't seem to be working. Any help would be great! 

/** Unique tabs using H6 as an anchor **/
document.addEventListener("DOMContentLoaded", function(event) {
$($('.product-single__content-text').find('h6').get().reverse()).each(function(i) {
var tabName = $(this).text();
tabContent = '';
//check if h6 has text inside
if ($(this).text() != '') {
//hide h6
$(this).hide();
//combine content between H6 elements
$(this).nextUntil('h6').each(function() {
tabContent = tabContent + this.outerHTML;
//hide content
$(this).hide();
});
//generate tab HTML
$('.js-accordion').prepend('<div id="acc-unique-'+ [i] +'" class="product-single__accordion__item js-unique-info" style="display:none;"><div class="product-single__accordion__item-wrap rte">' + tabContent + '</div></div>');
$('.js-accordion').prepend('<a href="#acc-unique-'+ [i] +'" class="product-single__accordion__title js-unique-trigger"><h4 class="product-single__accordion__title-text">' + tabName + '</h4><span class="product-single__accordion__title-icon icon-fallback"><i class="icon icon--plus" aria-hidden="true"></i><span class="icon-fallback__text">Open tab</span></span></a>');
} else {
//hide empty H6
$(this).hide();
}
});
$(".js-unique-trigger").click(function() {
var thisItem = $(this).attr("href");
var activeClass = "js-active";
//check if clicked is active
if ($(thisItem).hasClass(activeClass)) {
//close current item
$(this).removeClass(activeClass);
$(thisItem)
.removeClass(activeClass)
.stop()
.slideUp();
} else {
//open and activate this item
$(thisItem)
.addClass(activeClass)
.stop()
.slideDown();
$(this).addClass(activeClass);
}
return false;
});
});

I want it to look something like this: 

[UmairA]

Hey there @Kpalombo,

May I know from where did you get this code? Also, this code is using JQuery so make sure that your theme has JQuery files loaded either from self-hosted or from JQuery CDN.

[Kpalombo]

it is from this link: 

https://support.safeasmilk.co/article/49-product-page-set-up-unique-tabs-in-your-product-description...

Am I able to add in JQuery or should I use different code ?

Thank you! 

[Jacob_Killian]

Yes - you can use the jQuery in the sample code in that link.

/** Unique tabs using H6 as an anchor **/
document.addEventListener("DOMContentLoaded", function(event) { 
  $($('.product-single__content-text').find('h6').get().reverse()).each(function(i) {
      var tabName = $(this).text();
      tabContent = '';
      //check if h6 has text inside
    if ($(this).text() != '') {
          //hide h6
        $(this).hide();
          //combine content between H6 elements
          $(this).nextUntil('h6').each(function() {
              tabContent = tabContent + this.outerHTML;
              //hide content
              $(this).hide();
          });
          //generate tab HTML
          $('.js-accordion').prepend('<div id="acc-unique-'+ [i] +'" class="product-single__accordion__item js-unique-info" style="display:none;"><div class="product-single__accordion__item-wrap rte">' + tabContent + '</div></div>');
          $('.js-accordion').prepend('<a href="#acc-unique-'+ [i] +'" class="product-single__accordion__title js-unique-trigger"><h4 class="product-single__accordion__title-text">' + tabName + '</h4><span class="product-single__accordion__title-icon icon-fallback"><i class="icon icon--plus" aria-hidden="true"></i><span class="icon-fallback__text">Open tab</span></span></a>');
      } else {  
          //hide empty H6
          $(this).hide();
      }
  });

[Jacob_Killian]

Note - I haven't read that code in the link, and have no idea if the walk-through is a good idea or not yet.

[Ninthony]

A way that you can store unique information like that is with product metafields. Think of them as little folders attached to your products that store information that work like key value pairs. You'll want to install a metafield app like Metafields Guru <-- This is the one I use. It's free so don't let the pricing things trip you up, that's just for additional functionality. After installed you can go to your product and click the More Actions dropdown in the admin and you'll see the Metafields Guru app logo come up with an option to edit the metafields.

There may already be metafields created from some other apps you've installed, but dont worry about it. Just click the Create Metafield button at the top right. A new little space will popup, and you'll see a folder icon and it'll say "global". That's the name of your metafield. You can change that to whatever you want. Say you wanted to list ingredients under the product, you could rename "global" to "product_info" , and then in the text area next to the key you could type "ingredients". So "product_info" is your folder name, "ingredients" is your key, and the text area below that is where you put your information. It's a string object type by default so you can just type whatever in there. Then in your product-template.liquid, you would check to see if that metafield exists with an if statement, and if it does you could output a tab like that in your html. Here's some simple code on how that would work:

CodePen

Given the same kind of idea, you'd do this in product template while checking for your metafields like this:

<style>
.tab-container {
  width: 400px;
  font-family: sans-serif;
  border: 1px solid black;
}
.tab {
  padding: 10px 10px 10px 10px;
  border-bottom: 1px solid black;
  display: flex;
  justify-content: space-between; 
  user-select: none;
}
.tab:hover {
  cursor: pointer;
}
.tab-info {
  padding: 20px;
  border: 1px solid black;
  display: none;
}
.active {
 display: block; 
}
</style>
{% if product.metafields.product_info.ingredients %}
<div class="tab-container">
  <div class="tab">
    <div class="">Ingredients</div>
    <div class="">+</div>
  </div>
  <div class="tab-info">
    {{ product.metafields.product_info.ingredients }}
  </div>
</div>
<script>
let tabs = document.querySelectorAll('.tab');

for(var i=0; i < tabs.length; i++){
  tabs[i].addEventListener('click', showHide);
}

function showHide(){
  let tab_info = this.nextElementSibling;
  if(tab_info.classList.contains('active')){
     tab_info.classList.remove('active');
     }else {
       tab_info.classList.add('active');
     }
}
</script>
{% endif %}

[Jacob_Killian]

I've also seen people use navigation as linked lists for custom data storage.

[Ninthony]

Yeah link lists are good for storing smaller amounts of data, and definitely a little less complicated. I would use them for shorter lists and links, but not for larger descriptive information. In this situation I think metafields are more suitable as you can tie them directly to products with the same namespace and key across the board, but store dynamic information associated only with that specific product instead of making checks to see what product you're on and if you're on that product output the info from a particular linklist.

[Jacob_Killian]

So much to learn.  Apps definitely can help cut down on the learning curve.

[Ninthony]

Yeah there's a lot and it takes a lot of time. Spending time on here trying to figure out other people's problems for them is a great way to start accumulating that knowledge. Feel free to send me a message if you need help with anything, I'm generally on here Mon - Fri checking pretty regularly.