Question

我正在尝试使用Elementor Page Builder构建的产品页面上实现显示更多/显示更少的功能。有点像this，但也带有淡入淡出，但使用JS。

我目前在My Product Page上有此设置。这不是我想要的，因为该部分已完全隐藏，然后在单击时显示。

我已通过以下操作实现了这一目标：

1否。带有1列的部分。
在此范围内2no。 “内部小部件”。
顶部“内部”包含一个产品描述小部件。内在部分的CSS ID为“ hiddenBlock”

然后我在此添加了以下自定义CSS：

    #hiddenBlock {
Display:none;
}

底部的“内部”小部件包含“按钮小部件”。的预算小部件的CSS ID为“ showBlock”

然后，我使用另一个插件添加了一些自定义JS，如下所示：

jQuery(document).ready(function( $ ){

   $('#showBlock').click(function(e) {
      e.preventDefault();
   $('#hiddenBlock').fadeToggle("slow");
 });
});

但是，我将如何实现我提到的内容，从而可以部分查看该部分，然后在单击时完全显示出来。理想情况下，我希望按钮文本在单击时也能更改，例如“显示较少”或其他内容。

谢谢。

Answer 1

可以使用 .toggle（）

jQuery(document).ready(function( $ ){
   $('#showBlock').click(function(e) {
       $('#hiddenBlock').toggle();
       e.preventDefault();
   });
});

在Elemenor中的某个部分上显示更多/更少显示

1 个答案: