Public Lab Research note


Creating Collapse-able Sections in a Research Note

by walkerjeffd | August 13, 2014 17:43 13 Aug 17:43 | #11044 | #11044

What I want to do

See if I can use the Bootstrap collapse feature in a PL research note to create collapse-able sections. Since the PL site is based on bootstrap already, it should have the javascript available to do this.

My attempt and results

I'm just going to copy some code from the bootstrap docs and see if it works.

Here is the raw code I put it in this note:

### Experimental Setup Details 

Something normal people wouldn't want to see, so its collapsed but could be expanded...

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Show/Hide
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse">
      <div class="accordion-inner">
        The nitty gritty details that most people wouldn't want to see go here...
      </div>
    </div>
  </div>
</div>

### Results

This section could have results that most people would want to see...

<div class="accordion" id="accordion3">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapseTwo">
        Show/Hide
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse in">
      <div class="accordion-inner">
        The results would be shown here in un-collapsed form by default.
      </div>
    </div>
  </div>
</div>

And here is what it looks like after rendering:

Experimental Setup Details

Something normal people wouldn't want to see, so its collapsed but could be expanded...

The nitty gritty details that most people wouldn't want to see go here...

Results

This section could have results that most people would want to see...

The results would be shown here in un-collapsed form by default.

Questions and next steps

This seems to work, but requires writing the collapsed sections in HTML and also changing the CSS so the show/hide buttons are not so large. EDIT: this is only a problem in preview mode, after publishing the note, the accordian headers are ok.

A markdown extension could probably be written that provides a markdown flag of some kind (e.g. ##> Section) as @warren suggested.


6 Comments

holy crap that was fast.

Reply to this comment...


@warren, This is neat! Would this work for wikis too?

Is this a question? Click here to post it to the Questions page.

Reply to this comment...


Yep! It's a little convoluted to write the HTML, though; if you think it'd be a common feature, we could make an inline powertag for it, maybe?

Is this a question? Click here to post it to the Questions page.

Reply to this comment...


@warren, I think it could be useful -- it could be more visually appealing than just having a Table of Contents at the top and then straight text following. It also would be a pretty awesome feature for a quick sort of guide that wasn't interactive. Like, if the CSAP were only informational, and you could un-collapse information that was relevant to you but skip over sections that wouldn't be relevant to you. What do you think?

Is this a question? Click here to post it to the Questions page.

Reply to this comment...


I wonder if we could think about it more developed out as a feature, like perhaps it'd show up like an inset text box: http://getbootstrap.com/components/#panels-heading

Or we could call them "collapsible sections" and have it just collapse any paragraph following a header with this notation (just to throw an idea out there):

## Header [+]

Reply to this comment...


Interesting. I was envisioning the Header with collapsable paragraphs below, but both could be cool.

Reply to this comment...


Login to comment.