Please enable javascript to view this page in its intended format.

Queen's University
 

Collapsible Content

 

The Collapsible Content class is a useful  way to provide a small amount of information that can be expanded to show greater detail.  A great way to display Questions with the Answer available with a single click.

 

There are three types of Collapsible content currently available

  • Standard White Text on Blue Gradient banner
  • Blue Text on White Gradient banner
  • Collapsible Fieldsets

The code for each collapsible container has two parts, the title that will appear on the banner, and the content that will be expanded when the banner is clicked on.  Enter the code in the  Source (HTML) mode.

 

Note:  The Code below has extra space after each <  and before each > to allow them to be displayed on the page.   When entering the code in your source remove the extra spaces.

 

Standard White Text on Blue Gradient banner

 

Code:

 

 

 

<  div class="collapsible-container"  >

     <  div class="collapse-title" >  

        This is My Title

     <  /div  >

     <  div class="collapsible-content" > 

        This is my collapsible content

     <  /div   >

<  /div  >

 

 

Results:

 

 The banner will be displayed on the page. 

 collapsible-one.png

To see the collapsed content click the bar.

collapsible-two.png

 


 

 

Blue Text on White Gradient Banner

 

Code:

 

< div class= "collapsible-container light" >

   < div class="collapse-title" >

      This is My Title

   < /div >

   < div class="collapsible-content" >

      This is my collapsible content

   < /div >

< /div >



Results:

 

collapsible-light.png

Collapsible Fieldsets

 

Collapsible Fieldsets are useful for when you want a section of content whereby some content should notbe collapsed, and some content should.


Code:


< fieldset class="collapsible-container" >
    < legend > Your legend/title here < /legend >
   < div > Content that will not be collapsed < /div > 
   < div class = "collapsible-content" >  Content that will be collapsed < /div >
< /fieldset >



Results:

 

collapsible-legend.png

Kingston, Ontario, Canada K7L 3N6 613.533.2000