# Creating Collapse-able Sections in a Research Note

by walkerjeffd |

### 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">
<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">
<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.

holy crap that was fast.

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

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

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.

@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.

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 [+]

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

You must be logged in to comment.