Skip to main contentSkip Navigation or Skip to Content
Thompson Rivers University
Thompson Rivers University

Expandable Sections, Tabs, Image & Text Boxes

Expandable Sections (Accordions)

Accordions allow you to hide content until a user clicks to display it. As a best practice, the title should describe the content of the expandable section so the user know what the content is.

New way to add the plus and minus

You can now use classes instead of tags in order to create the plus and minus icons. Previous way can still be used and you can see the demos for it below.

New minus class

This uses the .accordion-minus class without the <i> or <span> tags.

New plus class

This uses the .accordion-plus class without the <i> or <span> tags.


<div class="accordion">
	<p class="accordion-toggle altHead expanded accordion-minus">New minus class</p>
	<div class="accordion-content open">
		<p>This uses the <strong>.accordion-minus</strong> class without the <strong><i></strong> or <strong><span></strong>tags.</p>
	</div>
	<p class="accordion-toggle accordion-plus">New plus class</p>
	<div class="accordion-content">
		<p>This uses the <strong>.accordion-plus</strong> class without the <strong><i></strong> or <strong><span></strong> tags.</p>
	</div>
</div>

Previous way to add the plus and minus

 Indecision

This Accordion is open by default - it has the 'expanded' class added to 'accordion-toggle' AND the 'open' class added to accordion-content. Also, change fa-plus to fa-minus.

Nothing is so exhausting as indecision, and nothing is so futile. The grass is not, in fact, always greener on the other side of the fence. No, not at all. Fences have nothing to do with it. The grass is greenest where it is watered. When crossing over fences, carry water with you and tend the grass wherever you may be. Argue for your limitations, and sure enough, they are yours. Self-image sets the boundaries of individual accomplishment. Better get a stiff neck from aiming too high than a hunch from aiming too low.

 Change and Growth

Change and growth take place when a person has risked himself, and dares to become involved in experimenting with his own life. An objective without a plan is a dream. Failure should be our teacher, not our undertaker. Failure is delay, not defeat. It is a temporary detour, not a dead end. Failure is something we can avoid only by saying nothing, doing nothing, and being nothing. All that is necessary for evil to triumph, is for good men to do nothing. Do not tell me this a difficult problem. If it were not difficult it would not be a problem.

<div class="accordion">
<p class="accordion-toggle altHead expanded"><i class="fa fa-minus">&nbsp;</i>Indecision</p>
<div class="accordion-content open">
<p>This Accordion is open by default - it has the 'expanded' class added to 'accordion-toggle' AND the 'open' class added to accordion-content. Also, change fa-plus to fa-minus.</p>
<p>Nothing is so exhausting as indecision, and nothing is so futile. The grass is not, in fact, always greener on the other side of the fence. No, not at all. Fences have nothing to do with it. The grass is greenest where it is watered. When crossing over fences, carry water with you and tend the grass wherever you may be. Argue for your limitations, and sure enough, they are yours. Self-image sets the boundaries of individual accomplishment. Better get a stiff neck from aiming too high than a hunch from aiming too low.</p>
</div>
<p class="accordion-toggle altHead"><i class="fa fa-plus">&nbsp;</i>Change and Growth</p>
<div class="accordion-content">
<p>Change and growth take place when a person has risked himself, and dares to become involved in experimenting with his own life. An objective without a plan is a dream. Failure should be our teacher, not our undertaker. Failure is delay, not defeat. It is a temporary detour, not a dead end. Failure is something we can avoid only by saying nothing, doing nothing, and being nothing. All that is necessary for evil to triumph, is for good men to do nothing. Do not tell me this a difficult problem. If it were not difficult it would not be a problem.</p>
</div>
</div>

Multiple Closed Sections

 Change and Growth

Change and growth take place when a person has risked himself, and dares to become involved in experimenting with his own life.

 Change and Growth

Change and growth take place when a person has risked himself, and dares to become involved in experimenting with his own life.

 Change and Growth

Change and growth take place when a person has risked himself, and dares to become involved in experimenting with his own life.

<div class="accordion">
<p class="accordion-toggle altHead"><i class="fa fa-plus">&nbsp;</i>Change and Growth</p>
<div class="accordion-content">
<p>Change and growth take place when a person has risked himself, and dares to become involved in experimenting with his own life.</p>
</div>
<p class="accordion-toggle altHead"><i class="fa fa-plus">&nbsp;</i>Change and Growth</p>
<div class="accordion-content">
<p>Change and growth take place when a person has risked himself, and dares to become involved in experimenting with his own life.</p>
</div>
<p class="accordion-toggle altHead"><i class="fa fa-plus">&nbsp;</i>Change and Growth</p>
<div class="accordion-content">
<p>Change and growth take place when a person has risked himself, and dares to become involved in experimenting with his own life.</p>
</div>
</div>

Nesting Expandable Sections

Expandable Sections can be 'nested' to allow for content within other expanded sections.

 Indecision

