<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');
});
