jquery accordion from sexy collection
A Pen by Mighty Shaban on CodePen.
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'> | |
<h1>Sexy Accordion</h1> | |
<ul class="accordion"> | |
<li> | |
<a>Lorem ipsum</a> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ipsum, fuga, in, obcaecati magni ullam nobis voluptas fugiat tenetur voluptatum quas tempora maxime rerum neque deserunt suscipit provident cumque et mollitia ex aspernatur porro minus sapiente voluptatibus eos at perferendis repellat odit aliquid harum molestias ratione pariatur adipisci. Aliquid, iure.</p> | |
</li> | |
<li> | |
<a>Repellat Odit Aliquid</a> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ipsum, fuga, in, obcaecati magni ullam nobis voluptas fugiat tenetur voluptatum quas tempora maxime rerum neque deserunt suscipit provident cumque et mollitia ex aspernatur porro minus sapiente voluptatibus eos at perferendis repellat odit aliquid harum molestias ratione pariatur adipisci. Aliquid, iure.</p> | |
</li> | |
<li> | |
<a>Dolor sit Amet</a> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ipsum, fuga, in, obcaecati magni ullam nobis voluptas fugiat tenetur voluptatum quas tempora maxime rerum neque deserunt suscipit provident cumque et mollitia ex aspernatur porro minus sapiente voluptatibus eos at perferendis repellat odit aliquid harum molestias ratione pariatur adipisci. Aliquid, iure.</p> | |
</li> | |
</ul> <!-- / accordion --> |
(function($) { | |
$('.accordion > li:eq(0) a').addClass('active').next().slideDown(); | |
$('.accordion a').click(function(j) { | |
var dropDown = $(this).closest('li').find('p'); | |
$(this).closest('.accordion').find('p').not(dropDown).slideUp(); | |
if ($(this).hasClass('active')) { | |
$(this).removeClass('active'); | |
} else { | |
$(this).closest('.accordion').find('a.active').removeClass('active'); | |
$(this).addClass('active'); | |
} | |
dropDown.stop(false, true).slideToggle(); | |
j.preventDefault(); | |
}); | |
})(jQuery); |
jquery accordion from sexy collection
A Pen by Mighty Shaban on CodePen.
// Font Size | |
@function calculateRem($size) | |
$remSize: $size / 16px | |
@return $remSize * 1rem | |
=font-size($size) | |
font-size: $size | |
font-size: calculateRem($size) | |
// transition | |
=transition($transition-property, $transition-time, $method) | |
-webkit-transition: $transition-property $transition-time $method | |
-moz-transition: $transition-property $transition-time $method | |
transition: $transition-property $transition-time $method | |
=size($width, $height) | |
width: $width | |
height: $height | |
$color: #4a6e78 | |
$border: 1px solid lighten( $color, 50% ) | |
body | |
font-family: 'Open Sans' | |
+font-size(13px) | |
font-weight: 300 | |
color: $color | |
h1 | |
text-align: center | |
+font-size(35px) | |
line-height: 1.8 | |
padding: 50px 0 | |
// ACCORDION | |
.accordion | |
max-width: 560px | |
margin: 0 auto 100px | |
border-top: $border | |
li | |
border-bottom: $border | |
position: relative | |
p | |
display: none | |
padding: 10px 25px 30px | |
color: lighten( $color, 15% ) | |
a | |
width: 100% | |
display: block | |
cursor: pointer | |
font-weight: 600 | |
line-height: 3 | |
+font-size(14px) | |
text-indent: 15px | |
user-select: none | |
&:after | |
+size (8px, 8px) | |
border-right: 1px solid $color | |
border-bottom: 1px solid $color | |
position: absolute | |
right: 10px | |
content: " " | |
top: 17px | |
transform: rotate(-45deg) | |
+transition(all, 0.2s, ease-in-out) | |
p | |
+font-size(13px) | |
line-height: 2 | |
padding: 10px | |
a.active:after | |
transform: rotate(45deg) | |
+transition(all, 0.2s, ease-in-out) | |