Nothing is so exhausting as indecision, and nothing is so futile. The grass is not, in fact, always greener on the other side of the fence. No, not at all. Fences have nothing to do with it. The grass is greenest where it is watered. When crossing over fences, carry water with you and tend the grass wherever you may be. Argue for your limitations, and sure enough, they are yours. Self-image sets the boundaries of individual accomplishment. Better get a stiff neck from aiming too high than a hunch from aiming too low.

 Change and Growth

Change and growth take place when a person has risked himself, and dares to become involved in experimenting with his own life. An objective without a plan is a dream. Failure should be our teacher, not our undertaker. Failure is delay, not defeat. It is a temporary detour, not a dead end. Failure is something we can avoid only by saying nothing, doing nothing, and being nothing. All that is necessary for evil to triumph, is for good men to do nothing. Do not tell me this a difficult problem. If it were not difficult it would not be a problem.

 Enthusiasm

If you are not fired with enthusiasm, you will be fired with enthusiasm. Do what you can, with what you have, where you are. The winds and waves are always on the side of the ablest navigators. You are never given a wish without also being given the power to make it true. You may have to work for it, however. To think is easy. To act is difficult. To act as one thinks is the most difficult of all.

 Do Great Things

If you cannot do great things, do small things in a great way. Nurture your mind with great thoughts, for you will never go any higher than you think. Until you try, you do not know what you cannot do. Do not be afraid to take big steps. You cannot cross a chasm in two small jumps. Don't Sweat the Small Stuff ...and it's All Small Stuff. Energy and persistence conquer all things. You are never given a wish without also being given the power to make it true. You may have to work for it, however. Why not go out on a limb? That is where the fruit is.

<div class="accordion">
<p class="accordion-toggle altHead"><i class="fa fa-plus">&nbsp;</i>Indecision</p>
<div class="accordion-content">
<p>Nothing is so exhausting as indecision, and nothing is so futile...</p>
<div class="accordion">
<p class="accordion-toggle altHead"><i class="fa fa-plus">&nbsp;</i>Change and Growth</p>
<div class="accordion-content">
<p>Change and growth take place when a person has risked himself, and dares to become involved in experimenting with his own life...</p>
</div>
<p class="accordion-toggle altHead"><i class="fa fa-plus">&nbsp;</i>Enthusiasm</p>
<div class="accordion-content">
<p>If you are not fired with enthusiasm, you will be fired with enthusiasm...</p>
</div>
<p class="accordion-toggle altHead"><i class="fa fa-plus">&nbsp;</i>Do Great Things</p>
<div class="accordion-content">
<p>If you cannot do great things, do small things in a great way...</p>
</div>
</div>
</div>
</div>

Tabs

Horizontal Tabs

First tab content goes here...

You can put all sorts of text content here, including an expandable section - see the second tab.

Nothing determines who we will become so much as those things we choose to ignore. To think is easy. To act is difficult. To act as one thinks is the most difficult of all. In the long run, men hit only what they aim at. Therefore, they had better aim at something high. Argue for your limitations, and sure enough, they are yours. This Saturday, do something you have wanted to do for years. Something just for yourself. And repeat this process once every month. The wisest men follow their own direction. The man who is waiting for something to turn up might start on his shirt sleeves.

<ul class="tabs" data-tab role="tablist">
<li class="tab-title active" role="presentation"><a href="#tab-1" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-1">Tab 1</a></li>
<li class="tab-title" role="presentation"><a href="#tab-2" role="tab" tabindex="0" aria-selected="false" aria-controls="tab-2">Tab 2</a></li>
<li class="tab-title" role="presentation"><a href="#tab-3" role="tab" tabindex="0" aria-selected="false" aria-controls="tab-3">Tab 3</a></li>
<li class="tab-title" role="presentation"><a href="#tab-4" role="tab" tabindex="0" aria-selected="false" aria-controls="tab-4">Tab 4</a></li>
</ul>
<div class="tabs-content">
<section role="tabpanel" aria-hidden="false" class="content active" id="tab-1">
<h5>First tab content goes here...</h5>
<p class="">You can put all sorts of text content here, including an expandable section - see the second tab.</p>
<p class="columns-2">Nothing determines who we will become so much as those things we choose to ignore...</p>
</section>
<section role="tabpanel" aria-hidden="true" class="content" id="tab-2">
<h5>Second tab content goes here...</h5>
<div class="accordion">
<p class="accordion-toggle altHead"><i class="fa fa-plus"></i>Indecision</p>
<div class="accordion-content">
<p>Nothing is so exhausting as indecision, and nothing is so futile...</p>
</div>
<p class="accordion-toggle altHead"><i class="fa fa-plus"></i>Change and Growth</p>
<div class="accordion-content">
<p>Change and growth take place when a person has risked himself, and dares to become involved in experimenting with his own life...</p>
</div>
</div>
</section>
<section role="tabpanel" aria-hidden="true" class="content" id="tab-3">
<h5>Third tab content goes here...</h5>
<p>When one door closes another opens. Expect that new door to reveal even greater wonders and glories and surprises. </p>
</section>
<section role="tabpanel" aria-hidden="true" class="content" id="tab-4">
<h5>Fourth tab content goes here...</h5>
<p>It is better to light a small candle than to curse the darkness...</p>
</section>
</div>

