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 create a Basic collapsibles using jQuery Mobile
Overview
The jQuery mobile provides the enhanced version of the simple jQuery, as the jQuery mobile provides responsive content and designs for all types of screens. So before starting to build the collapsible we should know about the feature. A collapsible is a web component which statically shows the heading or main content of the data and on clicking the heading it expands and shows the whole information about the heading. We can also build the collapsible using normal jQuery but it will not provide the responsive design and layout.
jQuery Mobile Content Delivery Network (CDN) Links
Before starting to build the layout of your web page you should add the given below link to the HTML document.
<link rel="stylesheet" href="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css"> <script src="//code.jquery.com/jquery-3.2.1.min.js"> <script src="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js">
Algorithm
Step 1 − Create a HTML file in your text editor with a HTML boilerplate in it.
Step 2 − Now link the above given CDN link to the head tag of the HTML document and add the script tag to the end of the body tag.
Step 3 − Now create a parent div container with the role attribute to it and give the value as “main”.
<div class="ui-content" role="main"></div>
Step 4 − Now create another child div container which would be the collapsible container and add the attribute data-role to it with the value of “collapsible”.
<div data-role="collapsible"></div>
Step 5 − Now create a heading tag to the collapsible div container and add the text to it.
<h5>Collaspsibles Text 1</h5>
Step 6 − Now create a p tag and add the information inside the p tag related to the heading.
<p> repellendus eos cumque commodi praesentium! Quas maxime eligendi architecto recusandae perferendis, esse facere? Libero tempore quidem architecto, magni excepturi beatae veniam quos tempora, deleniti quod doloremque nisi possimus eius? Optio, dolor ad enim tempora quis voluptatem inventore? </p>
Step 7 − If you want to add more collapsible then repeat steps 4, 5 and 6.
Step 8 − The collapsible is created successfully.
Example
In this example we have created a collapsible feature using the jQuery data-role attribute as collapsible. So to learn about the collapsible we have created two collapsibles using the jQuery mobile.
<html>
<head>
<title>Collaspsibles in jQuery mobile</title>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
</head>
<body>
<div class="ui-content" role="main">
<h3 style="text-align: center; color: green;">tutorialspoint.com</h3>
<div data-role="collapsible">
<h5>Collaspsibles Text 1</h5>
<p> Alias reiciendis quisquam quo voluptate, Alias reiciendis quisquam quo voluptate,Alias reiciendis quisquam quo voluptate, Alias reiciendis quisquam quo voluptate,repellendus eos cumque commodi praesentium! Quas maxime eligendi architecto recusandae perferendis, essefacere? Libero tempore quidem architecto, magni excepturi beatae veniam quos tempora, deleniti quod doloremque nisi possimus eius? Optio, dolor ad enim tempora quis voluptatem inventore? </p>
</div>
<div data-role="collapsible">
<h5>Collaspsibles Text 2</h5>
<p>
repellendus eos cumque commodi praesentium! Quas maxime eligendi. Alias reiciendis quisquam quo voluptate,
repellendus eos cumque commodi praesentium! Quas maxime eligendi architecto recusandae perferendis, esse
facere? Libero tempore quidem architecto, magni excepturi beatae veniam quos tempora, deleniti quod
doloremque nisi possimus eius? Optio, dolor ad enim tempora quis voluptatem inventore?
</p>
</div>
</div>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
</body>
</html>
The given below image shows the output of the above example, as we can see the image shows the two collapsibles with the headings Collapsible text 1 and Collapsible text 2. So when the user clicks on the first text it expands and shows the content about the related heading and same with the second heading.
Conclusion
As in the above examples we have used the data-role value as collapsible, so that particular container must contain a heading tag as h1, h2, h3, h4 or h5 to make a heading at the top of the container to be a clickable text. The important thing that should be noticed while building this component is that a data-role attribute should be added to the container to whom we had to give the property of collapsible.
88 Views
