Adding tabs on product page + simple entry

[ahmetbaysa]

I'm not sure if this solution works for Warehouse Theme? 

[woodgradro]

Hello everyone and thank you so much for tutorial! 

Is there a way to make the tabs centered and not aligned to the left? I tried to change code for float: left to float: center, but it just stacks the tabs one above the other, and I don't want that. 

[ThomasGottchalk]

Hello everyone, 

is there any way to stop tabbed desciption on a page? 

Result I'd like to have:

-Text

-tabbed description

-text

Last text should be allways visible, not hidden in a tab. So, I'd like to cut after last tab. 

[daveken]

Do you by any chance have a Vanilla JS version of your script/gist?

[UA]

Hi there Tim, this snippet did not work with my Brooklyn Theme. I can't seem to find the "p" to replace with "h6"

Is it because my page fonts have been edited

<meta charset="utf-8">
<div data-mce-fragment="1">
<strong data-mce-fragment="1">Details:</strong><i data-mce-fragment="1"><br data-mce-fragment="1"></i>
</div>
<ul data-mce-fragment="1">
<li data-mce-fragment="1">
<strong data-mce-fragment="1"><em data-mce-fragment="1"></em>Hold: </strong>Medium to strong<br data-mce-fragment="1">
</li>
<li data-mce-fragment="1">
<b data-mce-fragment="1">Finish: <em data-mce-fragment="1"></em></b>Low shine natural wet look</li>
<li data-mce-fragment="1">
<em data-mce-fragment="1"><strong data-mce-fragment="1"></strong></em><strong data-mce-fragment="1">Style guide: <em data-mce-fragment="1"></em></strong>Outstanding performance across a diverse range of styles, classic and modern <strong>(Volumizing effect)</strong><br data-mce-fragment="1">
</li>
<li data-mce-fragment="1">
<strong data-mce-fragment="1">Hair type: </strong>Suitable for short or curly, normal to thick hair types, short to long in length<br data-mce-fragment="1">
</li>
<li data-mce-fragment="1">
<em data-mce-fragment="1"><strong data-mce-fragment="1"></strong></em><strong data-mce-fragment="1">Fragrance: </strong>Bergamot Citrus<br data-mce-fragment="1">
</li>
<li data-mce-fragment="1">
<em data-mce-fragment="1"><strong data-mce-fragment="1"></strong></em><strong data-mce-fragment="1">Size: </strong>100ml<br data-mce-fragment="1">
</li>
<li data-mce-fragment="1">
<strong data-mce-fragment="1"><em data-mce-fragment="1"></em>Base: </strong>Water based<br data-mce-fragment="1">
</li>
<li data-mce-fragment="1"><strong data-mce-fragment="1">Formulated in California</strong></li>
</ul>
<p data-mce-fragment="1"><strong data-mce-fragment="1">Description:</strong></p>

[Klforres]

Hi! I am having the same issue that you had originally where all of my info was still under one tab, and when I clicked an additional tab it would just bring the page down. How were you able to fix this? Where did you add the missing piece that you listed?

Thank you for your help.