A Pen by mudit jain on CodePen.
Created
August 10, 2017 19:57
-
-
Save mhackersu/61d62d1987b554d6faceda1a53d66e43 to your computer and use it in GitHub Desktop.
Basic Accordations
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="accordian"> | |
<ul> | |
<li> | |
<h3>Dashboard</h3> | |
<ul> | |
<li><a href="#">Reports</a> | |
</li> | |
<li><a href="#">Search</a> | |
</li> | |
<li><a href="#">Graphs</a> | |
</li> | |
<li><a href="#">Settings</a> | |
</li> | |
</ul> | |
</li> | |
<!-- we will keep this LI open by default --> | |
<li class="active"> | |
<h3>Tasks</h3> | |
<ul> | |
<li><a href="#">Today's tasks</a> | |
</li> | |
<li><a href="#">Urgent</a> | |
</li> | |
<li><a href="#">Overdues</a> | |
</li> | |
<li><a href="#">Recurring</a> | |
</li> | |
<li><a href="#">Settings</a> | |
</li> | |
</ul> | |
</li> | |
<li> | |
<h3></span>Calendar</h3> | |
<ul> | |
<li><a href="#">Current Month</a> | |
</li> | |
<li><a href="#">Current Week</a> | |
</li> | |
<li><a href="#">Previous Month</a> | |
</li> | |
<li><a href="#">Previous Week</a> | |
</li> | |
<li><a href="#">Next Month</a> | |
</li> | |
<li><a href="#">Next Week</a> | |
</li> | |
<li><a href="#">Team Calendar</a> | |
</li> | |
<li><a href="#">Private Calendar</a> | |
</li> | |
<li><a href="#">Settings</a> | |
</li> | |
</ul> | |
</li> | |
<li> | |
<h3>Favourites</h3> | |
<ul> | |
<li><a href="#">Global favs</a> | |
</li> | |
<li><a href="#">My favs</a> | |
</li> | |
<li><a href="#">Team favs</a> | |
</li> | |
<li><a href="#">Settings</a> | |
</li> | |
</ul> | |
</li> | |
</ul> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(function(){ | |
$('#accordian h3').click(function(){ | |
//hiding all open accordian | |
$(this).parent().parent().find('ul').slideUp(); | |
//looking if any ul is not open then slide down accordiation | |
if(!$(this).next().is(":visible")){ | |
$(this).next().slideDown(); | |
} | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url(https://fonts.googleapis.com/css?family=Nunito); | |
* {margin: 0; padding: 0;} | |
body { | |
background: #4EB889; | |
font-family: Nunito, arial, verdana; | |
} | |
#accordian { | |
background: #004050; | |
width: 250px; | |
margin: 100px auto 0 auto; | |
color: white; | |
} | |
/*heading styles*/ | |
#accordian h3 { | |
font-size: 12px; | |
line-height: 34px; | |
padding: 0 10px; | |
cursor: pointer; | |
/*fallback for browsers not supporting gradients*/ | |
background: #003040; | |
background: linear-gradient(#003040, #002535); | |
} | |
/*iconfont styles*/ | |
#accordian h3 span { | |
font-size: 16px; | |
margin-right: 10px; | |
} | |
/*list items*/ | |
#accordian li { | |
list-style-type: none; | |
} | |
/*links*/ | |
#accordian ul ul li a { | |
color: white; | |
text-decoration: none; | |
font-size: 11px; | |
line-height: 27px; | |
display: block; | |
padding: 0 15px; | |
/*transition for smooth hover animation*/ | |
transition: all 0.15s; | |
} | |
/*hover effect on links*/ | |
#accordian ul ul li a:hover { | |
background: #003545; | |
border-left: 5px solid lightgreen; | |
} | |
/*Lets hide the non active LIs by default*/ | |
#accordian ul ul { | |
display: none; | |
} | |
#accordian li.active ul { | |
display: block; | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment