html collapse hide show using jquery code example

Example 1: jquery toggle show hide

$( "#clickme" ).click(function() {
  $( "#book" ).toggle( "slow", function() {
    // Animation complete.
  });
});

Example 2: on button click show collapse div jquery

#wrapper {
  background: #ccc;
  overflow: hidden;
  transition: max-height 300ms;
  max-height: 0; /* <---hide by default */
}
#wrapper.open {
  max-height: 100px; /* <---when open, allow content to expand to take up as much height as it needs, up to e.g. 100px */
}