Bootstrap hide and show div based on sidebar menu item clicked <p>I'm new to bootstrap and still trying to familiarize myself with the available classes that I can use. So, I tried to build a sidebar but I can't get it to show only the target <code>div</code> of the menu item clicked on the sidebar.</p> <p>In other words, one <code>div</code> at a time and not stack of <code>div</code>s.</p> <p>To better illustrate, here's a screenshot.</p> <p><a href="https://i.stack.imgur.com/4EOn9.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4EOn9.jpg" alt="enter image description here"></a></p> <p>It doesn't replace the current <code>div</code>, instead it just simply shows the <code>div</code> then hides it on <code>button</code> click. This ends up on displaying or hiding one or both of the <code>div</code>s everytime I click on a menu item on the sidebar</p> <p><strong>dashboard.xhtml</strong></p> <pre><code>&lt;div class="container-fluid"&gt; &lt;div class="row"&gt; &lt;div class="col-sm-3 col-md-2 sidebar"&gt; &lt;ul class="nav nav-sidebar"&gt; &lt;li class="active"&gt;&lt;a href="#"&gt;Dashboard &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#customer-div" class="btn btn-default" data-toggle="collapse"&gt;Customers&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#orders-div" class="btn btn-default" data-toggle="collapse"&gt;Orders&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;ul class="nav nav-sidebar"&gt; &lt;li&gt;&lt;a href=""&gt;Frames&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Posters&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;About Us&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Users&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;!-- CUSTOMER --&gt; &lt;div id="customer-div" class="well col-xs-8 collapse"&gt; &lt;h1&gt;CUSTOMER&lt;/h1&gt; &lt;/div&gt; &lt;!-- END OF CUSTOMER DIV --&gt; &lt;!-- ORDERS --&gt; &lt;div id="orders-div" class="well col-xs-8 collapse"&gt; &lt;h1&gt;ORDERS&lt;/h1&gt; &lt;/div&gt; &lt;!-- END OF ORDERS DIV --&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>I want one <code>div</code> to replace the current <code>div</code> on it's container.</p> <p>I'd appreciate any help.</p> <p>Thank you.</p>