Bootstrap 4 Nav Menu

Question

I have a question. I have a Bootstrap 4 menu:

<div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li class="sidebar-brand">
                    <img class="pic" src="pic.jpg" style="float: left; height:15em alt="gym logo">  
                </li>
                <li class="space"> NO TEXT</li>
                <li class="nav-item"><a class="nav-link" href="#">Dashboard</a></li>

                <li class="nav-item">
                    <a class="nav-link collapsed" href="#submenu1" data-toggle="collapse" data-target="#submenu1"> Reports &nbsp; <i class="fas fa-angle-double-down"></i></a>
                    <div class="collapse fade" id="submenu1" aria-expanded="false">
                        <ul class="flex-column pl-3 nav">
                            <li class="nav-item"><a class="nav-link py-0 text-warning" href="#">Orders</a></li>
                           <li class="nav-item"><a class="nav-link py-0 text-warning" href="#">Customers</a></li>
                        </ul>
                    </div>
                </li>
                <li class="nav-item"><a class="nav-link" href="#">Overview</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Events</a></li>
                <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
            </ul>    
        </div>

By default it is collapsed. How can I make it expanded when I click on Orders or Customers menu?

Thanks !

Answer 1

Add show class in collapse class.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li class="sidebar-brand">
                    <img class="pic" src="pic.jpg" style="float: left; height:15em alt="gym logo">  
                </li>
                <li class="space"> NO TEXT</li>
                <li class="nav-item"><a class="nav-link" href="#">Dashboard</a></li>

                <li class="nav-item">
                    <a class="nav-link collapsed" href="#submenu1" data-toggle="collapse" data-target="#submenu1"> Reports &nbsp; <i class="fas fa-angle-double-down"></i></a>
                    <div class="collapse fade show" id="submenu1" aria-expanded="false">
                        <ul class="flex-column pl-3 nav">
                            <li class="nav-item"><a class="nav-link py-0 text-warning" href="#">Orders</a></li>
                           <li class="nav-item"><a class="nav-link py-0 text-warning" href="#">Customers</a></li>
                        </ul>
                    </div>
                </li>
                <li class="nav-item"><a class="nav-link" href="#">Overview</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Events</a></li>
                <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
            </ul>    
        </div>