Bootstrap导航栏中的手风琴下拉菜单

Question

Please refer: APEC Energy

In the right corner, there is a user icon. On clicking it, we can see an accordion in the dropdown menu. How can this be achieved?

I have put together a JSFiddle with the basic code. I removed all my trials of the accordion because whatever I tried only breaks the code.

My code for the navbar:

<!-- Navigation -->
<div id="gxcpl" class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand hidden-lg hidden-md" href="#">Living Ahimsa</a>
            <a class="hidden-sm hidden-xs" href="#">
                <img class="gxcpl-logo" src="assets/images/logo.png" />
            </a>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse navbar-menubuilder">
            <ul class="nav navbar-nav navbar-left">
                <li class="active"><a href="/">Home</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i> Bio Homes</a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Introduction</a></li>
                        <li><a href="#">Innovation</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Development</a></li>
                        <li><a href="#">Future</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i> Bio Energy</a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">BIO Heating</a></li>
                        <li><a href="#">BIO Lighting</a></li>
                        <li><a href="#">BIO Air</a></li>
                        <li><a href="#">BIO Frequency</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i> Bio Water</a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Whole House Filter</a></li>
                        <li><a href="#">Reverse Osmosis</a></li>
                        <li><a href="#">Portable Filters</a></li>
                        <li><a href="#">Portable Storage</a></li>
                        <li><a href="#">Rain Water Storage</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i> Bio Garden</a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Bio Grow System</a></li>
                        <li><a href="#">Bio Watering System</a></li>
                        <li><a href="#">Indoor Growing</a></li>
                        <li><a href="#">Organic Seeds</a></li>
                        <li><a href="#">Organic Plants</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i> Bio Health</a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Core Health</a></li>
                        <li><a href="#">Oils</a></li>
                        <li><a href="#">Raw Foods</a></li>
                        <li><a href="#">Natural Supplements</a></li>
                        <li><a href="#">Protien</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i> <i class="fa fa-user-o"></i></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Shopping Basket</a></li>
                        <li><a href="#">Contact Us</a></li>
                        <li><a href="#">Call Request</a></li>
                        <li><a href="#">Account Settings</a></li>
                        <li><a href="#">Login/Register</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- Navigation -->

Answer 1

Your JSFiddle seems to have accordion menu. I don't understand, what behaviour is missing?