Cacher is the code snippet organizer for pro developers

/* FAQ - Simple Accordion.
  ========================*/
 /*   
*********** HTML File *************
<div class="faq">

  <div class="faq__item">
    <a href="#" class="faq-title">Question 1</a>
    <div class="faq-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt blanditiis quam ullam distinctio aliquid, ad aspernatur temporibus quis labore, est quidem voluptatum. Asperiores similique totam veritatis inventore velit distinctio, ullam!</p>
    </div>
  </div>

  <div class="faq__item">
    <a href="#" class="faq-title">Question 2</a>
    <div class="faq-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt blanditiis quam ullam distinctio aliquid, ad aspernatur temporibus quis labore, est quidem voluptatum. Asperiores similique totam veritatis inventore velit distinctio, ullam!</p>
    </div>
  </div>

  <div class="faq__item">
    <a href="#" class="faq-title">Question 3</a>
    <div class="faq-content">
      p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt blanditiis quam ullam distinctio aliquid, ad aspernatur temporibus quis labore, est quidem voluptatum. Asperiores similique totam veritatis inventore velit distinctio, ullam!</p>
    </div>
  </div>

</div>

*********** CSS File *************
.faq {
  width: 600px;
  margin: 30px auto;
}

.faq-title {
  .transition(background-color .2s);
  display: block;
  padding: 5px 10px;

  color: #000;
  text-decoration: none;
  background-color: @grey_light;
  border-bottom: 1px solid darken(@grey_light, 10%);
}

.faq-title :hover {
  background-color: darken(@grey_light, 5%);
}

.faq-content {
  padding: 5px 10px;
  font-size: @small + 2;
  display: none;
}

*/

/* JS file
  ========================*/
  
// pluggable event listener to the headers list  
$(".faq-title").on("click", function(e) {
  
 // turn off default properties
  e.preventDefault();
  
  // create a variable for the current item
  var $this = $(this);

  // check for the presence of class active
  if( !$this.hasClass("active") ) {
    
    // a collapsible block content
    $(".faq-content").slideUp();
    
    // remove active class
    $(".faq-title").removeClass("active");
    
  }
  
  // set or remove the class active
  $this.toggleClass("active");
  
  // collapse or expand block
  $this.next().slideToggle();

});