Show/Hide Products on Category page on button click

Question

I want to show/hide the Product listing on Category page on button click.

1. On my category page i am displaying one static block before products, this block contain one button.
2. My requirement is on click of that button i want to show/hide the Product listing which appears below, and not to be displayed by default See Screenshot https://prnt.sc/qtze4v

Can i get the block name that shows product listing?

Answer 1

you can use jquery for that

add an id on button (view details) like id="open_details", and on detail block add id like id="details" then add following script

<script>
  require(['jquery', 'jquery/ui'], function($){  
     $('#open_details').click(function () {
        $('#details').slideToggle();
     }
  });
</script>

also add css

#details{display:none}