Woocommerceで商品の説明を隠す

Question

商品ページに商品説明を非表示にする必要があります。しかし、ユーザーが説明タブをクリックすると、私はコンテンツを表示する必要があります。ユーザーが再度クリックすると、その説明を非表示にする必要があります。それはtoogleのように動作する必要があります。

しかし、私はこれを完了できません。助けてください。ページの読み込みの説明を隠すために、私はsingle-product.phpに次のスクリプトを置きます。

$('.wc-tab').hide(); 

これは機能しています。ページの読み込み時には非表示になり、ユーザーがクリックすると自動的に表示されます（description_tab active）。

しかし、すべてのクリックを非表示にする必要があります。これは

<ul class="tabs wc-tabs"> 
          <li class="description_tab active"> 
        <a href="#tab-description">Description</a> 
       </li> 
</ul> 

ありがとうHTML構造である

助けてください。

Answer 1

説明を表示/非表示にするオブジェクトをクリックするとjQueryトグル機能が使用されます。

トグル機能は、現在非表示の場合は要素を表示し、現在表示されている場合は非表示にします。

$(".wc-tabs").hide(); //start by hiding element 
 
$("button").click(function() { 
 
    $(".wc-tabs").toggle(); //toggle between hidden/shown when you click the button 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Click Me!</button> 
 
<ul class="tabs wc-tabs"> 
 
          <li class="description_tab active"> 
 
        <a href="#tab-description">Description</a> 
 
       </li> 
 
</ul>