In the NetSuite when we give the Product information from the tab data for an item it will be displayed in the website for the particular item.
The Product information will be displayed here under the product details section.
When we click on the “+” button the Product information will be expendable and show the details information.
When we click on the “– “button the Product information will be closing the expendable box of the detail’s information.
<div id="myaccordion">
<div class="product-details-full-tab-pane" id="producer">
<input type="checkbox" id="accordion1" class="hidecontent" />
<label for="accordion1">Producer</label>
<div class="content hidecontent">{{{producer}}}
</div>
</div>
<div class="product-details-full-tab-pane" id="storage">
<input type="checkbox" id="accordion2" class="hidecontent" />
<label for="accordion2">Storage</label>
<div class="content hidecontent">
{{{storage}}}
</div>
</div>
<div class="product-details-full-tab-pane" id="transfers">
<input type="checkbox" id="accordion3" class="hidecontent" />
<label for="accordion2">Transfers</label>
<div class="content hidecontent">
{{{transfers}}}
</div>
</div>
<div class="product-details-full-tab-pane" id="delivery">
<input type="checkbox" id="accordion4" class="hidecontent" />
<label for="accordion2">Delivery</label>
<div class="content hidecontent">
{{{delivery}}}
</div>
</div>
</div>
</div>
</div>
<script>
var acc = document.getElementsByClassName("content hidecontent");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>