<div id="cleanAccordionMain" class="cleanAccordion">
  <dl class="accordion">

    <dt class="tab_1 singleTab">
      <a href class="accordionSlide">
        <div class="accordionContent">
          <i class="fa fa-briefcase"></i>
          <h4>Basic Package</h4>
          <span class="details">Full Details <i class="fa fa-chevron-down"></i><span class="inactive">Inactive</span></span>
        </div>
      </a>
    </dt>
    <dd>
      <p><span class="inactive">Inactive</span> Something enticing to make you want to buy me <a class="upgrade" href="#">Upgrade Now<i class="fa fa-refresh"></i></a></p>
    </dd>
    <dt class="tab_2 singleTab">
      <a href class="accordionSlide">
        <div class="accordionContent">
          <i class="textOnly">Y</i>
          <h4>Yellow Package</h4>
          <span class="details">Full Details <i class="fa fa-chevron-down"></i><span class="inactive">Inactive</span></span>

        </div>
      </a>
    </dt>
    <dd>
      <p><span class="inactive">Inactive</span> Something enticing to make you want to buy me <a class="upgrade" href="#">Upgrade Now<i class="fa fa-refresh"></i></a></p>
    </dd>
    <dt class="tab_3 singleTab">
      <a href class="accordionSlide">
        <div class="accordionContent">
          <i class="textOnly">B</i>
          <h4>Blue Package</h4>
          <span class="details">Full Details <i class="fa fa-chevron-down"></i><span class="inactive">Inactive</span></span>
        </div>
      </a>
    </dt>
    <dd>
      <p><span class="inactive">Inactive</span> Something enticing to make you want to buy me <a class="upgrade" href="#">Upgrade Now<i class="fa fa-refresh"></i></a></p>
    </dd>
    <dt class="tab_4 singleTab">
      <a href class="accordionSlide">
        <div class="accordionContent">
          <i class="textOnly">G</i>
          <h4>Green Package</h4>
          <span class="details">Full Details <i class="fa fa-chevron-down"></i><span class="inactive">Inactive</span></span>
        </div>
      </a>
    </dt>
    <dd>
      <p><span class="inactive">Inactive</span> Something enticing to make you want to buy me <a class="upgrade" href="#">Upgrade Now<i class="fa fa-refresh"></i></a></p>
    </dd>
  </dl>

</div>
*
  font-family: 'Montserrat', sans-serif
  
$primOrange: rgb(231, 150, 33) // #E79621
$primYellow: rgb(240, 195, 18) // #F0C312
$primBlue: rgb(59, 151, 214) // #3B97D6
$primGreen: rgb(79, 182, 111) // #4FB66F
$primWhite: #fff
$primRed: #CD3333

$fontSize: 24px
$vertPadding: 20px

body
  background: #222
#cleanAccordionMain
  background: #fff
  max-width: 680px
  margin: 0 auto
  padding: 0
  *
    margin: 0
    padding: 0
  span.inactive
    display: inline-block
    background: $primRed
    text-align: center
    padding: 2px 0
    border-radius: 2px
    width: 60px
    font-size: 11px
    color: #fff
  dl.accordion
    overflow: hidden
    &:hover *
      cursor: default
    &:after
      content: "."
      display: block
      height: 0
      clear: both
      visibility: hidden
    dt
      padding: 0
      margin: 0
      background-color: transparent
      overflow: hidden
      margin-bottom: 0px
      position: relative
      &.accordionLastDt
        margin-bottom: none
      a
        color: $primWhite
        text-decoration: none
        display: block
        font-weight: bold
        padding: $vertPadding ($vertPadding / 1.3)
        &:hover, &:hover *
          cursor: pointer
        &:focus
          outline: none
      &.tab_1 a
        background-color: $primOrange
        i, span
          background-color: darken($primOrange, 12%)
      &.tab_2 a
        background-color: $primYellow
        i, span
          background-color: darken($primYellow, 12%)
      &.tab_3 a
        background-color: $primBlue
        i, span
          background-color: darken($primBlue, 12%)
      &.tab_4 a
        background-color: $primGreen
        i, span
          background-color: darken($primGreen, 12%)
      i
        font-size: $fontSize / 2.5
        margin: $fontSize - ($fontSize / 1.3)
        float: left
        padding: 4px 6px
        border-radius: 4px
        font-style: normal
        margin-right: 15px
        &.fa
          padding: 4px 5px
      h4
        font-size: $fontSize
        display: inline-block
      span.details
        float: right
        font-family: arial, sans-serif
        padding: 12px 12px 8px 12px
        position: relative
        margin-top: -($vertPadding / 4)
        &:hover
          cursor: pointer
        i
          background: none
          float: right
          padding: 0
          margin-right: 0
          margin-left: 20px
        span.inactive
          position: absolute
          left: -80px
          top: ($vertPadding / 3)
          background: $primRed
    dd
      padding: 0
      margin: 0
      padding: 10px 15px 10px 10px
      text-indent: none
      background-color: transparent
      color: #333333
      &.accordionLastDd
        position: relative
        border-bottom: 0
      p
        font-size: 14px
        padding: 8px 0
        a
          float: right
          color: saturate(darken($primBlue, 15%), 20%)
          text-decoration: none
          i
            margin-left: 15px
          &:hover
            text-decoration: underline
            cursor: pointer
            i
              text-decoration: none
              cursor: pointer
View Compiled
// SIMPLE JQUERY ACCORDION
// INSPIRED BY: https://css-tricks.com/snippets/jquery/simple-jquery-accordion/

$(document).ready(function($) {
	
	var $animSpeed = 200;
	
	$('#cleanAccordionMain > .accordion > dt:last-of-type').addClass('accordionLastDt');
	$('#cleanAccordionMain > .accordion > dd:last-of-type').addClass('accordionLastDd');
	$('#cleanAccordionMain > .accordion > dt:first-of-type').addClass('accordionFirstDt');
	
	$('#cleanAccordionMain > .accordion dd').hide();
	$('#cleanAccordionMain > .dropDown1 > dd:first-of-type').slideDown($animSpeed);
	$('#cleanAccordionMain > .dropDown1 > dt:first-child > a').addClass('selected').parent().addClass('selected');
	$('#cleanAccordionMain > .accordion dt a.accordionSlide').click(function(){
		if ($(this).hasClass('selected')) {
			$(this).removeClass('selected').parent().removeClass('selected');
			$(this).parent().next().slideUp($animSpeed);
			
		} else {
			$('#cleanAccordionMain > .accordion dt a.accordionSlide').removeClass('selected').parent().removeClass('selected');
			$(this).addClass('selected').parent().addClass('selected');
			$('#cleanAccordionMain > .accordion dd').slideUp($animSpeed);
			$(this).parent().next().slideDown($animSpeed);
		}
		return false;
	});
	
	//$('#cleanAccordionMain dd').addClass('clearfix');
	
});

External CSS

  1. https://fonts.googleapis.com/css?family=Montserrat:400, 700
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/85807/font-awesome.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/85807/lastoftype.min.js