Accordions

FAQ

The FAQ class ".faq" can be used to create a simple accordion styled collapsing FAQ system. The class works by hiding all html elements between H2 headers. The content under an H2 header can be exposed by clicking on the H2 header. Note: WYSIWYG editors may not always play nicely with the FAQ system.

<div class="faq">
<h2>Question 1</h2>

<p>answer1 --Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut.</p>

<h2>Question 2</h2>

<p>Answer 2 -- Magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut.</p>

<h2>Question 3</h2>

<p>Answer 3 --Solestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut.</p>

</div>

Question 1

answer1 --Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut.

Question 2

Answer 2 -- Magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut.

Question 3

Answer 3 --Solestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut.

FAQ After

The FAQ helper class ".faq-after" can be used to create a simple accordion styled collapsing FAQ system with the arrow displayed after the h2.

<div class="faq-after">
<h2>Question 1</h2>

<p>answer1 --Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut.</p>

<h2>Question 2</h2>

<p>Answer 2 -- Magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut.</p>

</div>

Question 1

answer1 -- Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut.

Question 2

Answer 2 -- Solestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut.

FAQ Plus Minus

The FAQ classes ".faq-plus-minus” and “.faq-plus-minus-content” can be used to create a simple accordion FAQ system with plus/minus icons. It works by hiding all HTML elements with a class of “.faq-plus-minus-content”. Clicking on the element with class of “.faq-plus-minus” will expose the content that immediately follows that element.

The classes added to the outer div provide the different styling options: ".faq-plus-minus-block-style-gray", ".faq-plus-minus-block-style-white" or ".faq-plus-minus-block-style-transparent".

Question 1

Answer 1 --Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Question 1

Answer 1 --Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Question 1

Question 1 --Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


    <div class="faq-plus-minus-block-style-gray">
      <div class="faq-plus-minus">
        <div>Question 1</div>
      </div>
      <div class="faq-plus-minus-content">
        <p>
          Answer 1 --Excepteur sint occaecat cupidatat non proident, sunt in culpa
          qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
    </div>


    <div class="faq-plus-minus-block-style-white">
      <div class="faq-plus-minus">
        <div>Question 1</div>
      </div>
      <div class="faq-plus-minus-content">
        <p>
          Answer 1 --Excepteur sint occaecat cupidatat non proident, sunt in culpa
          qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
    </div>


    <div class="faq-plus-minus-block-style-transparent">
      <div class="faq-plus-minus">
        <div>Question 1</div>
      </div>
      <div class="faq-plus-minus-content">
        <p>
          Answer 1 --Excepteur sint occaecat cupidatat non proident, sunt in culpa
          qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
    </div>

FAQ Plus Minus with Nested Items

Question 1

Answer 1 --Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Question A - Nested