24987

Jquery Mobile Collapsible Content [duplicate]

Question:

<blockquote>

<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>

Recommend

  • font-face not showing up on Firefox
  • working with Nested IF statement in excel
  • Use Greasemonkey to remove table
  • Omit template arguments when create an instance of template class from another instance of template
  • AngularJS error injector modulerr
  • Check if one value in one column is in another column
  • No error while instantiating abstract class, even though abstract method is not implemented
  • How can I have equal heights for inner elements of flexbox grid/boxes/cards without using jQuery?
  • Imports in __init__.py and `import as` statement
  • UICollectionView in UITableview - Get tag of tapped UICollectionView
  • python - calculate orthographic similarity between words of a list
  • Initialization section of the package
  • CS1703: In Xamarin.Droid, should I use the .Net Standard windowsruntime.dll located in Mono.Framewor
  • Layout design help Android
  • Custom WebViewPage inject code when razor template is rendering
  • jQuery - resize an elements height to match window without refreshing, on window resize
  • Aptana 3 remove bundle (jquery)
  • How do I retrieve the user information of a user authenticated with Apache's mod_ldap?
  • Uncaught TypeError: $(…).select2 is not a function
  • Center align outputs in ipython notebook
  • D3 get axis values on zoom event
  • Adjust width of select element according to selected option's width
  • Custom validator control occupying space even though display set to dynamic
  • JSON response opens as a file, but I can't access it with JavaScript
  • Bad request using file_get_contents for PUT request in PHP
  • Breeze - Deleted Items nav properties bug
  • Modifying destination and filename of gulp-svg-sprite
  • SSO with signing and signature validation doesn't work
  • Deserializing XML into class C#
  • jQuery tmpl and DataLink beta
  • How to disable jQuery.jplayer autoplay?
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Change div Background jquery
  • apache spark aggregate function using min value
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?