Нажатие кнопки с Toggle Animate

Question

Я знаю, что этот вопрос задавался ранее, но не смог найти нужное решение.

Я пытаюсь сделать кнопку " Информация о продукте " на моем веб-сайте здесь a кнопка переключения «показать больше / показать меньше» с линейным затуханием фона. В настоящее время, нажимая кнопку анимирует , чтобы раскрыть детали, как я хочу, но кнопка исчезает, и вы не можете переключиться обратно, чтобы закрыть ее снова.

Это мой JQuery Код:

jQuery(document).ready(function( $ ){
  $('#hiddenBlock').animate({height: '150px'});

  $('#showBlock').click(function(e) {
      e.preventDefault();
  $('#hiddenBlock').animate({height: '100%'}, "slow");
    });
    });

Чего мне не хватает ?? Я попытался использовать .toggle () вместо animate - это не сработало.

Answer 1

На самом деле ваша кнопка прячется за div "Вам также может понравиться", если вы видите в инструментах проверки. вам нужно сделать его позицию через top: -100px или margin-top: -100px в #showBlock div

Answer 2

Я все еще не могу понять это правильно. Это то, что у меня сейчас ...

jQuery (документ) .ready (function ($) {

 $('#hiddenBlock').animate({height: '200px'});

$("#showBlock").click(function(ev){
        ev.preventDefault();
        $("#hiddenBlock").animate({height: '100%'});
    });
    $("#showBlock").click(function(ev){
        ev.preventDefault();
          $("#hiddenBlock").animate({height:'200px'});
    });
});

Answer 3

Я ценю ваш вопрос. Вы можете сделать одну вещь, что сначала вы измените текст кнопки
onclick, а не скрывая ее:

$("button").on('click', function(){ 
  $(this).toggleClass("see-more"); 
});
$(".see-more").text("See Less");