Collapsible Sections with jQuery

I’ve previously posted about how to collapse sections using JavaScript in an HTML Container.  It’s a pretty cool trick, but the experience isn’t really that great because it’s jarring.  Also, the tax on the developer is high since you have to measure pixel perfect sections and deal with 0px height sections in your design mode.  Today, I’m going to show how to do this using jQuery that’s both much easier and more engaging.

The first thing we have to do is find the section id that we want to hide.  To do that, run the document like normal, right click on the section in Chrome or Firefox, and click Inspect Element.  The ID will be displayed in one of two places, highlighted in the screenshot below.

Note: The numbers shown in this screenshot are totally fictional and just random numbers.

Armed with that information, go back to design mode and add an HTML Container to where you want the +/- control box to be.  It’ll have the following simple code:

<img id=’more’ style=”cursor:pointer” width=12 src=”../images/plus.gif”>

Note: The image reference should be to whatever you want to use to display a “more” action, like a + sign.

Next, add an HTML Container anywhere on the page with the following code:

<script src="http://code.jquery.com/jquery.min.js">
</script><script>
$(document).ready(function() {
$('#K8').hide();
});

 $('#more').click(function () {
         if ($('#K8').is(":hidden")) {
  $('#K8').slideDown("slow");
$('#more').attr('src', '../images/minus.gif');}
         else {
$('#K8').slideUp("slow");
$(’#more').attr(‘src’, '../images/plus.gif’);}
 });

</script>

Note: See the jQuery post about how to install jQuery locally if your web server doesn’t allow cross site scripting.

The basic strategy is to first hide the section at page load.  This is something we can’t do without jQuery, which is why the previous solution required starting at 0px height.  Next, we simply monitor the ‘more’ image and when it’s clicked, we check if the target section is already hidden.  If it is, then slideDown() and if it isn’t, then slideUp().  Also, toggle the image to flip between the + and – sign.  The effect is a smooth animation that’s engaging and inviting to the user.

The code here is easier, there’s no measuring section heights like the previous solution, and you end up with a sweet animation.

I’ll come back later and post a video (I hope).

Dynamic Sections
With a little bit of coding, we can also extend this to dynamically control sections based on page groupings.  For more details, check out this excellently detailed blog post at MicroStrategyBlog.com.

You may also like...

7 Responses

  1. Very useful information!

    However, unable to get this working right.

    I am stuck at the click function. When I use ‘$(document).click(function ()’ instead of
    ‘$(‘#more’).click(function ()’, it works!

    Any thoughts on what may be going wrong!

    • Bryan says:

      I had a typo in the code that I’ve since fixed, but maybe you had the original version. The img tag should read id=’more’ and not class=’more’. It could work with class as well, but then the bottom code would be $(‘.more’) instead of $(‘#more’). Sorry for the confusion.

  2. Chad Peters says:

    Bryan – this is great and I’ve almost got it working but I’m having trouble referencing the DIV IDs because (I’m assuming) they are oddly noted. For example:

    id=”*lK36*kF875*x1*t1362862130075″

    Whenever I try to use the *lK36*kF875*x1*t1362862130075 to replace your #K8 code, I get a reference error. I can however, use one of the more normal div ids (i.e. mstrmojo-progress) and the code works fine. Any thoughts on that?

    • Chad Peters says:

      Quick follow-up. Seems like the DIV IDs are being assigned dynamically each time the page/document is run. They are variable which makes it (seemingly) impossible to code to.

    • Bryan says:

      Yeah, that happens in Express mode. Instead of explicitly calling it by ID, you have to use a .find() command to get it. Fortunately, the first few characters are still unique. However, I’d advice against using jQuery with Express mode. This is just one of the simple things that will go wrong. Other horrors are that div’s aren’t added to the page until you scroll to them, making your collapsable sections very wonky (either not collapsing at the bottom or expanding on their own as you scroll). Also, and probably related, there is some imperceptible delay in object creation once the page is loaded. We had to wrap our code around a 10ms wait time in order for it to work, but that’s just a crapshoot. Sometimes it would fail, and raising that number higher just makes the experience worse. Interactive mode doesn’t have any of these issues, so I’d stick with that.

  3. josepcoves says:

    Hi Bryan,

    Thank you so much for your post! It inspired me this other post which shows how to emulate a filter selection via a Button:

    http://www.relational.es/blog/microstrategy-10-hacks-how-to-fire-selector-change-via-button-for-any-presentation-mode/

    Hope it helps!

  1. May 19, 2014

    […] “jailbreak” by injecting jQuery into dashboards which let you do some pretty cool things on the fly.  Even though they didn’t intend it, it’s still nice that the […]

Leave a Reply

Your email address will not be published. Required fields are marked *