Based on HTML5 folding Card drop-down menu plugin Tutorial

First, the HTML structure
<div class= "Container" >

<div class= "Card-drop" >

<a class= ' Toggle ' href= "#" >

<i class= ' fa fa-suitcase ' ></i>

<span class= ' label-active ' > Mobile advertising platform </span>

</a>

<ul>

<li class= ' active ' >

<a data-label= "Everyting" href= "#" ><i class= ' fa fa-suitcase ' ></i> mobile advertising platform </a>

</li>

<li>

<a data-label= "Design" href= "#" ><i class= ' fa fa-magic ' ></i> keymob mobile advertising platform </a>

</li>

<li>

<a data-label= "Ui-ux" href= "#" ><i class= ' FA Fa-bolt ' ></i> Multi-League mobile advertising platform </a>

</li>

<li>

<a data-label= "Print" href= "#" ><i class= ' fa fa-tint ' ></i> Mango Mobile ads </a>

</li>

<li>

<a data-label= "Photography" href= "#" ><i class= ' fa fa-camera-retro ' ></i> have meter advertising platform </a>

</li>

<li>

<a data-label= "Photography" href= "#" ><i class= ' fa Fa-camera-retro ' ></i> Anwar Media </a>

</li>

</ul>

</div>

</div>


Second, JS structure
(function ($) {
var cards = $ ('. Card-drop '), Toggler = Cards.find ('. Toggle '), links = cards.find (' ul>li>a '), Li = links.parent (' li ') , Count = links.length, width = 100;
Li.each (function (i) {
$ (this). CSS (' Z-index ', count-i);
});
function setclosed () {
Li.each (function (index) {
$ (this). CSS (' top ', index * 4). css (' width ', width-index * 0.5 + '% '). CSS (' margin-left ', index * 0.25 + '% ');
});
Li.addclass (' closed ');
Toggler.removeclass (' active ');
}
Setclosed ();
Toggler.on (' MouseDown ', function () {
var $this = $ (this);
if ($this. is ('. Active ')) {
Setclosed ();
} else {
$this. addclass (' active ');
Li.removeclass (' closed ');
Li.each (function (index) {
$ (this). CSS (' Top ', * (index + 1)). CSS (' width ', ' 100% '). CSS (' margin-left ', ' 0px ');
});
}
});
Links.on (' click ', Function (e) {
var $this =$ (this), label = $this. Data (' label ');
icon= $this. Children (' I '). attr (' class ');
Li.removeclass (' active ');
if ($this. Parent (' Li '). Is (' active ')) {
$this. Parent (' Li '). Removeclass (' active ');
} else {
$this. Parent (' Li '). addclass (' active ');
}
Toggler.children (' span '). text (label);
Toggler.children (' i '). Removeclass (). addclass (icon);
Setclosed ();
E.preventdefault;
});
} (JQuery));

Keymob is the leading mobile advertising platform in China, which aggregates the mainstream mobile advertising platform at home and abroad, is a well-known mobile mobile advertising platform, and becomes the first choice of mobile advertising optimization for application developers.

Based on HTML5 folding Card drop-down menu plugin Tutorial