Need Help Implementing Collapsible Content Blocks in Confluence...

[Terrence Bayley]

Trying to help one of our users implement a jQueery Mobile Collapsible on a Confluence page...Can't seem to get scripts to load on page (Inspect Element)...

From within "Custom HTML" LOOK AND FEEL (At End of HEAD):

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

On Confluence Page in HTML Macro:

<div data-role="main" class="ui-content">
    <div data-role="collapsibleset" class="ui-collapsible-set ui-group-theme-inherit ui-corner-all">
      <div data-role="collapsible" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed ui-first-child">
        <h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">Click me - I'm collapsible!</h3>
        <p>I'm the expanded content.</p>
      </div>
      <div data-role="collapsible" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed ui-first-child">
        <h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">Click me - I'm collapsible!</h3>
        <p>I'm the expanded content.</p>
      </div>
      <div data-role="collapsible" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed ui-first-child">
        <h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">Click me - I'm collapsible!</h3>
        <p>I'm the expanded content.</p>
      </div>
      <div data-role="collapsible" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed ui-first-child">
        <h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">Click me - I'm collapsible!</h3>
        <p>I'm the expanded content.</p>
      </div>
    </div>
  </div>

Desired Results: http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_collapsible_sets

All advice is sincerely appreciated!

Many Thanks!

~Terrence

[Terrence Bayley]

OK, So I am able to get to the CSS via that <link> line, but the Script isn't being loaded. Not sure where to place the script such that confluence will load it.

[Davin Studer]

Line 17 in the user macro should be loading the script.

[Terrence Bayley]

Thanks for the reply Davin, Actually we use UI Expand a lot, but for this instance user needs ability to make jQuery calls. Looked up some more reference for using jQuery in a Confluence page (as I don't have a lot of experience using it, and didn't want to waste your time). Going to implement the above code and see what happens. Thanks for your help... Will post a success message once we can get it to work.

Ter

[Davin Studer]

Something like this should work. Create two user macros based on the below code. Your collapsible pane macros will go inside the collapse group macro.

Macro Name: collapse_group

Macro Title: Collapse Group

Macro Body Processing: Rendered

Template:

## Developed by: Davin Studer
## Date created: 11/19/2014
## @noparams

#####################################################################
## These is for getting around velocity issues when writing jQuery ##
#####################################################################
#set( $d = '$' )

<div data-role="collapsibleset">
$body
</div>

<link rel="stylesheet" href="//code.jquery.com/mobile/1.1.2/jquery.mobile-1.1.2.min.css">
<script type="text/javascript">
AJS.toInit(function(){
    AJS.${d}.getScript('//code.jquery.com/mobile/1.1.2/jquery.mobile-1.1.2.min.js')
});
</script>

Macro Name: collapse_pane

Macro Title: Collapse Pane

Macro Body Processing: Rendered

Template:

## Developed by: Davin Studer
## Date created: 11/19/2014
## @param Title:title=Title|type=string|required=true|desc=The title of the pane.<div data-role="collapsible">
 <h3>$!paramTitle</h3>
 <p>$body</p>
</div>

[Davin Studer]

Well, first off jQuery is already in Confluence and in your post you were trying to include jQuery twice. Maybe you already know about it, but are you aware of the expand macro? If you really want to use this one then I would not put the .js in head,but rather I would put it in a user macro. So that it is only loaded when you use the macro. Rather than on every page.

[Davin Studer]

Another issue is that the version of jQuery that comes with Confluence is not compatible with the version of jQuery mobile you are referencing.