Slide-It

Collapsing Content

Should never be used to conceal main content.

Might not be Accessible, particularly if multiple instances are nested in each other - further testing required

Slide It

HEADING

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.

Close

HEADING

Close

Implementation

<!-- slide div -->
<div id="gallery-slide-it">
    <h2 class="slide-trigger">
    <a id="" name="">HEADING</a></h2>
        <div class="slide-div">
            <!--EDIT AREA-->
               Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  
            <!--FINISH EDIT AREA-->
        <h3><a class="slide-close" href="#">Close</a></h3>
        </div>

    <h2 class="slide-trigger">
    <a id="" name="">HEADING</a></h2>
        <div class="slide-div">
            <!--EDIT AREA-->
               Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  
            <!--FINISH EDIT AREA-->
        <h3><a class="slide-close" href="#">Close</a></h3>
        </div>
</div>
<!-- /slide div -->

Scripts and Styles

<!-- slide-it CSS --> 
<link href="%globals_asset_url:759%" rel="stylesheet" type="text/css" media="screen" />

Accordian

Heading

Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus.

Heading

Implementation

<h4>Accordian</h4>
<div id="accordion-2">
  <h3><a href="#">Heading</a></h3>
  <div>
  <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
  </div>

  <h3><a href="#">Heading</a></h3>
  <div>
  <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  </div>
</div>

Scripts and Styles


<!-- accordion --> 
<link rel="stylesheet" type="text/css" href="%globals_asset_url:216193%" media="screen" /> 
 
Footer Script area   
 <!-- accordion --> 
 <!-- Jquery ui --> 
 <script src="%globals_asset_url:284396%"></script> 
 <!-- Jquery accordion --> 
 <script src="%globals_asset_url:217829%"></script>