jQuery accordian

by Alvin Olavarrieta

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="accordion">
  <ul>
    <li>
      <a href="#" class="accordion-link clearfix">
        <section>Where can I find the per-minute mobile rates to countries not included in my plan?</section>
        <span></span>
      </a>
      <ul class="faq-content">
        <li>
          <div class="faq-content-show">If you need to call a mobile phone in a country that’s not part of your plan, you can use the Rate Finder located in the tools module near the bottom of every plan page to see the per-minute rates.
          </div>
        </li>
      </ul>
    </li>
    <li>
      <a href="#" class="accordion-link clearfix">
        <section>Where can I find the per-minute mobile rates to countries not included in my plan?</section>
        <span></span>
      </a>
      <ul class="faq-content">
        <li>
          <div class="faq-content-show">If you need to call a mobile phone in a country that’s not part of your plan, you can use the Rate Finder located in the tools module near the bottom of every plan page to see the per-minute rates.
          </div>
        </li>
      </ul>
    </li>
		<li>
      <a href="#" class="accordion-link clearfix">
        <section>Where can I find the per-minute mobile rates to countries not included in my plan?</section>
        <span></span>
      </a>
      <ul class="faq-content">
        <li>
          <div class="faq-content-show">If you need to call a mobile phone in a country that’s not part of your plan, you can use the Rate Finder located in the tools module near the bottom of every plan page to see the per-minute rates.
          </div>
        </li>
      </ul>
    </li>
  </ul>
</div>

CSS

.accordion {
  padding: 20px;
}

.accordion ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.accordion > ul > li + li {
  border-top: 1px solid #ddd;
}

.accordion ul > li > a {
  text-decoration: none;
  padding: 15px 5px;
  display: block;
}
.accordion-link > section {
	float: left;
}
.accordion-link > section:before {
  content: 'Q.';
  padding-right: .313em;
  font-weight: 600;
}
.accordion-link > span {
	float: right;
}
.accordion-link > span:after {
  content: '+';
  color: #ffa326;
  font-weight: 300;
  margin-right: 1.25em;
	float: right;
  -webkit-transform: scale(2);
  -ms-transform: scale(2);
  transform: scale(2);
}

.accordion-link.expanded span:after {
  content: '\2212';
  -webkit-transform: scale(2.5);
  -ms-transform: scale(2.5);
  transform: scale(2.5);
}

.faq-content-show {
	padding:0 5px 10px;
}
.faq-content-show:before {
  content: 'A. ';
  color: #ff8300;
  font-weight: 700;
}

JavaScript

$(".accordion-link").on('click', function(a) {
  a.preventDefault();
  if ($(this).hasClass("expanded")) {
    $(this).removeClass("expanded");
    $(this).parent().children("ul").stop(true, true).slideUp("normal")
  } else {
    $(".accordion-link.expanded").removeClass("expanded");
    $(this).addClass("expanded");
    $(".faq-content").filter(":visible").slideUp("normal");
    $(this).parent().children("ul").stop(true, true).slideDown("normal")
  }
});
$(".faq-content").hide()