Ashley K Ashley K - 4 months ago 17
HTML Question

In Bootstrap3, on button click make one div display and another div hide

I have two divs. On button click, I need the first div (topNOnav) to disappear and be replaced by the second div (topnav). Right now I have it so the second div appears on button click, but I can't get the first div to simultaneously disappear. The first div is just some text with a button and the second div is the navigation bar of our website.

HTML:

<div id="topNOnav" style="background-color:#0568ae" class="collapse in">
<div class="container">
<div class="row">
<div class="col-xs-3" style="padding-left:30px">
<img src="../../images/NewNav/nav1.jpg" class="img-responsive"/>
</div><!--end col-xs-3-->
<div class="col-xs-6" style="text-align:center;font-family:OmnesATTIIMedium;color:white;font-size:18px;margin-top:2%">
Take yourself to the next level!<br><i>1,000 courses to take you there.</i>
</div><!--end col-xs-6-->
<div class="col-xs-3" style="margin-top:2%">
<button type="button" class="btn btn-primary" data-toggle="collapse" href="#topnav" data-toggle="collapse in">Browse Courses</button>
</div><!--end col-xs-3-->
</div><!--end row-->
</div><!--end container-->
</div><!--end topNOnav-->


<div id="topnav" class="collapse">
<cfinclude template="../../Navigation/Responsive/NDHeader.cfm"/>
</div>

Answer

Use the data-parent attribute and wrap the divs in a panel..

<div id="parent">
    <div class="panel">
      <div id="topNOnav" style="background-color:#0568ae" class="collapse in">
        ...
      </div>
      <div id="topnav" class="collapse">
        ...
      </div>
  </div>
</div>

http://www.codeply.com/go/8eo6tQF0TB

Comments