Jquery Mobile Collapsible List with data-enhanced="true"

Question

I needed a collapsible element with a split buttons in my page. So I found the solution from "frequent" (Add link within collapsible content header (split- link) - css missing and http://jsfiddle.net/XqAvB/2/), which is very good. Now I've improved it a little bit, so that the code can display pop-up windows too. In my version, I used a listview inside of the collapsible element to display addtional information.

The whole construct is inside of the data-role="content" group, so it have a little white boarder. And here my problem began: The tittle have a border, but the listview haven't one. Which code I need to use, so that all parts inside the content group gets a white boarder or with other words a data-inset which is true? I think the problem is in the class (CSS) argument, I think I have to add addtional words, code elements. But which?

Here's a litte JSFiddle of my case which should it explain a little bit better: http://jsfiddle.net/Cat_Turbo/BMN44/

HTML

<div data-role="page" id="page1">
<div data-role="content">
<div data-role="collapsible" data-theme='b' data-content-theme='d' data-collapsed='true' class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed doublemeaning" data-enhanced="true" data-inset="true">
<h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
<a class="myheading ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-icon-plus" href="#">Title</a>
<a class="click_action ui-btn ui-btn-icon-notext ui-icon-delete ui-corner-all " data-enhanced="true"  data-rel="back">New Page HTML</a>
</h3>
<ul data-role="listview" class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
<li>test 1</li>
<li>test 2</li>
</ul>
</div>
<div data-role="popup" id="purchase" data-theme="a" data-overlay-theme="b" style="max-width:100%; padding:1px;">
<h3>Purchase Album?</h3>
<p>Your download will begin immediately on your mobile device when you purchase.</p> <a href="index.html" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-btn-b ui-icon-check ui-btn-icon-left ui-btn-inline ui-mini">Buy: $10.99</a>
<a href="index.html" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-mini">Cancel</a>
</div>
</div>
</div>

JQuery

$(".click_action").bind("click", function (e) {
console.log('clicked');
  e.stopPropagation();
  e.preventDefault();
  e.stopImmediatePropagation();
  console.log('Should now go to: '+$(this).attr('href'));
  $.mobile.changePage($(this).attr('href'));
});

CSS

.ui-collapsible-inset .ui-collapsible-heading .ui-btn.click_action {
position: absolute;
top: 0;
right: 1px;
height: 100%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
-webkit-border-top-left-radius: 0;
-webkit-border-bottom-left-radius: 0;
border-width: 0px;
margin-top: -1px;
margin-bottom: -1px;
}

Answer 1

You are using an enhanced HTML markup. The correct HTML structure of what you want to achieve is as follows.

<div data-role="collapsible" data-theme='b' data-content-theme='a' data-collapsed='true'>
  <h3>Title
<a class="click_action ui-btn ui-btn-b ui-btn-icon-notext ui-icon-delete">Custom button</a>
  </h3>
  <ul data-role="listview">
    <li>test 1</li>
    <li>test 2</li>
  </ul>
</div>

• I have added ui-btn-b class to the button to get the same theme of the collapsible.

• Internal popup div should either be a direct child of page div, or outside page div as an external popup.

• In JS code return false; at the end acts like preventDefault() and stopImmediatePropagation() combined.

Demo