Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to make Basic accordion using jQuery Mobile?
An efficient and well-organized way to show information is through the use of accordions. This pattern is particularly helpful for mobile devices when space is at a premium and users frequently seek out quick and simple access to the data they require. A popular framework called jQuery Mobile offers a selection of tools and widgets for developing web apps that are mobile-friendly. The Collapsible Set widget, one of the built-in widgets in jQuery Mobile, offers a simple way to build an accordion. This post will examine two methods—using the Collapsible Set widget and custom code—for building a simple accordion with jQuery Mobile.
Accordion in JQuery
In jQuery Mobile, an accordion is made by combining several separate collapsible elements into a set.
data-role="collapsible-set" attribute
Similar to individual collapsibles, which begin with a heading and then the collapsible content, collapsible sets begin with the same markup. The collapsibles will be visually organized and operate like an accordion, allowing just one portion to be open at a time, if a parent wrapper with a data-role="collapsible-set" attribute is added to them.
By simply integrating the jQuery UI library and invoking an accordion in the JavaScript section where it is attached to an element like a div, paragraph, or another one that will serve that purpose, the jQuery plugin makes it easy to create accordions.
In this article, We will go through two approaches with the jQuery UI accordion plugin.
Approaches
To make basic accordion using jQuery Mobile we can follow the two methods −
Utilizing the built-in accordion widget.
Utilizing accordion widget with collapsible data-role and attribute icon position
Let us look into both the approaches −
Approach 1: Utilizing the built-in accordion widget
An easy way to make an accordion is provided by the built-in Collapsible Set widget in jQuery Mobile. Users can smoothly animate expanding as well as contracting different content portions.
Algorithm
To make an accordion utilizing the Collapsible Set widget, follow these steps −
Step 1 − Add all jQuery scripts to execute code with jQuery.
Step 2 − Set collapsible for each section with data-role.
Step 3 − Use heading tags and span tags for each section of content.
Step 4 − Add styles as internal css for span tags to enhance the appearance.
Example
<!DOCTYPE html>
<html>
<head>
<style>
span {
color: red;
font-size: 160%;
}
</style>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
<!--Add some scripts and links-->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!--Include collapsible as data-role for each part-->
<div class="content" data-role="collapsible">
<!--Include first part-->
<h2 class="c">Part A</h2>
<span>Statements in Part A.</span>
</div>
<div data-role="collapsible">
<h2>Part B</h2>
<span>Statements in Part B.</span>
</div>
<div data-role="collapsible">
<h2>Part C</h2>
<span>Statements in Part C.</span>
</div>
</body>
</html>
Approach 2
Utilizing accordion widget with collapsible as data-role and attribute icon position.
Using the data-iconpos attribute, either on the collapsible-set level or on any of its collapsibles individually, it is possible to override the default icon positioning of collapsible headings.
Step 1 − Add all jQuery scripts to execute code with jQuery.
Step 2 − Set collapsible-set for each section with data-role.
Step 3 − Use attribute data-iconpos for positioning of the headings of collapsible headings.
Step 4 − Using heading tags as well as span tags for each section of content. The <span> contains content that can be seen when expanded the heading tag.
Step 5 − Add styles as internal css for span tags to enhance the appearance of the text and page.
Example
<!DOCTYPE html>
<html>
<head>
<style>
span {
color: red;
font-size: 160%;
}
</style>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
<!--Add some scripts and links-->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!--Include collapsible as data-role for each part-->
<div class="content" data-role="collapsible" data-iconpos="top">
<!--Include first part-->
<h2 class="c">Part A</h2>
<span>Statements in Part A.</span>
</div>
<div data-role="collapsible" data-iconpos="right">
<h2>Part B</h2>
<span>Statements in Part B.</span>
</div>
<div data-role="collapsible" data-iconpos="bottom">
<h2>Part C</h2>
<span>Statements in Part C.</span>
</div>
</body>
</html>
Conclusion
Particularly on mobile devices, accordions are a practical user interface pattern for displaying information in a condensed as well as structured manner. With the help of built-in widgets from jQuery Mobile, such as the Collapsible Set widget, accordions might well be easily made quickly. Accordions can also be made utilizing jQuery UI's accordion method. Both approaches set collapsible sections with data-role and specify the various sections using headings as well as span tags. CSS styles can be used to alter the accordion's appearance.
38 Views
