Woocommerce在加载时隐藏产品描述

I need to hide the product description in the product page. But when the user clicks on the description tab I need to show the content. When the user clicks again, I need to hide the description. It needs to work like toogle.

我需要在产品页面中隐藏产品说明。但是当用户点击描述选项卡时,我需要显示内容。当用户再次点击时,我需要隐藏描述。它需要像toogle一样工作。

But I can not complete this. Please help. For to hide description on page load I place the following script on single-product.php

但我无法完成这一点。请帮忙。为了隐藏页面加载的描述,我将以下脚本放在single-product.php上

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

It is working. When page load it is hidden and user clicks it is show (description_tab active) automatically.

这是工作。页面加载时,它被隐藏,用户点击它会自动显示(description_tab激活)。

But I need to show hide every click. Please help

但我需要隐藏每一次点击。请帮忙

This is HTML structure

这是HTML结构

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

Thank you .

谢谢。

1 个解决方案

#1

Use the jQuery toggle function when you click the object that should show/hide the description.

单击应显示/隐藏描述的对象时,请使用jQuery切换功能。

The toggle function will show the element if it is currently hidden, or hide the element if it is currently shown.

切换功能将显示当前隐藏的元素,或隐藏当前显示的元素。

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

#1