Need Help Implementing Collapsible Content Blocks in Confluence...

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

4 answers

0 vote
Davin Studer Community Champion Nov 19, 2014

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 Community Champion Nov 19, 2014

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

0 vote
Davin Studer Community Champion Nov 19, 2014

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;

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

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 Community Champion Nov 24, 2014

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

Suggest an answer

Log in or Sign up to answer
How to earn badges on the Atlassian Community

How to earn badges on the Atlassian Community

Badges are a great way to show off community activity, whether you’re a newbie or a Champion.

Learn more
Community showcase
Posted Jul 10, 2018 in Confluence

We want to see the templates you've created in Confluence!

Hi Community, Jessica here from the Confluence Product Marketing team!  July’s community challenge is all about sharing pictures  — and as an extension of our first post on what ...

502 views 19 11
Join discussion

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you