Vertical Tabs

This is the first tab of the vertical tab example.

This is the second tab of the vertical tab example.

This is the third tab of the vertical tab example.

This is the fourth tab of the vertical tab example.

<ul class="tabs vertical" data-tab>
<li class="tab-title active"><a href="#tabv1">Tab 1</a></li>
<li class="tab-title"><a href="#tabv2">Tab 2</a></li>
<li class="tab-title"><a href="#tabv3">Tab 3</a></li>
<li class="tab-title"><a href="#tabv4">Tab 4</a></li>
</ul>
<div class="tabs-content">
<div class="content active" id="tabv1">
<p>This is the first tab of the vertical tab example.</p>
</div>
<div class="content" id="tabv2">
<p>This is the second tab of the vertical tab example. </p>
</div>
<div class="content" id="tabv3">
<p>This is the third tab of the vertical tab example.</p>
</div>
<div class="content" id="tabv4">
<p>This is the fourth tab of the vertical tab example.</p>
</div>
</div>

Image and Text Boxes

These boxes can be configured in a variety of ways, with several background and button colours. Below are several examples.

image

Picture of a person

Do what you can, with what you have, where you are. It is never too late to be what you might have been.

Read more

image

Architecture

There is a time for departure even when there is no certain place to go.

Read more

<div class="row collapse">
<div class="image-block large-12 medium-12 columns">
<img class="radleft" src="http://lorempixel.com/640/480/nature/" alt="image">
<div class="row">
<div class="text-block large-6 medium-7 small-12 nomargin right bluebg radright">
<h4>Picture of a person</h4>
<p class="lh-24 size-18">Do what you can, with what you have, where you are. It is never too late to be what you might have been.</p>
<p><a class="button radius nomargin tealbg right" href="#">Read more</a></p>
</div>
</div>
</div>
<div class="image-block large-12 medium-12 end columns">
<img class="radleft" src="http://lorempixel.com/640/480/nature/" alt="image">
<div class="row">
<div class="text-block large-6 medium-7 small-12 nomargin right bluebg radright">
<h4>Architecture</h4>
<p class="lh-24 size-18">There is a time for departure even when there is no certain place to go.</p>
<p><a class="button radius nomargin tealbg right" href="#">Read more</a></p>
</div>
</div>
</div>
</div>

image

Picture of a person

Do what you can, with what you have, where you are. It is never too late to be what you might have been.

Read more

image

Architecture

There is a time for departure even when there is no certain place to go.

Read more

<div class="row collapse">
<div class="image-block large-6 medium-6 columns">
<img src="http://lorempixel.com/640/480/nature/" alt="image">
<div class="row">
<div class="text-block large-6 medium-6 nomargin left tealbg-st">
<h4>Picture of a person</h4>
<p class="lh-24 size-18">Do what you can, with what you have, where you are. It is never too late to be what you might have been.</p>
<p><a class="button radius nomargin tealbg-dark" href="#">Read more</a></p>
</div>
</div>
</div>
<div class="image-block large-6 medium-6 columns">
<img src="http://lorempixel.com/640/480/nature/" alt="image">
<div class="row">
<div class="text-block large-6 medium-7 small-12 nomargin right tealbg-st">
<h4>Architecture</h4>
<p class="lh-24 size-18">There is a time for departure even when there is no certain place to go.</p>
<p><a class="button radius nomargin tealbg-dark" href="#">Read more</a></p>
</div>
</div>
</div>
</div>

image

Picture of a person

Do what you can, with what you have, where you are. It is never too late to be what you might have been.

Read more

image

Architecture

There is a time for departure even when there is no certain place to go.

Read more

<div class="row">
<div class="image-block large-6 medium-6 columns">
<img src="http://lorempixel.com/640/480/nature/" alt="image">
<div class="row">
<div class="text-block large-7 medium-6 nomargin left powderbg">
<h4>Picture of a person</h4>
<p>Do what you can, with what you have, where you are. It is never too late to be what you might have been.</p>
<p><a class="button radius nomargin bluebg" href="#">Read more</a></p>
</div>
</div>
</div>
<div class="image-block large-6 medium-6 columns">
<img src="http://lorempixel.com/640/480/nature/" alt="image">
<div class="row">
<div class="text-block large-7 medium-6 small-12 nomargin left powderbg">
<h4>Architecture</h4>
<p>There is a time for departure even when there is no certain place to go.</p>
<p><a class="button radius nomargin bluebg" href="#">Read more</a></p>
</div>
</div>
</div>
</div>
Search To Top