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?

1 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

  require(['jquery', 'jquery/ui'], function($){  
     $('#open_details').click(function () {

also add css

  • What is the name of the block? How to add id in block?
    – Nafsss
    Jan 28, 2020 at 13:33
  • Here @waqar give you sample example, but you can own CSS ( ID or CLASS ) to section and change accordingly in above script Jan 28, 2020 at 16:12
  • @ManishBhojwani the below section comes from different file. Is the logic above possible ?? if i write the script in one file to hide the div in another file?
    – Nafsss
    Jan 29, 2020 at 4:49
  • i am not sure about your theme structure but it can be done by making changes in app/design/frontend/Magento/yourtheme/Magento_Catalog/templates/category/products.phtml, file.
    – Waqar
    Jan 29, 2020 at 11:34
  • @Nafisa Yes, you can add the script in one file. No problem if div tag is in another file. Jan 29, 2020 at 16:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.