Need Help Implementing Collapsible Content Blocks in Confluence...
Asked by 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


Answers:
author: Terrence Bayley
body: 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.

comments: author: Davin Studer
body: Line 17 in the user macro should be loading the script.


author: Terrence Bayley
body: 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


author: Davin Studer
body: 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 = '$' )&lt;div data-role="collapsibleset"&gt;$body&lt;/div&gt;&lt;link rel="stylesheet" href="//code.jquery.com/mobile/1.1.2/jquery.mobile-1.1.2.min.css"&gt;&lt;script type="text/javascript"&gt;AJS.toInit(function(){    AJS.${d}.getScript('//code.jquery.com/mobile/1.1.2/jquery.mobile-1.1.2.min.js')});&lt;/script&gt;
```

**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.&lt;div data-role="collapsible"&gt; &lt;h3&gt;$!paramTitle&lt;/h3&gt; &lt;p&gt;$body&lt;/p&gt;&lt;/div&gt;
```


author: Davin Studer
body: 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.

comments: author: Davin Studer
body: Another issue is that the version of jQuery that comes with Confluence is not compatible with the version of jQuery mobile you are referencing.