Adding dropdown list to side navbar (bootstrap)

[LH1980]

Hi,

I am trying to add a drop down toggle within a side navbar. I can either get all the links displayed (rather than in a dropdown to open and close) or just the toggle button but no event opening or closing the sub menu. I have tried many iterations of markup, and I am hoping it is something simple!

The header: <div id="content"> <!-- header --> <header> <!-- header inner --> <div class="header"> <div class="container-fluid"> <div class="row"> <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 col logo_section"> <div class="full"> <div class="center-desk"> <div class="logo"> <a href="https://www.site.com/index.php"><img src="https://www.seecuring.com/images/300.png" alt="#" /></a> </div> </div> </div> </div> <div class="col-xl-9 col-lg-9 col-md-9 col-sm-9"> <ul class="btn"> <!-- <li class="down_btn"><a href="#">Download</a></li>--> <!--<li><a href="#">Sign Up</a></li>--> <li><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></li> <span class="visually-hidden">Toggle Dropdown</span> <li><button type="button" id="sidebarCollapse"> <img src="https://www.site.com/images/menu_icon.png" alt="#" /> </button> </li> </ul> </div> </div> </div> </div> </header> The side menu I want to add a drop down to: <div class="sidebar"> <!-- Sidebar --> <nav id="sidebar"> <div id="dismiss"> <i class="fa fa-arrow-left"></i> </div> <ul class="list-unstyled components"> <li class="active"> <a href="https://www.seecuring.com">Home</a> </li> <li><a href="https://www.seecuring.com/about/">About </a> </li> THIS IS THE CODE BELOW, ALL THIS DOES IS LIST OUT THE LINKS WITHOUT A DROPDOWN: <div class="dropdown-container"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> <li><a href="#contact">Contact </a> </li> </ul> </nav> </div>

Does anyone have a solution for something like this?

Thanks!