Jquery Mobile Collapsible Content [duplicate]

This question already has answers here: Closed 10 years ago.

Possible Duplicate:

Dynamically adding collapsible elements

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>
<p>I'm the collapsible set content for section B.</p>
</div>

<div data-role="collapsible">
<h3>Section B</h3>
<p>I'm the collapsible set content for section B.</p>
</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 wo开发者_JAVA技巧uld like to know is there any jquery mobile plugin such that I can use only the functionality of accordion and ignoring the other functionalities?

---

You'll have to use some of the global configuration settings described here.

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 here