Sometimes, we want to hide Twitter Bootstrap nav collapse on click with HTML.
In this article, we’ll look at how to hide Twitter Bootstrap nav collapse on click with HTML.
How to hide Twitter Bootstrap nav collapse on click with HTML?
To hide Twitter Bootstrap nav collapse on click with HTML, we set the data-toggle and data-target attributes.
For instance, we write
<div class="nav-collapse">
<ul class="nav">
<li class="active">
<a href="#home" data-toggle="collapse" data-target=".nav-collapse.in"
>Home</a
>
</li>
<li>
<a href="#about" data-toggle="collapse" data-target=".nav-collapse.in"
>About</a
>
</li>
<li>
<a href="#portfolio" data-toggle="collapse" data-target=".nav-collapse.in"
>Portfolio</a
>
</li>
<li>
<a href="#services" data-toggle="collapse" data-target=".nav-collapse.in"
>Services</a
>
</li>
<li>
<a href="#contact" data-toggle="collapse" data-target=".nav-collapse.in"
>Contact</a
>
</li>
</ul>
</div>
to set data-toggle to collapse and data-target to .nav-collapse.in` to collapse the nav on click.
Conclusion
To hide Twitter Bootstrap nav collapse on click with HTML, we set the data-toggle and data-target attributes.
