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