Product page tab - content of tab is not displayed correctly

Product page tab - content of tab is not displayed correctly

Real_Power_JP
Tourist
11 0 2

Hi, I created tabs on the product page using HTML at the back end of "product".

The button for "Dog Food Formula Comparison" (ドックフードフォーミュラ比較) is displaying correctly, but the content of the tab is not showing. Can you please help me?

The HTML script I created:

 

Button:

<button class="tablinks" id="defaultOpen" onclick="openCity(event, 'ドックフードフォーミュラ比較')"><strong>ドックフードフォーミュラ比較</strong></button>


Content of the tab:

<div class="tabcontent" id="ドックフードフォーミュラ比較">REAL POWERの選び方が分からない? <br>フォーミュラの比較を見てみましょう!<br> <br> <span style="font-size: 18px;">ペットの“主な問題”に合わせて選びましょう!<br>愛犬の状態に合わせて最適なReal Nature Recipeのフォーミュラを選択します。</span><br><img src="https://cdn.shopify.com/s/files/1/0751/1988/6621/files/230822-Compare-dog-JP.jpg?v=1692690012" alt="ドックフードフォーミュラ比較" style="display: block; margin-left: auto; margin-right: auto;"></div>

The content of the tab should be showed like this:

Real_Power_JP_0-1704775658372.png

But the page is displayed like this currently:

Real_Power_JP_0-1704780800646.png

There is nothing showed under the tab of "Dog Food Formula Comparison (ドックフードフォーミュラ比較)"...

 

Replies 2 (2)

SomeUsernameHe
Shopify Partner
495 55 100

Is there a way I could see what it looks like now on the site? 

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee
Real_Power_JP
Tourist
11 0 2

It looks like this. There is nothing displayed under the tab of "Dog Food Formula Comparison (ドックフードフォーミュラ比較)".

Real_Power_JP_0-1704780899983.png

There are contents displayed under other tabs and I am using the same script.

Real_Power_JP_1-1704780972187.png