Bootstrap Snippet Simple Accordion Collapse Menu using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="accordianmenu">
    <ul>
        <li class="active">
            <p>mainlink1</p>
            <ul>
                <li><a href="#">sublink1</a></li>
                <li><a href="#">sublink1</a></li>
                <li><a href="#">sublink1</a></li>
                <li><a href="#">sublink1</a></li>
            </ul>
        </li>
        <li>
            <p>mainlink2</p>
            <ul>
                <li><a href="#">sublink1</a></li>
                <li><a href="#">sublink1</a></li>
                <li><a href="#">sublink1</a></li>
                <li><a href="#">sublink1</a></li>
            </ul>
        </li>
        <li>
            <p>mainlink3</p>
            <ul>
                <li><a href="#">sublink1</a></li>
                <li><a href="#">sublink1</a></li>
                <li><a href="#">sublink1</a></li>
                <li><a href="#">sublink1</a></li>
            </ul>
        </li>
        <li>
            <p>mainlink4</p>
            <ul>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
* {margin: 0; padding: 0;}
body {
    font-family: arial;
}
#accordianmenu {
    background: #6599e0;
    width: 250px;
    margin: 20px auto 0 20px;
    color: black;
}
#accordianmenu p {
    font-size: 12px;
    line-height: 34px;
    padding: 0 10px;
    cursor: pointer;
    margin:0;
    background: #c5c5c7; 
    border-bottom:1px solid black;
}
#accordianmenu p:hover {
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}
#accordianmenu li {
    list-style-type: none;
}
#accordianmenu ul ul li a {
    color: white;
    text-decoration: none;
    font-size: 11px;
    line-height: 27px;
    display: block;
    padding: 0 15px;
}
#accordianmenu ul ul li a:hover {
    background: black;
    color:white;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
$(document).ready(function(){
    $("#accordianmenu p").click(function(){
        $("#accordianmenu ul ul").slideUp();
        if(!$(this).next().is(":visible"))
        {
            $(this).next().slideDown();
        }
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Simple Accordion Collapse Menu"
Bootstrap 3.3.0 Snippet by klakshman318

Related: See More

Questions / Comments:

"Simple Accordion Collapse Menu" Bootstrap 3.3.0 Snippet by klakshman318

Related: See More

Questions / Comments:

"Simple Accordion Collapse Menu"
Bootstrap 3.3.0 Snippet by klakshman318