I recently started using jquery widgets in magento and come to know that magento extends jquery-ui widgets through the use of widget factory and customises them according to need and then again return them.

So far according to theory all looks good but as soon as I started using them, I found little timing issue in collapsible widget.

I am trying to use collapsible widget of magento inside one of my cms-block through data-mage-init. Here is how my structure looks.

<div class="top-header-link" data-mage-init='{"collapsible":{"animate": {"duration": 500, "easing": "easeOutCubic" }}}'>
    <div class="trigger-top" data-role="title">Trigger element</div>
    <div class="top-menu" data-role="content">
        This is the element that should be collapsed and expanded.

Now when I cleared the cache and then reload the frontend, I noticed the element with attribute data-role="content" remains open by default and hides after whole page completes loading which is not very good user experience at all.

Now my question is how to solve this timing issue despite using magento jquery widget with proper way?

Should we use our custom jquery despite having collapsible widget?

Thanks in advance.

Your Answer

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

Browse other questions tagged or ask your own question.