Показать больше / показать меньше Переключить на раздел в Elemenor

Question

Я пытаюсь добиться функции показать больше / показать меньше на странице моего продукта, созданной с помощью Elementor Page Builder. Вроде как это также с затуханием, но с использованием JS.

У меня сейчас есть эта настройка на моей странице моего продукта . Это не совсем то, что я хочу, так как раздел полностью скрыт, а затем открывается по щелчку.

Я добился этого, выполнив следующее:

• 1no. Раздел с 1 колонкой.
• В пределах этого 2no. «виджеты внутреннего раздела».
• Вверху «виджет внутреннего раздела» содержит виджет описания продукта. «Внутреннему разделу» этого был присвоен CSS идентификатор «hiddenBlock»

Затем я добавил к этому следующий пользовательский CSS:

    #hiddenBlock {
Display:none;
}

• В нижнем виджете «внутренний раздел» находится «виджет кнопки». Виджету бюджета присвоен CSS идентификатор 'showBlock'

Затем я добавил несколько пользовательских JS, используя другой плагин следующим образом:

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

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

Однако Как бы я go о достижении того, что я упомянул, где раздел может быть частично просмотрен, а затем полностью открыт при нажатии. В идеале мне бы хотелось, чтобы текст кнопки также менялся при нажатии, например, «показать меньше» или что-то в этом роде.

Заранее спасибо.

Answer 1

Можете ли вы использовать .toggle ()

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