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.

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">
<h6 class="accordion-toggle altHead expanded"><i class="fa fa-minus">&nbsp;</i>Indecision</h6>
<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>
<h6 class="accordion-toggle altHead"><i class="fa fa-plus">&nbsp;</i>Change and Growth</h6>
<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">
<h6 class="accordion-toggle altHead"><i class="fa fa-plus">&nbsp;</i>Change and Growth</h6>
<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>
<h6 class="accordion-toggle altHead"><i class="fa fa-plus">&nbsp;</i>Change and Growth</h6>
<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>
<h6 class="accordion-toggle altHead"><i class="fa fa-plus">&nbsp;</i>Change and Growth</h6>
<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">
<h6 class="accordion-toggle altHead"><i class="fa fa-plus">&nbsp;</i>Indecision</h6>
<div class="accordion-content">
<p>Nothing is so exhausting as indecision, and nothing is so futile...</p>
<div class="accordion">
<h6 class="accordion-toggle altHead"><i class="fa fa-plus">&nbsp;</i>Change and Growth</h6>
<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>
<h6 class="accordion-toggle altHead"><i class="fa fa-plus">&nbsp;</i>Enthusiasm</h6>
<div class="accordion-content">
<p>If you are not fired with enthusiasm, you will be fired with enthusiasm...</p>
</div>
<h6 class="accordion-toggle altHead"><i class="fa fa-plus">&nbsp;</i>Do Great Things</h6>
<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.

Second tab content goes here...

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.

Third tab content goes here...

When one door closes another opens. Expect that new door to reveal even greater wonders and glories and surprises.

Fourth tab content goes here...

It is better to light a small candle than to curse the darkness. Do or do not. There is no try. If you are never scared or embarrassed or hurt, it means you never take chances. You do not have to be a hero to do certain things, to compete. You can be just an ordinary person, sufficiently motivated to reach challenging goals.