<strong>Possible Duplicate:</strong><br /><a href="https://stackoverflow.com/questions/4214538/dynamically-adding-collapsible-elements" rel="nofollow">Dynamically adding collapsible elements</a></blockquote>
I would like to use the Jquery mobile collapsible content i.e., Accordion functionality in one of my requirement. when I am trying to use the collapsible content set as mentioned below
<div data-role="collapsible" data-collapsed="false"> <h3>Section A</h3>
I'm the collapsible set content for section B.</div> <div data-role="collapsible"> <h3>Section B</h3>
I'm the collapsible set content for section B.</div>
and imported jquery.mobile-1.0b2.min.css,jquery-1.6.2.min.js,jquery.mobile-1.0b2.min.js
I just wanted to use the collapsing and expanding functionality of the accordion. But when I use the above content its changing the entire page layout by adding the css of jquery mobile which is not required for me.
Also I have few more links on the page which will redirect me to different pages but after including the jquery mobile CSS if I click on those links it opens the page below the existing page.
I would like to know is there any jquery mobile plugin such that I can use only the functionality of accordion and ignoring the other functionalities?Answer1:
You'll have to use some of the global configuration settings described <a href="http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/api/globalconfig.html" rel="nofollow">here</a>.
For example to avoid the autoinit, setting
autoInitializePage to false will prevent the auto initialization of the page. Settign the
ajaxEnabled setting to false might deal with your link problem, but I'm not sure about that.
To initialize your div correctly after preventing the default init formating, you'll have to use something like
$("a way to select your div").trigger('create'); as specified <a href="http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/pages/page-scripting.html" rel="nofollow">here</a>