0

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?

0

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}
| improve this answer | |
  • What is the name of the block? How to add id in block? – Steven Harris Jan 28 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 – Manish Bhojwani Jan 28 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? – Steven Harris Jan 29 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 at 11:34
  • @Nafisa Yes, you can add the script in one file. No problem if div tag is in another file. – Manish Bhojwani Jan 29 at 16:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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