Add expandable sections in the HTML export

You can make sections expandable in the HTML export by modifying your template.

Before you begin

To make sections expandable in the HTML export, a template must exist. You can either use your own template or create a new one based on the Scroll Web Help Theme. To make make sections expandable in your template you need the jQuery library. If you create a new template and use the Scroll Web Help Theme as a base, jQuery is already included.

If you use your own template and it's not based on the Scroll Web Help Theme you will need to include jQuery. To do this: 

1. Open your template folder.
2. Go to src > main > resources and find the folder including the page.vm file
3. Open the page.vm file with your preferred text editor.
4. Add this line to the head section:

<script src="jquery-3.3.1.min.js"></script>

Make a section expandable

The Scroll Web Help Theme creates a section for each heading and its related content. You can use the same approach to create expandable sections. To achieve this you need to modify two files, section.vm and page.vm.

Modify section.vm: 

1. Open your template folder.
2. Go to src > main > resources > com.k15t.scroll.scroll-webhelp-theme > scroll-html in your template directory (Scroll Web Help Theme)
3. Open the section.vm file with your preferred text editor.

4. Add id="$element.title" to the <h{lvl}> tag

5. Add a <div> tag after the </h{lvl}> tag and a </div> tag after the #else

   XML

   #if($renderStart)
       #set($lvl = $context.getCombinedSectionLevel())#if ($context.ExportMode == "default")#set($lvl=$lvl - 1)#end
       <div class="section section-${lvl}" ${idAttribute}>
           <h${lvl} class="heading $cssClasses" id="$element.title">#*
               *##foreach ($annotation in $element.Annotations)#*
                   *##if ($annotation.Class.Name == "com.k15t.scroll.core.model.annotation.BookmarkAnnotation")#*
                       *#<span id="${annotation.BookmarkId}" class="scroll-bookmark"></span>#*
                   *##end#*
                   *##if ($annotation.Class.Name == "com.k15t.scroll.core.model.annotation.AnchorAnnotation")#*
                       *#<span id="${annotation.AnchorId}" class="confluence-anchor-link"></span>#*
                   *##end#*
               *##end#*
               *#<span>$stringEscapeUtils.escapeHtml($element.title)</span>#*
           *#</h${lvl}>
           <div>
   #else
           </div>
       </div>
   #end

Modify page.vm:

1. Open your template folder.
2. Go to src > main > resources > com.k15t.scroll.scroll-webhelp-theme > scroll-html in your template directory (Scroll Web Help Theme)
3. Open the page.vm file with your preferred text editor.

4. Add the following code snipped as the last element of the body section and replace "Title" with the value of the heading of your section. For more information you can have a look at the iQuery api. To have more than one expandable section, just duplicate the code snipped for each section and use the corresponding heading value to replace "Title".

   CODE

   <script type="text/javascript">
       $("#Title").click(function() {
           $("#Title").next().slideToggle("slow");
       });
   </script>

Following the modification of these two files, save them both and rebuild the template by executing the atlas-package command in the terminal. 

If you want to change the appearance of the heading of your expandable section, you can add an entry for it in:  src > main > resources > com.k15t.scroll.scroll-webhelp-theme > scroll-html > css > content-style.css