accordion without jqueryui

by gbos

HTML

<!-- HTML -->
<div id="accordion">
  <h4 class="accordion-toggle">1. Select country</h4>
  <div class="accordion-content default">
    <p>Cras malesuada ultrices augue molestie risus.</p>
  </div>
  <h4 class="accordion-toggle">2. Type of work</h4>
  <div class="accordion-content">
    <p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
    <p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
    <p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
    <p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
  </div>
  <h4 
  class="accordion-toggle t3">3. Select client</h4>
  <div class="accordion-content">
    <p>Vivamus facilisisnibh scelerisque laoreet.</p>
  </div>
  <h4 class="accordion-toggle">4. VAT rule</h4>
  <div class="accordion-content">
    <p>Vivamus facilisisnibh scelerisque laoreet.</p>
  </div>
</div>

CSS

body {
    font-family: Arial;
}

.accordion-toggle {cursor: pointer;}
.accordion-content {display: none; padding-left: 20px; color: #666;}
.accordion-content.default {display: block;}

#accordion h4 {
    border: 1px solid lightgrey;
    background-color: #eee;
    margin: 2px;
    padding: 5px 0 5px 10px;
    color: #777;
}

JavaScript

// http://uniondesign.ca/simple-accordion-without-jquery-ui/


$(document).ready(function($) {
    $('#accordion').find('.accordion-toggle').click(function(){

      //Expand or collapse this panel
      $(this).next().slideToggle('fast');

      //Hide the other panels
      $(".accordion-content").not($(this).next()).slideUp('fast');

    });
      
      $('button').click(function() {
          //Expand or collapse this panel
          $('.t3').next().slideToggle('fast');
    
          //Hide the other panels
          $(".accordion-content").not($('.t3').next()).slideUp('fast');
      });
      
  });