JQuery Mobile in Hindi Collapsible

First Page
Next Page

jQuery Mobile में Collapsible का उपयोग Openable Content Block बनाने के लिए किया जा सकता है.

Collapsible एक Heading के साथ Content के Block होते हैं जो की Close करने के लिए Toggled किया जा सकता है जिससे केवल Header का भाग दिखाई देता है.

यह Information को Store करने में भी बहुत उपयोगी होता है.

Collapsibles Content की एक Compact Presentation को Provide करता है.

Collapsibles Starting में <div> Container में Attribute data-role="collapsible" को Define करता है.

For Example

<div data-role="collapsible">
  <h1>Home</h1>
  <p>Welcome to Tutorialsroot jQuery Mobile</p>
</div>

Nested Collapsible Blocks

एक Collapsible Block को एक Collapsible Block में अंदर Put कर दिया जा सकता है जिसको “Nested Collapsible Blocks कहते है और इन Blocks को कई बार Nasted किया जा सकता है.

For Example

<div data-role="collapsible" data-collapsed="false">
   <h1>Home</h1>
   <p>Welcome to Tutorialsroot jQuery Mobile(Home)</p>
   <div data-role="collapsible">
      <h1>Info</h1>
      <p>Welcome to Tutorialsroot jQuery Mobile(Info)</p>
   </div>
</div>

Collapsible Sets

Collapsible Blocks को एक साथ Classified किया जाता है जिसको Aprodian के रूप में Referenced किया जाता है फिर इसको “Collapsible Set” कहा जाता है.

अगर आप नया Block को Open करते हो तो अन्य सभी Block Close हैं तो Starting में दो या अधिक Collapsible Content Blocks को बनाया जाता है और उसके बाद एक नए Container को Rugged Block के चारों ओर data-role="collapsibleset के साथ Wrap करते है.

For Example

<div data-role="collapsibleset">
    <div data-role="collapsible">
        <h1>Home</h1>
        <p>Welcome to Tutorialsroot jQuery Mobile(Home)</p>
    </div>
    <div data-role="collapsible">
        <h1>Info</h1>
        <p>Welcome to Tutorialsroot jQuery Mobile(Info)</p>
    </div>
</div>

Collapsible Example

<!DOCTYPE html> 
<html>
   <head>
      <meta charset="UTF-8">
      <title>Collapsible</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1" />
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
      <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
   </head> 
   <body> 
	
      <h3>Collapsible<h3>
      <div data-role="collapsible" data-collapsed="false">
         <h1>Home</h1>
         <p>Welcome to Tutorialsroot jQuery Mobile(Home)</p>
      </div>

      <h3>Nested Collapsible<h3>

      <div data-role="collapsible" data-collapsed="false">
         <h1>Home</h1>
         <p>Welcome to Tutorialsroot jQuery Mobile(Home)</p>

         <div data-role="collapsible">
            <h1>Info</h1>
            <p>Welcome to Tutorialsroot jQuery Mobile(Info)</p>
         </div>
      </div>

      <h3>Collapsible Set<h3>

      <div data-role="collapsibleset">
         <div data-role="collapsible">
            <h1>Home</h1>
            <p>Welcome to Tutorialsroot jQuery Mobile(Home)</p>
         </div>

         <div data-role="collapsible">
            <h1>Info</h1>
            <p>Welcome to Tutorialsroot jQuery Mobile(Info)</p>
         </div>
      </div>

   </body>
</html>

Output

First Page
Next Page