Woocommerce скрыть описание продукта при загрузке

Question

Мне нужно скрыть описание продукта на странице продукта. Но когда пользователь нажимает на вкладку описания, мне нужно показать содержимое. Когда пользователь снова нажимает, мне нужно скрыть описание. Он должен работать как Google.

Но я не могу это завершить. Пожалуйста помоги. Чтобы скрыть описание на загрузке страницы, я размещаю следующий сценарий на single-product.php

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

Он работает. При загрузке страницы она скрыта, и пользователь щелкает ее автоматически (description_tab active).

Но мне нужно показать скрыть каждый клик. Пожалуйста, помогите

Это HTML структура

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

Спасибо.

Answer 1

Используйте функцию jQuery toggle, когда вы нажимаете объект, который должен показывать/скрывать описание.

Функция переключения отображает элемент, если он скрыт в данный момент, или скрыть элемент, если он отображается в настоящее время.

$(".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>