<script type=
"text/javascript"
src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
></script>
<script type=
"text/javascript"
>
$(document).ready(
function
() {
// Store variables
var
accordion_head = $(
'.accordion > li > a'
),
accordion_body = $(
'.accordion li > .sub-menu'
);
// Open the first tab on load
accordion_head.first().addClass(
'active'
).next().slideDown(
'normal'
);
// Click function
accordion_head.on(
'click'
,
function
(event) {
// Disable header links
event.preventDefault();
// Show and hide the tabs on click
if
($(
this
).attr(
'class'
) !=
'active'
){
accordion_body.slideUp(
'normal'
);
$(
this
).next().stop(
true
,
true
).slideToggle(
'normal'
);
accordion_head.removeClass(
'active'
);
$(
this
).addClass(
'active'
);
}
});
});
</script>
and this is my html
<
ul
class
=
"accordion"
>
<
li
id
=
"one"
class
=
"files"
>
<
a
href
=
"#one"
>My Files<
span
>10</
span
></
a
>
<
ul
class
=
"sub-menu"
>
<
li
><
a
href
=
"#"
><
em
>01</
em
>Sub Menu<
span
>1</
span
></
a
></
li
>
</
ul
>
</
li
>
<
li
id
=
"two"
class
=
"mail"
>
<
a
href
=
"#two"
>Mail<
span
>20</
span
></
a
>
<
ul
class
=
"sub-menu"
>
<
li
><
a
href
=
"#"
><
em
>01</
em
>Sub Menu<
span
>2</
span
></
a
></
li
>
</
ul
>
</
li
>
<
li
id
=
"three"
class
=
"cloud"
>
<
a
href
=
"#three"
>Cloud<
span
>30</
span
></
a
>
<
ul
class
=
"sub-menu"
>
<
li
><
a
href
=
"#"
><
em
>01</
em
>Sub Menu<
span
>3</
span
></
a
></
li
>
</
ul
>
</
li
>
<
li
id
=
"four"
class
=
"sign"
>
<
a
href
=
"#four"
>Sign Out</
a
>
<
ul
class
=
"sub-menu"
>
<
li
><
a
href
=
"#"
><
em
>01</
em
>Sub Menu</
a
></
li
>
</
ul
>
</
li
>
</
ul
>