Toggles

Create expandable Q&A toggles.

CSS/JS files (add code to <HEAD> section):


<!-- DC Toggle CSS -->
<link type="text/css" rel="stylesheet" href="dreamcodes/accordion_toggle/css/tsc_accordion_toggle.css" />

<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="dreamcodes/jquery.min.js"></script> <!-- (do not call twice) -->

<!-- DC Toggle JS -->
<script type="text/javascript" src="dreamcodes/accordion_toggle/js/tsc_accordion_toggle.js"></script>

          

Toggle Style 1

+ expand all

How long would it take to travel to the nearest Star?
It would take a modern spaceship 70,000 years to get to the nearest star to earth.
Does a heart ever stop?
Every time you sneeze your heart stops a second.
Are donkeys dangerous?
Donkeys kill more people annually than plane crashes.

View code:


<!-- DC Toggle 1 Start -->
<div class="tsc_toggle_container" style="width:80%;">  
  + <a href="#" class="toggleCollapse" rel="style1">expand all</a><br /><br />
  <div class="tsc_toggle style1">
    <div><a href="" class="tsc_toggle_link">How long would it take to travel to the nearest Star?</a></div>
    <div class="tsc_toggle_box">It would take a modern spaceship 70,000 years to get to the nearest star to earth.</div>
  </div>
  <div class="tsc_toggle style1">
    <div><a href="" class="tsc_toggle_link">Does a heart ever stop?</a></div>
    <div class="tsc_toggle_box">Every time you sneeze your heart stops a second.</div>
  </div>
  <div class="tsc_toggle style1">
    <div><a href="" class="tsc_toggle_link">Are donkeys dangerous?</a></div>
    <div class="tsc_toggle_box">Donkeys kill more people annually than plane crashes.</div>
  </div>
</div>
<!-- DC Toggle 1 End -->

          

Toggle Style 2

+ expand all

How powerful is the human mind?
The human brain has the capacity to store everything that you experience.
How long is the DNA?
If your DNA was stretched out it would reach to the moon 6,000 times.
How long can the brain survive without oxygen?
The brain can stay alive for 4 to 6 minutes without oxygen. After that cells begin die.

View code:


<!-- DC Toggle 2 Start -->
<div class="tsc_toggle_container" style="width:80%;">
  + <a href="#" class="toggleCollapse" rel="style2">expand all</a><br /><br />
  <div class="tsc_toggle style2">
    <div><a href="" class="tsc_toggle_link">How powerful is the human mind?</a></div>
    <div class="tsc_toggle_box">The human brain has the capacity to store everything that you experience.</div>
  </div>
  <div class="tsc_toggle style2">
    <div><a href="" class="tsc_toggle_link">How long is the DNA?</a></div>
    <div class="tsc_toggle_box">If your DNA was stretched out it would reach to the moon 6,000 times.</div>
  </div>
  <div class="tsc_toggle style2">
    <div><a href="" class="tsc_toggle_link">How long can the brain survive without oxygen?</a></div>
    <div class="tsc_toggle_box">The brain can stay alive for 4 to 6 minutes without oxygen. After that cells begin die.</div>
  </div>
</div>
<!-- DC Toggle 2 End -->
  
          

Toggle Style 3

+ Stage 1: Shock

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi placerat massa id libero feugiat placerat. Nulla consequat sollicitudin dignissim. Praesent vehicula risus eget elit rutrum porttitor.

+ Stage 2: Disbelief

Pellentesque vel mi enim. Phasellus scelerisque turpis sed leo ultricies semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pellentesque lacinia felis nec vehicula. Nam libero sem, auctor non tempor a, lacinia nec urna.

+ Stage 3: Acceptance

Ut bibendum tellus ac tortor mollis elementum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam egestas quam id purus dignissim porta. Cras augue quam, suscipit at aliquam tempor, molestie nec dolor.

View code:


  <!-- DC Toggle 3 Start -->
  <dl class="tsc_accordion2" style="width:80%;">
    <dt class="current">+ Stage 1: Shock</dt>
    <dd class="current">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi placerat massa id libero feugiat placerat. Nulla consequat sollicitudin dignissim. Praesent vehicula risus eget elit rutrum porttitor.</p>
    </dd>
    <dt>+ Stage 2: Disbelief</dt>
    <dd>
      <p>Pellentesque vel mi enim. Phasellus scelerisque turpis sed leo ultricies semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pellentesque lacinia felis nec vehicula. Nam libero sem, auctor non tempor a, lacinia nec urna.</p>
    </dd>
    <dt>+ Stage 3: Acceptance</dt>
    <dd>
      <p>Ut bibendum tellus ac tortor mollis elementum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam egestas quam id purus dignissim porta. Cras augue quam, suscipit at aliquam tempor, molestie nec dolor.</p>
    </dd>
  </dl>
  <!-- DC Toggle 3 End -->

          

Toggle Style 4


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque, tortor vel aliquam elementum, lectus urna accumsan orci, eget venenatis ligula nisl quis orci. Integer rhoncus venenatis aliquam.

Nullam iaculis vehicula nunc et imperdiet. Nullam gravida nunc libero. Suspendisse interdum lacus et tellus placerat condimentum. Sed eget semper urna. Integer hendrerit convallis ipsum id tristique.

Donec lacinia, odio nec lacinia feugiat, mauris sem condimentum velit, sollicitudin malesuada velit ante quis quam. Fusce non scelerisque augue. Cras volutpat risus a metus fermentum placerat.

Nulla adipiscing arcu sed odio semper lobortis. Curabitur tincidunt nulla metus. Sed faucibus sem vitae libero eleifend ac ullamcorper mauris aliquam.Sed sed odio tellus. Fusce commodo suscipit augue.

View code:


<!-- DC Toggle 4 Start -->
<section class="tsc_ac-container" style="width:80%;">
  <div>
    <input id="ac-1" name="accordion-1" type="checkbox" />
    <label for="ac-1">The Firm</label>
    <article class="ac-small">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque, tortor vel aliquam elementum, lectus urna accumsan orci, eget venenatis ligula nisl quis orci. Integer rhoncus venenatis aliquam.</p>
    </article>
  </div>
  <div>
    <input id="ac-2" name="accordion-1" type="checkbox" />
    <label for="ac-2">Why Us</label>
    <article class="ac-medium">
      <p>Nullam iaculis vehicula nunc et imperdiet. Nullam gravida nunc libero. Suspendisse interdum lacus et tellus placerat condimentum. Sed eget semper urna. Integer hendrerit convallis ipsum id tristique.</p>
    </article>
  </div>
  <div>
    <input id="ac-3" name="accordion-1" type="checkbox" />
    <label for="ac-3">Services</label>
    <article class="ac-large">
      <p>Donec lacinia, odio nec lacinia feugiat, mauris sem condimentum velit, sollicitudin malesuada velit ante quis quam. Fusce non scelerisque augue. Cras volutpat risus a metus fermentum placerat. </p>
    </article>
  </div>
  <div>
    <input id="ac-4" name="accordion-1" type="checkbox" />
    <label for="ac-4">Contact us</label>
    <article class="ac-large">
      <p>Nulla adipiscing arcu sed odio semper lobortis. Curabitur tincidunt nulla metus. Sed faucibus sem vitae libero eleifend ac ullamcorper mauris aliquam.Sed sed odio tellus. Fusce commodo suscipit augue. </p>
    </article>
  </div>
</section>
<!-- DC Toggle 4 End -->

          


© TemplateAccess