How to create Collapsible Drop Down menu?

Question

I needed to create collapsible drop down as shown in attached image. When user click the option group title it should be open and collapse as per attached image. Please help me.

Thanks.

Answer 1

Here is a sample-

@media only screen and (min-width : 992px) {
        .mtop {margin-top:20px;}
        .menu-ico-collapse {
            font-size: 8px;
            margin-left: 2px;
            float: none;
        }


        /* MAIN MENU */
            #mainmenu {font-size: 12px;}  

            #mainmenu {
                background: #333;
                height: 50px;
            }

            .pos-absolute {
                position: absolute;
                border-left: 2px solid #87a237;
                z-index: 999;
            }
            .menu-ico-collapse {
                font-size: 8px;
                margin-left: 2px;
            }

            #mainmenu .list-group {
              margin-bottom: 20px;
              padding-left: 0;
              float: left;
              display: inline;
            }
            #mainmenu .list-group-item {
              display: block;
              height: 50px;
              margin-bottom: -1px;
              background-color: #333;
              border: 0;
              line-height: 27px;
            }
            #mainmenu .list-group-item:first-child {
              border-top-right-radius: 0;
              border-top-left-radius: 0;
            }
            #mainmenu .list-group-item:last-child {
              margin-bottom: 0;
              border-bottom-right-radius: 0;
              border-bottom-left-radius: 0;
            }
            #mainmenu .list-group-item > .badge {
              float: right;
            }
            #mainmenu .list-group-item > .badge + .badge {
              margin-right: 5px;
            }
            #mainmenu a.list-group-item {
              color: #fff;
              font-weight: normal;
              border: 0;
              border-right: 1px solid #7c7c7c;
                -webkit-transition: background-color 100ms linear;
                -moz-transition: background-color 100ms linear;
                -o-transition: background-color 100ms linear;
                -ms-transition: background-color 100ms linear;

            }
            #mainmenu a.list-group-item .list-group-item-heading {
              color: #333333;
            }
            #mainmenu a.list-group-item:hover,
            #mainmenu a.list-group-item:focus {
              text-decoration: none;
              background-color: #87a237;
            }
            #mainmenu a.list-group-item.active,
            #mainmenu a.list-group-item.active:hover,
            #mainmenu a.list-group-item.active:focus {
              z-index: 2;
              color: #ffffff;
              background-color: #87a237;
              border: 0;
            }

            #mainmenu .panel {
              margin-bottom: 20px;
              background-color: #ffffff;
            border: 0;
              border-radius: 0px;
              -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
              box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
            }
            /* MAIN MENU end */
        }


<div class="container">
 id="mainmenu" class="row">
          <div class="list-group panel visible-md visible-lg">
              <a href="#" class="list-group-item"><i class="glyphicon glyphicon-home"></i></a>
          </div>
          <div class="list-group panel">
            <a href="#menupos1" class="list-group-item" data-toggle="collapse" data-parent="#mainmenu">Pos1 <span class="menu-ico-collapse"><i class="glyphicon glyphicon-chevron-down"></i></span></a>
            <div class="collapse pos-absolute" id="menupos1">
              <a href="#submenu1" class="list-group-item sub-item" data-toggle="collapse" data-parent="#submenu1">SubPos1 <span class=" menu-ico-collapse"><i class="glyphicon glyphicon-chevron-down"></i></span></a>
                  <div class="collapse list-group-submenu" id="submenu1">
                    <a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1">SubSubPos1</a>
                    <a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1">SubSubPos2</a>
                    <a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1">SubSubPos3</a>
                    <a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1">SubSubPos4</a>
                  </div>
             <a href="#" data-toggle="collapse" data-target="#menupos1" class="list-group-item sub-item">SubPos2</a>
             <a href="#" data-toggle="collapse" data-target="#menupos1" class="list-group-item sub-item">SubPos3</a>
             <a href="#" data-toggle="collapse" data-target="#menupos1" class="list-group-item sub-item">SubPos4</a>
             <a href="#" data-toggle="collapse" data-target="#menupos1" class="list-group-item sub-item">SubPos5</a>                                                                    
              </div>
            </div>

</div>
</div>

Answer 2

Added sample using bootstrap framework.

Answer 3

If You are trying to Group items i would recommend that you use bootstrap-select

Its available here Bootstrap-select