Skip to content

Instantly share code, notes, and snippets.

@atyourlibrary

atyourlibrary/14b-optional-tabs.html

Created October 25, 2014 13:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save atyourlibrary/a22307a27b89a867f3ac to your computer and use it in GitHub Desktop.
Save atyourlibrary/a22307a27b89a867f3ac to your computer and use it in GitHub Desktop.
Download ZIP
Tabs
Raw
14b-optional-tabs.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic Bootstrap Template</title>
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Our Custom CSS styling -->
<link rel="stylesheet" href="app.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<!-- Banner with logo and social media links -->
<div class="row">
<div class="col-sm-7">
<img src="img/logo.png" alt="site logo" class="img-responsive">
</div>
<div class="col-sm-5">
<ul class="list-inline pull-right">
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Pinterest</a></li>
</ul>
</div>
</div>
<!-- Navigation Bar -->
<div class="row">
<div class="col-sm-12">
<nav class="navbar navbar-inverse" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</nav>
</div>
</div>
<!-- Main Content -->
<div class="row">
<div class="col-sm-12">
<h2 class="page-header">First Impressions <small>(<a href="http://www.bulwer-lytton.com/2013win.html">from Bulwer-Lytton Fiction Contest</a>)</small></h2><!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#crime" data-toggle="tab">Mystery</a></li>
<li><a href="#romance" data-toggle="tab">Romance</a></li>
<li><a href="#scifi" data-toggle="tab">SciFi</a></li>
<li><a href="#history" data-toggle="tab">Historical</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content booklist">
<div class="tab-pane active" id="crime">
<dl>
<dt>Mystery Book 1</dt>
<dd>It was such a beautiful night; the bright moonlight illuminated the sky, the thick clouds floated leisurely by just above the silhouette of tall, majestic trees, and I was viewing it all from the front row seat of the bullet hole in my car trunk.</dd>
<dt>Mystery Book 2</dt>
<dd>Seeing Mrs. Kohler sink, Detective Moen flushed as he plugged the burglary as the unmistakable work of Cap Fawcet, the Mad Plumber, for not only had her pool of assets been drained, but her clogs were now missing, and the toilet had been removed, leaving them with absolutely nothing to go on.</dd>
</dl>
</div>
<div class="tab-pane " id="romance">
<dl>
<dt>Romance Book 1</dt>
<dd>He had a way with women that was at first endearing, then gradually engendered caution and finally outright rejection, like potato salad at a summer picnic.</dd>
<dt>Romance Book 2</dt>
<dd>On their first date he&#39;d asked how much she thought Edgar Allan Poe&#39;s toe nails would sell for on eBay, and on their second he paid for subway fair with nickels he fished out of a fountain, but he was otherwise charming and she thought that they could have a perfectly tolerable life together.</dd>
</dl>
</div>
<div class="tab-pane" id="scifi">
<dl>
<dt>SciFi Book 1</dt>
<dd>The Mushroom Men of Knarf were silently advancing on the unsuspecting earthlings, and their thin milky blood ran colder when they smelled spores from fungal toenail infections rising from many of the invaders&#39; feet, for to them it was a wondrous and shocking scent of kinship, homeland, and asexual reproduction.</dd>
<dt>SciFi Book 2</dt>
<dd>This was going to be a science fiction novel until I realized that you actually have to know some real science for it to work well, so I changed it to a fantasy novel instead, because that way I can just make up the rules as I go, unhampered by the laws of physics or chemistry, as if you knew what they were anyway.</dd>
</dl>
</div>
<div class="tab-pane" id="history">
<dl>
<dt>Historical Book 1</dt>
<dd>It was a long shot by any measure, good bowman though he was, and he didn&#39;t want to risk it with his kid, but a lot was on the line, and that big, red apple was square on his dear boy&#39;s head, and he had to shoot it off … then everything went still, and William Tell heard the sound of music, quiet, then gently rising, like an overture.</dd>
<dt>Historical Book 2</dt>
<dd>General Lee arranged for the dreaded surrender, yet capitalized on his opponents&#39; weaknesses to the very end, striking a tiny parting blow for the Army of Northern Virginia (chuckling to himself) as he remembered from Academy days how many Union commanders had struggled with spelling even common words, and so ran his finger along the map and settled on Appomattox.</dd>
</dl>
</div>
</div>
</div>
</div>
<hr/>
<!-- Footer -->
<div class="row">
<div class="col-sm-4">
<strong>Hours</strong>
<ul class="list-unstyled">
<li>M-F 9-8</li>
<li>Sat 8-8</li>
<li>Sun 12-6</li>
</ul>
</div>
<div class="col-sm-4">
<strong>Contact us</strong>
<ul class="list-unstyled">
<li>(555) 555-1212</li>
<li>help@thelibrary.org</li>
</ul>
</div>
<div class="col-sm-4">
<strong>Visit us</strong>
<ul class="list-unstyled">
<li>123 S. Main St.</li>
<li>Hometown, USA</li>
</ul>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
Raw
Tab Panes of Content
<!-- Tab panes -->
<div class="tab-content booklist">
<div class="tab-pane active" id="crime">
<dl>
<dt>Mystery Book 1</dt>
<dd>It was such a beautiful night; the bright moonlight illuminated the sky, the thick clouds floated leisurely by just above the silhouette of tall, majestic trees, and I was viewing it all from the front row seat of the bullet hole in my car trunk.</dd>
<dt>Mystery Book 2</dt>
<dd>Seeing Mrs. Kohler sink, Detective Moen flushed as he plugged the burglary as the unmistakable work of Cap Fawcet, the Mad Plumber, for not only had her pool of assets been drained, but her clogs were now missing, and the toilet had been removed, leaving them with absolutely nothing to go on.</dd>
</dl>
</div>
<div class="tab-pane " id="romance">
<dl>
<dt>Romance Book 1</dt>
<dd>He had a way with women that was at first endearing, then gradually engendered caution and finally outright rejection, like potato salad at a summer picnic.</dd>
<dt>Romance Book 2</dt>
<dd>On their first date he&#39;d asked how much she thought Edgar Allan Poe&#39;s toe nails would sell for on eBay, and on their second he paid for subway fair with nickels he fished out of a fountain, but he was otherwise charming and she thought that they could have a perfectly tolerable life together.</dd>
</dl>
</div>
<div class="tab-pane" id="scifi">
<dl>
<dt>SciFi Book 1</dt>
<dd>The Mushroom Men of Knarf were silently advancing on the unsuspecting earthlings, and their thin milky blood ran colder when they smelled spores from fungal toenail infections rising from many of the invaders&#39; feet, for to them it was a wondrous and shocking scent of kinship, homeland, and asexual reproduction.</dd>
<dt>SciFi Book 2</dt>
<dd>This was going to be a science fiction novel until I realized that you actually have to know some real science for it to work well, so I changed it to a fantasy novel instead, because that way I can just make up the rules as I go, unhampered by the laws of physics or chemistry, as if you knew what they were anyway.</dd>
</dl>
</div>
<div class="tab-pane" id="history">
<dl>
<dt>Historical Book 1</dt>
<dd>It was a long shot by any measure, good bowman though he was, and he didn&#39;t want to risk it with his kid, but a lot was on the line, and that big, red apple was square on his dear boy&#39;s head, and he had to shoot it off … then everything went still, and William Tell heard the sound of music, quiet, then gently rising, like an overture.</dd>
<dt>Historical Book 2</dt>
<dd>General Lee arranged for the dreaded surrender, yet capitalized on his opponents&#39; weaknesses to the very end, striking a tiny parting blow for the Army of Northern Virginia (chuckling to himself) as he remembered from Academy days how many Union commanders had struggled with spelling even common words, and so ran his finger along the map and settled on Appomattox.</dd>
</dl>
</div>
</div>
Raw
Tabs
<ul class="nav nav-tabs">
<li class="active"><a href="#crime" data-toggle="tab">Mystery</a></li>
<li><a href="#romance" data-toggle="tab">Romance</a></li>
<li><a href="#scifi" data-toggle="tab">SciFi</a></li>
<li><a href="#history" data-toggle="tab">Historical</a></li>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment