Skip to content

Instantly share code, notes, and snippets.

@bulbul84

bulbul84/ tabs on hover instead of clicking (index.html)

Created March 22, 2016 17:34
Show Gist options
  • Save bulbul84/0ab9a58c868c5922cc13 to your computer and use it in GitHub Desktop.
Save bulbul84/0ab9a58c868c5922cc13 to your computer and use it in GitHub Desktop.
Download ZIP
How to make with twitter bootstrap tabs on hover instead of clicking?
Raw
tabs on hover instead of clicking (index.html)
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Nav pills -->
<ul class="nav nav-pills">
<li class="active"><a href="#tab-1" data-toggle="tab">Tab 1</a></li>
<li><a href="#tab-2" data-toggle="tab">Tab 2</a></li>
<li><a href="#tab-3" data-toggle="tab">Tab 3</a></li>
<li><a href="#tab-4" data-toggle="tab">Tab 4</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content well">
<div class="tab-pane active" id="tab-1">Content 1</div>
<div class="tab-pane" id="tab-2">Content 2</div>
<div class="tab-pane" id="tab-3">Content 3</div>
<div class="tab-pane" id="tab-4">Content 4</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdn.rawgit.com/tonystar/bootstrap-hover-tabs/v3.1.1/bootstrap-hover-tabs.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment