Search code examples
jquerymagento

Magento: Link to product tabs


Most of our products have tabs on their pages (Description, Videos, Downloads, etc)

I'm wanting to be able to create a link on our category page that links to the product page with appropriate tab opened using it's anchor. Something like http://www.example.com/product.html#tab-downloads

Using that type of url will go to the product page and scroll to the tab section but it doesn't have the linked tab opened.

I'm using the Ultimo theme for Magento

I'm sure there's some js that needs to be included on the page, but I'm not exactly sure where to begin. Any help would be great!


Solution

  • Not really Magento related question, but more JS and is about Jumping in page to hash location and opening a tab/click an element.

    For the given live example, using jQuery you can use this:

    <script type="text/javascript">
    $( document ).ready(function() {
         var hash = window.location.hash;
         jQuery(hash).children().click();
    
        });
    </script>
    

    You can test this code on your live example, by loading your live example url and running the two lines inside document.ready in the Inspect Element Console.

    children() is there in this case because you have to click() the anchor inside the li element that has the #id. Adjust as required for your actual webpage DOM structure.