0

I have collapsible content, and would like to add a link that can be clicked besides the actual toggling function of the header.

[edit]Thanks to /frequent/, I am pretty close, the link "on" the header is working, but I am missing the css to get the link inside the header - just can't figure it out:

<html>
<body>
<script type="text/javascript" charset="utf-8">
$( document ).on('pageinit','#page1', function (event) {
 $(".click_action").bind("click", function (e) {
  e.stopPropagation();
  e.preventDefault();
  e.stopImmediatePropagation();
  $.mobile.changePage($(this).attr('href'));
 });
});
</script>
<div data-role="page" id="page1"> 

<div data-role="collapsible" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed doublemeaning" data-enhanced="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="#">Heading</a>
<a class="click_action" href="test2.html">Go to test2.html</a>
</h3>
<div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
     <p>I'm the collapsible content. Open me!</p>
</div>
</div>

</body>
</html>

See http://jsfiddle.net/XqAvB/1/ Any ideas are very much appreciated.

Chris
  • 580
  • 5
  • 17
  • I'm confused, in your javascript the click is bound to an element with class ui-collapsible-heading-toggle but I don't see that element in the HTML. Is that the h3? – Josh KG Oct 12 '13 at 07:54

1 Answers1

1

You can do this in JQM 1.4 by enhancing the widget yourself, which means you need to set data-enhanced="true" on the collapsible and providing all collapsible-content yourself.

Normally an enhanced collapsible should have this code (using H4 header):

<div data-role="collapsible" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed">
    <h4 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
        <a class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-left" href="#">Heading<span class="ui-collapsible-heading-status"> click to expand contents</span>
        </a>
    </h4>
    <div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
         <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
    </div>
</div>

If you provide this code yourself, JQM will only create the widget object on the collapsible and not enhance the widget. This way you can add multiple pre-enhanced buttons to the header element with JQM only enhancing the first (if I recall correctly).

Something like this:

    <h4 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
        <a class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-left" href="#">Heading<span class="ui-collapsible-heading-status"> click to expand contents</span>
        </a>
        <a class="ui-btn ui-btn-icon-notext ui-icon-plus some_action" href="#">Make Foo</a>
    </h4>

Then CSS your button into the correct position, add your some_action click handler and don't forget to set a binding to collapsibleexpand event and e.preventDefault if the click was on your custom button (so check for some_action on e.target.

I had an example somewhere, but can't find it. If I do, I will add.

frequent
  • 27,643
  • 59
  • 181
  • 333
  • Thats almost it, great hint! But the "CSS your button" is easier said than done ;) Any idea? Thanks! – Chris Oct 13 '13 at 11:53
  • Do you have a fiddle? – frequent Oct 13 '13 at 13:43
  • Check the updated [fiddle](http://jsfiddle.net/XqAvB/2/). You have to enhance the 2nd button yourself - see the information on `data-enhanced` in JQM 1.4. Normally JQM will read all the data-foo attributes and generate classes (or needed elements) when creating the JQM widget. When setting `data-enhanced="true"` you are telling JQM that you generate the finished HTML = no need to read data- (slow) and manipulate DOM. For buttons it is easy, because it's just changing data-attributes into classes. The rest is some simple CSS. Let me know if you have any other questions. – frequent Oct 14 '13 at 07:36
  • and mark the answer as checked if that was what you are looking for. Thanks :-) – frequent Oct 14 '13 at 07:36
  • Jupp, expect that I wanted the text in there and no button: http://jsfiddle.net/XqAvB/4/ I hope with em- and % values it stays where it is now on different devices & resolutions... time will tell I suppose! Thanks a lot for your help! – Chris Oct 15 '13 at 06:08