带有切换动画的按钮单击

Question

I know this question has been asked before but I couldn't find the solution I needed.

I'm trying to make the ' product detail ' button on my website here a 'show more / show less' toggle button with a background linear fade. Currently, clicking the button animates to reveal the details as I want but the button disappears and you can't toggle back to close it again.

This is my JQuery Code:

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

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

What am I missing?? I've tried using.toggle() instead of animate - that didn't work.

Answer 1

I appreciate your question. You can do one things that firstly you change text of button
onclick rather hiding it:

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

Answer 2

Actually your button is hiding behind the "You might Also like" div if you see in inspect tools. you need make its position up through top: -100px or margin-top:-100px in #showBlock div