Skip to content

Instantly share code, notes, and snippets.

@fotinakis
Created September 11, 2015 21:55
Show Gist options
  • Save fotinakis/54540f239f61ebd86b4b to your computer and use it in GitHub Desktop.
Save fotinakis/54540f239f61ebd86b4b to your computer and use it in GitHub Desktop.
(Material Design Light) MDL Accordion
// From @nickretallack - http://nickretallack.com/experiments/mdl/collapse/index.html
.mdl-accordion.mdl-accordion--opened
border-top: 1px solid #e0e0e0
border-bottom: 1px solid #e0e0e0
margin-top: -1px
.mdl-accordion.mdl-accordion--opened + .mdl-accordion.mdl-accordion--opened
border-top: none
margin-top: 0
.mdl-accordion .mdl-accordion__content-wrapper
overflow: hidden
.mdl-accordion .mdl-accordion__content
transition-property: margin-top
transition-duration: 0.2s
.mdl-accordion .mdl-accordion__icon
transition-property: transform
transition-duration: 0.2s
color: rgba(0,0,0,0.3)
position: absolute
right: 6px
margin-top: -3px
.mdl-accordion.mdl-accordion--opened .mdl-accordion__icon
transform: rotate(-180deg)
.mdl-accordion.mdl-accordion--opened .mdl-accordion__button
color: teal
.mdl-accordion.mdl-accordion--opened .mdl-accordion__content
margin-top: 0 !important
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--overlay-drawer-button">
<div class="mdl-layout__drawer">
<div class="mdl-navigation">
<a class="mdl-navigation__link">A link</a>
<div class="mdl-accordion">
<a class="mdl-navigation__link mdl-accordion__button">
<i class="material-icons mdl-accordion__icon mdl-animation--default">expand_more</i>
Some links
</a>
<div class="mdl-accordion__content-wrapper">
<div class="mdl-accordion__content mdl-animation--default">
<a class="mdl-navigation__link">This</a>
<a class="mdl-navigation__link">That</a>
<a class="mdl-navigation__link">The other</a>
</div>
</div>
</div>
<div class="mdl-accordion mdl-accordion--opened">
<a class="mdl-navigation__link mdl-accordion__button">
<i class="material-icons mdl-accordion__icon mdl-animation--default">expand_more</i>
Default to opened
</a>
<div class="mdl-accordion__content-wrapper">
<div class="mdl-accordion__content mdl-animation--default">
<a class="mdl-navigation__link">Here</a>
<a class="mdl-navigation__link">There</a>
</div>
</div>
</div>
<a class="mdl-navigation__link">Ordinary link</a>
<div class="mdl-accordion">
<a class="mdl-navigation__link mdl-accordion__button">
<i class="material-icons mdl-accordion__icon mdl-animation--default">expand_more</i>
Other links
</a>
<div class="mdl-accordion__content-wrapper">
<div class="mdl-accordion__content mdl-animation--default">
<a class="mdl-navigation__link">One</a>
<a class="mdl-navigation__link">Two</a>
<a class="mdl-navigation__link">Three</a>
<a class="mdl-navigation__link">Four</a>
</div>
</div>
</div>
<a class="mdl-navigation__link">Just a link</a>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function(){
$('.mdl-accordion__content').each(function(){
var content = $(this);
content.css('margin-top', -content.height());
});
$(document.body).on('click', '.mdl-accordion__button', function(){
$(this).parent('.mdl-accordion').toggleClass('mdl-accordion--opened');
});
});
</script>
@hammenm
Copy link

hammenm commented Oct 10, 2017

Thank you for the gist and the conversion to pure JS 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment