[SOLVED] How to add an action a JQuery mobile Collapsible header?

How to add an action a JQuery mobile Collapsible header?

In my Collapsible header I am trying to append an extra anchor tag which is pushed away from the header because this is not supported for JQuery mobile headers. Is there a way to add an extra link/action to the heading of a Collapsible in a neath way?

Thanks in advance

Solution

You can inject a button inside the collapsible from the $(document).on("collapsiblecreate") event, but I prefer to use pre-enhanced markup as described here (this should improve performance during page creation).

Here is an example (I believe everybody who is using JQM had such a problem at least one time...)

So, basically, instead of relying completely to the data-role enhancement, You need to write in Your html the expanded markup and the classes which JQM would add later during the widget initialization. To tell JQM that the markup is pre-enhanced add the data-enhanced="true" data-attribute to the widget.

This way, You are free to add whichever element You want inside any widget (search-inputs & so on). Just look inside the chrome developer tools: mostly, You will only need to copy-and-paste the markup enhanced by JQM using its own standard method and use that in Your html page.

$(document).on("collapsiblecreate", ".ui-collapsible", function(e) {
  /* $(this) is the collapsible */
});

.collapsible-assist {
  position: relative;
}

.collapsible-assist .ui-collapsible-heading {
  margin-right: 2.5em;
}

.collapsible-assist.square .ui-collapsible-heading {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.collapsible-assist .assist-btn {
  position: absolute;
  right: 0;
}

.collapsible-assist.square .assist-btn {
  margin: 0;
  border-bottom-right-radius: inherit;
  border-top-right-radius: inherit;
}

.collapsible-assist .ui-collapsible-content {
  margin-top: -1px !important;
  border-top-width: 1px !important;
  border-top-right-radius: inherit;
}


/* JQM no frills */

.ui-btn,
.ui-btn:hover,
.ui-btn:focus,
.ui-btn:active,
.ui-btn:visited {
  text-shadow: none !important;
}

.ui-btn:focus {
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}


/* Speed-up some android & iOS devices */

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>

<body>
  <div data-role="page">
    <div role="main" class="ui-content">
      <div data-role="collapsible" data-enhanced="true" class="collapsible-assist square ui-collapsible ui-collapsible-inset ui-collapsible-themed-content ui-corner-all ui-collapsible-collapsed">
        <a href="#popup" data-rel="popup" data-transition="pop" class="assist-btn ui-btn ui-btn-icon-right ui-icon-info">Help</a>
        <h4 class="ui-collapsible-heading ui-collapsible-heading-collapsed"><a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-icon-plus">Farm animals<div class="ui-collapsible-heading-status">click to expand contents</div></a></h4>
        <div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
          <ul data-role="listview" data-enhanced="false">
            <li><a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Chicken</a></li>
            <li><a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Cow</a></li>
            <li><a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Duck</a></li>
          </ul>
        </div>
      </div>
      <br>
      <div data-role="collapsible" data-enhanced="true" class="collapsible-assist round ui-collapsible ui-collapsible-inset ui-collapsible-themed-content ui-corner-all ui-collapsible-collapsed">
        <a href="#popup" data-rel="popup" data-transition="pop" class="assist-btn ui-btn ui-btn-icon-notext ui-btn-corner-all ui-icon-info">Help</a>
        <h4 class="ui-collapsible-heading ui-collapsible-heading-collapsed"><a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-icon-plus">Legend<div class="ui-collapsible-heading-status">click to expand contents</div></a></h4>
        <div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
          <form>
            <div data-role="controlgroup">
              <input name="checkbox-1-a" id="checkbox-1-a" type="checkbox" checked>
              <label for="checkbox-1-a">One</label>
              <input name="checkbox-2-a" id="checkbox-2-a" type="checkbox">
              <label for="checkbox-2-a">Two</label>
              <input name="checkbox-3-a" id="checkbox-3-a" type="checkbox">
              <label for="checkbox-3-a">Three</label>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div data-role="popup" id="popup" class="ui-content" data-theme="a">
      <p>I'm a help popup.</p>
    </div>
  </div>
</body>

</html>