Magento-1.9 Magento-1 Jquery – How to Add Jquery in Magento

If you are adding your custom js library other than jQuery then you need to include the js code inside require function like:

 require(['jquery', 'jquery/ui'], function($){ 
     //your js code here  
 });

Examples:

Inside the require function, you can directly access jQuery functionality in place by using either jQuery or its short form alias, the dollar $ sign. For example:

require(['jquery', 'jquery/ui'], function($){
  jQuery(document).ready( function() {
    alert("Page loaded.");
  });
});

Here is an example with the $ alias:

require(['jquery', 'jquery/ui'], function($){
  $(document).ready( function() {
    alert("Page loaded.");
  });
});

working solution:

<div data-bind="visible: canVisibleBlock, mageInit: {'accordion':{'openedState': 'active', 'collapsible': true, 'active': [1,4], 'multipleCollapsible': true}} ">
    <div data-role="collapsible"  >
        <div data-role="title">Show hidden</div>
        <div data-role="content">
            The Magento collapsible widget converts a header/content pair into an accordion, where the content is collapsed or expanded on the header click.
            Unlike the accordion widget is that collapsible is initialized for one title/content pair, while accordion can be initialized for a set of title/contents pairs.
        </div>
    </div>
    <div data-role="collapsible"  >
        <div data-role="title">Show hidden</div>
        <div data-role="content">
            The Magento collapsible widget converts a header/content pair into an accordion, where the content is collapsed or expanded on the header click.
            Unlike the accordion widget is that collapsible is initialized for one title/content pair, while accordion can be initialized for a set of title/contents pairs.
        </div>
    </div>
</div>
<br/>

PS: I don't know exactly what mageInit does and have not found anything about it when i searched. Probably it is data-mage-init.