Hide/Show Sections on a Document

I originally had this idea for a method to hide and show elements on the fly on a Document last year, but it didn’t quite work out.  The two major problems that prevented me from using it in production were that I couldn’t find a way to have the object start out hidden, and once hidden it just left a gap or space instead of resizing the content around it.  I’m happy to report that after some slight modifications to the method, I’ve solved both problems and implemented it into a recent dashboard I built.  This solution doesn’t require any customizations and will work in 9.0+.

The steps are similar to last time, but I’m going to put them in detail here.  I’m doing a separate post for this since this is a better way to do it, but since that post is old and circulated, I don’t want to delete it and break links.

Step 1 – Layout Your Document
The basic idea last time was to hide/show objects, and I did a proof of concept with a grid.  The first improvement is instead to do this with a section.  For one, it provides more flexibility for implementation because you can put any number of components in the section without adding complexity to this hack.

In this example, I’ve created 3 sections.  The middle section I’ve filled in gray so that it’s very obvious where it is, and added some controls like a text box, a Panel Stack and a Grid.  Now what we’ll do is add some code to dynamically hide the gray section.

Step 2 – Get the Section Handle
Here you need to use either Chrome or Firebug to find the ID of the Section.  The ID is set at design time and won’t change, so after you’ve laid out your document, you just have to find it one time and you’re good.

In Chrome, run the document like normal and right click anywhere inside the middle (gray) section.  Choose Inspect Element from the menu and show the HTML code for the page and highlight the code for this section.  The value we’re interested in for this example is K8, which is the ID.  You can see it in the code or you can see it in the yellow tooltip that pops up at the bottom of the section.

Step 3 – Add an HTML Container
Go back to design mode and add an HTML Container object (Insert -> HTML Container) and add the following code:

<a onclick="javascript:if(getElementById('K8').style.height=='300px') {getElementById('K8').style.height='0px'} else {getElementById('K8').style.height='300px'};">toggle</a>

The last time I tried this, the code I used was trying to set the visibility property of the object to make it hidden.  Unfortunately, this just left a blank space when we hid it, which wasn’t very useful.  This time however, we will modify the height of the section.  Since a section by nature can expand and collapse, this will automatically handle the repositioning of surrounding content.

What this code does is create a link called toggle and when you click on it, it will change the height of the target section between either 0 or 300 (pick whatever size works for you).  Don’t forget to replace the K8 in the above code with whatever your Section ID is.

In order to make the section “hidden” by default, right click on the section in design mode and set it’s height to 0.

Now when the document runs for the first time, the section will not be visible since it’s height is 0.  However, the content in that section is still there and will react to things like selectors.  When we click on the toggle link, it will increase the height of the section which will make it “visible” and reposition any content around it.

Tip: There appears to be a bug when embedding Javascript into an HTML Container.  The first time you run the document after modifying it, it doesn’t work.  Go back into Edit mode then back into Interactive mode, and then it does work.  So if you’re trying out this code and it doesn’t work the first time, try that first.

Here it is in action!

You may also like...