Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<link href="https://code.jquery.com/mobile/git/jquery.mobile-git.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/mobile/git/jquery.mobile-git.js"></script>
​
​
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width"> 
  <title>JS Bin</title>
</head>
<body>
  
  <div data-role="page" class="jqm-demos">
​
​
    <div role="main" class="ui-content jqm-content">
  
  <div data-demo-html="true" data-demo-js="true">
            <button type="button" data-icon="gear" data-iconpos="right" data-mini="true" data-inline="true" id="add">Add</button>
    <div data-role="collapsibleset" data-content-theme="a" data-iconpos="right" id="set">
                <div data-role="collapsible" id="set1" data-collapsed="false">
                    <h3>Section 1</h3>
                    <p>I'm the collapsible content.</p>
                    <button id="removeStyle1" data-role="button" data-mini="true" data-theme="b" class="removeStyleBtn">Remove</button>
                </div>
            </div>
​
        </div></div>
​
        </div>
​
</body>
</html>
 
​
console.log("DOM Load");
$( document ).on( "pagecreate", function() {
    var nextId = 1;
    $("#add").click(function() {
    nextId++;
      var content = "";
    content += "<div data-role='collapsible' id='set" + nextId + "'>";
    content += "<h3>Section " + nextId + "</h3>";
    content += "<p>I am the collapsible content in a set so this feels like an accordion. I am hidden by default because I have the 'collapsed' state; you need to expand the header to see me.</p>";
    content += "<button id='removeStyle" + nextId + "' class='removeStyleBtn ui-btn ui-btn-b ui-shadow ui-corner-all ui-mini'>Remove</button></div>";
         
    $( "#set" ).append( content ).collapsibleset( "refresh" );
    //$("#set" + nextId+ " :button").button().button('refresh');
    $("#set" + nextId).collapsible( "expand" );
    console.log("collapsible set " + nextId + " added !!!");
  });
  console.log("pagecreate triggered !!!");
        
});
$(document).on("click",".removeStyleBtn",function() {
    $(this).closest('div[data-role="collapsible"]').remove();
});
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers