Edit in JSFiddle

<div class="dropdown">
    <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">fauzi <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li role="presentation" class="have-child">
            <a role="menuitem" tabindex="-1" data-toggle="collapse" data-parent="#accordion" href="#profile">Profile Page
            </a>
                <ul id="profile" class="panel-collapse collapse">
                    <li><a href="profile">Visitor Message</a>
                    </li>
                    <li><a href="about-me">About Me</a>
                    </li>
                </ul>
        </li>
        <li role="presentation" class="have-child">
            <a role="menuitem" tabindex="-1" data-toggle="collapse" data-parent="#accordion" href="#activities">Activities
            </a>
                <ul id="activities" class="panel-collapse collapse">
                    <li><a href="posts">All Post</a>
                    </li>
                    <li><a href="articles">All Article</a>
                    </li>
                </ul>
        </li>
        <li role="presentation" class="have-child">
            <a role="menuitem" tabindex="-1" data-toggle="collapse" data-parent="#accordion" href="#pm">Private Message
            </a>
                <ul id="pm" class="panel-collapse collapse">
                    <li><a href="inbox">Inbox</a>
                    </li>
                    <li><a href="outbox">Outbox</a>
                    </li>
                </ul>
        </li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="logout">Logout
            </a></li>
    </ul>
</div>