How to fix bootstrap tab panels? They aren't properly switching tabs - html

Question

I am trying to change tabs using bootstrap tab panels just like this example here: https://codepen.io/wizly/pen/BlKxo
This is my jsfiddle code with what I have tried to do: https://jsfiddle.net/u18vjL9a/2/
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a class="selected" href="#searchtab1"aria-controls="searchtab1" role="tab" data-toggle="tab">Search Catalog</a></li>
<li role="presentation">Search Databases</li>
<li role="presentation">Search Website</li>
</ul>

Answer 1

You didn't link Bootstrap CSS and JavaScript file.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
And there's some wrong codes that break the rule of Bootstrap.
div.tab-content has wrong id that is the same with first tabpanel.
<div class="tab-content" id="searchtab1" style="display: block;">
<!-- should be: -->
<div class="tab-content">
tabpanels other than first one should not have .active. And there's irrelevant style display: none;.
<div role="tabpanel" class="tab-pane active" id="searchtab2" style="display: none;">
<!-- should be: -->
<div role="tabpanel" class="tab-pane" id="searchtab2">
Here's working snippet:
body {
font-size: 14px;
text-rendering: optimizeLegibility;
}
#catalogSearch>input[type=text]:nth-child(1) {
width: 60%;
}
.navbar-top ul.navbar-nav>li:nth-child(2) {
display: none;
}
.navbar {
border: 0px solid transparent;
border-radius: 0;
}
.navbar-top .navbar-nav>li>a {
padding: 8px 10px 8px 15px;
font-size: 12px;
font-weight: 700;
}
.dropdown-menu>li>a {
padding: 8px 10px 8px 15px;
color: #ffffff!important;
background-color: #5a8577!important;
white-space: nowrap;
font-size: 11px;
border-bottom: 1px dotted #a0c1b0;
font-weight: bold;
}
.dropdown-menu>li>a:hover {
color: #ffffff!important;
background-color: #76a394!important;
}
#navbar ul.dropdown-menu {
padding: 0;
border: 0px solid rgba(0, 0, 0, .15);
}
.navbar-nav {
margin: 0px -15px;
padding: 0 0 0 15px;
}
.nav-mobile .navbar-brand {
display: none;
}
/**BUTTON**/
.button {
text-decoration: none;
font-weight: 500;
padding: 10px 16px;
transition: all .25s ease;
}
.button:hover {
text-decoration: none;
}
/**HEADER**/
#idM6HJx {
border-bottom: 1px solid #efefef;
border-top: 3px solid #729f90;
}
#idzBDxO {
width: 50%;
float: left;
}
#idSaPI0 {
float: right;
}
/**hours widget div**/
#id1sZY4 {
float: left;
margin-left: 95px;
margin-top: 30px;
color: #D06F44;
max-width: 280px;
font-weight: bold;
font-size: 12px;
}
/**search widget div**/
#idVdBs6 {
max-width: 500px;
float: left;
}
#idnUKr8 {
float: right;
margin-bottom: 28px;
}
.headeraddress {
float: left;
display: block;
font-size: 14px;
color: #537b6f;
}
ul#menu-top-links.top_nav {
list-style: none;
}
ul.top_nav {
margin-bottom: 0;
float: right;
padding-inline-start: 0px!important;
}
ul.top_nav li {
float: left;
margin-left: 20px;
position: relative;
}
ul.top_nav li:first-child {
margin-left: 0px;
}
ul.top_nav li a {
color: #537b6f;
font-size: 12px;
font-weight: 600;
}
ul.top_nav li a:hover {
color: #9ebeb4;
}
#header .logo {
float: left;
width: 264px;
height: auto;
margin: 15px 0 15px;
}
.headerright {
max-width: 500px;
}
.floatright {
float: right;
}
.top_search {
float: right;
margin-top: 22px;
overflow: hidden;
max-height: 70px;
}
.searcht {
color: #3a3a3c;
display: block;
margin: 0;
padding: 0;
overflow: hidden;
}
.searcht ul {
margin: 0!important;
padding: 0!important;
list-style: none;
}
.searcht li {
list-style: none;
float: left;
text-align: center;
margin-right: 1px;
width: 130px;
}
.searcht ul a {
display: block;
padding: 2px 0;
text-decoration: none!important;
background: #729f90;
font-size: 14px;
text-align: center;
text-transform: capitalize;
font-weight: normal;
color: #FFF;
}
.searcht a.selected {
background: #5a8577;
}
.searcht ul li a:hover {
background: #9ebeb4;
}
#searchtab1,
#searchtab2,
#searchtab3 {
overflow: hidden;
}
.searchform {
display: inline;
margin: 0;
padding: 0;
}
#header input[type=text],
#header input[type=password],
#header input[type=email],
#header textarea {
font-family: arial, "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
}
.cataloginput {
border: 1px solid #3d6d6c;
color: #333;
float: left;
font-size: 12px;
font-weight: normal;
height: 22px!important;
line-height: 22px!important;
margin: 0;
outline: medium none;
padding: 0 0 0 4px;
width: 220px!important;
}
.catalogselect {
border: 1px solid #3d6d6c;
color: #333;
float: left;
font-size: 12px;
height: 24px!important;
line-height: 18px!important;
margin: 0 8px 0 -2px;
outline: medium none;
padding: 3px 1px 2px;
width: 100px;
}
#header select {
max-width: 90%;
}
.searchsubmit {
background-color: #fff;
border-style: none;
color: #5a8577;
float: right;
font-size: 12px;
font-weight: bold;
height: 24px;
line-height: 20px;
margin: 0;
width: 36px;
border: 1px solid #3d6d6c;
}
.searchsubmit:hover {
background-color: #D06F44;
cursor: pointer;
color: #FFF;
}
.searcht div {
padding: 5px;
clear: left;
background: #5a8577;
border-right: 0px solid #FFF;
max-width: 390px;
}
.databaseselect {
border: 1px solid #3d6d6c;
color: #333;
float: left;
font-size: 12px;
height: 24px!important;
line-height: 18px!important;
margin: 0;
outline: medium none;
padding: 3px 1px 2px;
width: 331px;
}
#searchtab3>form>input.searchinput {
width: 89%;
}
/**FOOTER**/
#default_footer {
display: none;
}
#footer {
margin: 0 auto;
}
.footerhours {
float: left;
text-align: left;
color: #f6f6f6;
}
.footer_bar_right {
float: right;
}
.footer_bar {
position: relative;
overflow: hidden;
background-color: #eaeaea;
padding-top: 5px;
padding-bottom: 5px;
}
.footer_bar a {
color: #fff;
margin-left: 10px;
height: 28px;
width: 28px;
text-indent: -9999px;
display: block;
float: right;
opacity: .8;
}
.footer_bar a:hover {
opacity: 1;
}
a.yahoo {
background: url(/images/tile//socials.png) no-repeat -56px 0;
height: 28px;
width: 28px;
}
a.google {
background: url(/images/tile//socials.png) no-repeat -84px 0;
height: 28px;
width: 28px;
}
a.twitter {
background: url(/images/tile//socials.png) no-repeat -28px 0;
height: 28px;
width: 28px;
}
a.facebook {
background: url(/images/tile//socials.png) no-repeat 0 0;
height: 28px;
width: 28px;
float: right;
text-indent: -99999px;
}
.wireless {
float: right;
text-align: right;
color: #f6f6f6;
}
.wireless img {
margin-top: -3px;
float: right;
margin-left: 10px;
margin-bottom: 20px;
}
.wireless a {
color: #fff;
}
/**EVENTS LISTING PAGE**/
/*Events listing title*/
.events-right>h1,
.events-grid>h1 {
font-size: 3.8em;
margin-top: 14px;
margin-bottom: 14px;
padding-bottom: 5px;
font-weight: 400;
}
#media (min-width: 768px) {
.events-right {
margin-left: 260px;
}
}
/*event listing date bar*/
.events-date-bar {
font-size: 1.6em;
margin-bottom: 1em;
font-weight: 600;
padding: 10px 0;
border-top: 1px solid #bbbbbb;
border-bottom: 1px solid #bbbbbb;
}
/*event listing title*/
.eelisttitle a {
font-weight: 600;
font-size: 1.2em;
margin-bottom: 0.5em;
text-decoration: none;
}
/*event listing date and time*/
div.eelisttime.headingtext {
color: #2c3e50!important;
}
/*event listing short description*/
.eelistdesc {
font-size: 1.2em;
}
.eventRegButton {
margin-bottom: 0.75em;
}
.events-day-title>.events-date-string>.headingtext,
.events-day-title>.events-date-range-string>.headingtext {
color: #56585B!important;
}
.events-left .tab-content {
background: #ffffff;
}
#media (max-width: 768px) {
.events-details {
margin-bottom: 20px;
}
}
/*filters*/
#eventsearch {
margin-bottom: 15px;
}
.events-filter-row {
padding: 1em 2em 1em 2em;
margin-bottom: 0px;
}
.events-view-row {
padding: 5px 40px;
}
#media (max-width: 768px) {
.events-filter-row {
max-width: 768px;
text-align: center;
}
}
/*filter buttons*/
#media (max-width: 768px) {
.events-views {
max-width: 768px;
margin-top: 10px;
text-align: center;
}
}
/**EVENT PAGES**/
/*border above and below the date, time and location info*/
#id4VX3g .amh-row,
#idlw5ZC.amh-row.row {
border-top: 1px solid #bbbbbb;
padding: 8px 0;
}
/*event page sub title*/
#idaiMWo h3 {
color: #56585B;
font-size: 1.8em;
;
font-weight: 400;
}
/*event page date*/
#idm0vRo h4 {
color: #2d3e4f;
}
/*event description*/
#idiga4D p {
color: #56585B;
}
/*event short description*/
#idjLXfv .custom1 {
color: #34485e;
margin: 1em 0 0.5em 0;
font-weight: 400;
font-size: 1.3em;
}
/**** Upcoming Events widget ****/
/*widget title*/
#idsqaCW h4 {
font-size: 1.8em;
margin-bottom: 0.5em;
font-weight: 400;
color: #1d1d1d;
}
/*height of events listing widget*/
#idtvR3F .amev-event-list {
height: 580px;
}
/*date string in upcoming events widget*/
.amev-event-time>.headingtext {
color: #000000 !important;
}
.amev-event-title a {
text-decoration: none;
}
.amev-event-description .eventRegButton {
font-size: 0.95em;
margin-bottom: 0.3em;
}
/*my events login page*/
.ammev-login {
margin: 20px auto;
}
.amPopup {
padding-bottom: 15px;
}
/** RESERVE **/
.amnp-holder {
padding: 15px;
}
#media (min-width: 768px) {
.navbar-nav>li {
float: none;
display: inline-block;
}
.navbar-nav {
float: none;
text-align: center;
}
}
#media (max-width: 991px) {
.footerhours {
float: none;
text-align: center;
font-size: 12px!important;
}
.footer_bar_right {
float: none;
width: 100%;
display: block;
text-align: center;
}
.footer_bar a {
float: none!important;
display: inline-block;
margin-right: 7px;
margin-left: 7px;
}
.wireless {
float: none;
display: block;
text-align: center;
width: auto;
font-size: 12px!important;
}
.wireless img {
float: none;
display: block;
text-align: center;
width: 44px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
margin-top: 5px;
}
}
#media (max-width: 989px) and (min-width: 768px) {
#header .logo {
float: left;
text-align: center;
width: 200px;
height: auto;
display: block;
margin-right: auto;
margin-left: auto;
}
#header .logo img {
max-width: 200px!important;
height: auto!important;
}
#ideeodQ {
width: 760px;
}
#id1sZY4 {
float: right;
margin: 30px 0 0;
display: inline-block;
width: 100%;
line-height: 16px;
font-weight: bold;
width: 240px;
font-size: 12px;
}
.headeraddress {
font-size: 12px;
}
}
#media (min-width: 768px) and (max-width: 1068px) {
.navbar-top .navbar-nav>li>a {
padding: 9px 7px;
font-size: 0.74em;
}
#id6b7GS {
float: right;
}
#idawjaN,
#id6b7GS {
width: 100%;
}
}
#media only screen and (max-width: 767px) and (min-width: 480px) {
#ideeodQ {
width: 470px;
}
#idzBDxO {
width: 100%;
float: none;
text-align: center;
}
#idSaPI0 {
float: none;
text-align: center;
}
#id6b7GS {
float: none;
text-align: center;
display: flex;
justify-content: center;
}
#header .logo {
float: left;
text-align: center;
width: 200px;
height: auto;
display: block;
margin-right: auto;
margin-left: auto;
}
#id1sZY4 {
float: right;
margin: 30px 0 0;
display: inline-block;
width: 100%;
line-height: 16px;
font-weight: bold;
width: 240px;
font-size: 12px;
}
#idnUKr8 {
float: none;
text-align: center;
margin-bottom: 0;
}
ul.top_nav {
margin-bottom: 0;
float: none;
text-align: center;
}
.floatright {
float: none;
}
#header .top_search {
float: none;
display: inline-block;
margin: 10px auto 20px;
max-height: 100px;
}
.headeraddress {
float: none;
font-size: 12px;
text-align: center;
}
}
#media only screen and (max-width: 479px) and (min-width: 200px) {
#idawjaN,
#id6b7GS {
width: 100%;
}
#id6b7GS {
float: none;
display: flex;
justify-content: center;
}
#ideeodQ {
width: 300px;
}
#idSaPI0 {
float: none;
text-align: center;
}
#idnUKr8 {
margin-bottom: 0px;
}
#idzBDxO {
width: 100%;
float: none;
}
#idVdBs6 {
max-width: 300px;
float: none;
}
#header .logo {
float: none;
text-align: center;
width: 200px;
height: auto;
display: block;
margin-right: auto;
margin-left: auto;
}
#header .logo img {
max-width: 200px;
height: auto;
}
#id1sZY4 {
float: none;
text-align: center;
margin: 0 0 0px;
display: inline-block;
width: 100%;
line-height: 16px;
font-weight: bold;
max-width: 100%;
font-size: 12px;
}
.headeraddress {
float: none;
font-size: 12px;
text-align: center;
}
ul.top_nav {
margin-bottom: 0;
float: none;
text-align: center;
}
.floatright {
float: none;
}
#header .top_search {
float: none;
display: block;
margin: 10px auto 20px;
max-height: 120px;
}
.searcht li {
width: 99px;
}
.searcht ul a {
padding: 4px 10px;
line-height: 16px;
}
.cataloginput {
width: 146px!important;
}
.catalogselect {
width: 80px;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="searcht">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a class="selected" href="#searchtab1" aria-controls="searchtab1" role="tab" data-toggle="tab">Search Catalog</a></li>
<li role="presentation">Search Databases</li>
<li role="presentation">Search Website</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="searchtab1">
<form name="catalogSearch" target="_blank" method="post" action="" onsubmit="SubmitSearch()" class="searchform">
<input type="text" name="q" id="q" class="cataloginput" value="Enter keyword..." onfocus="if (this.value == 'Enter keyword...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter keyword...';}">
<select class="catalogselect" id="SearchBy">
<option selected="selected" value="KW">Any Field</option>
<option value="TI">Title</option>
<option value="AU">Author</option>
<option value="SU">Subject</option>
<option value="NOTE">General notes</option>
<option value="PUB">Publisher</option>
<option value="GENRE">Genre</option>
<option value="SE">Series</option>
<option value="ISBN">ISBN</option>
</select>
<input type="submit" name="btnG" class="searchsubmit" value="Go">
</form>
</div>
<div role="tabpanel" class="tab-pane" id="searchtab2">
<form class="searchform" action="" method="POST">
<select name="subjectid" class="databaseselect">
<option class="inputbox2" value="business-resources">Business Resources</option>
<option class="inputbox2" value="ematerials-ebooks-audio-books-videos">eMaterials - eBooks, Audio Books, Videos</option>
<option class="inputbox2" value="health-and-science-resources">Health and Science Resources</option>
<option class="inputbox2" value="history-and-geneaology-resources">History and Geneaology Resources</option>
</select>
<input class="searchsubmit" type="submit" value="Go">
<input type="hidden" name="catsearch" value="1">
</form>
</div>
<div role="tabpanel" class="tab-pane" id="searchtab3">
<form class="searchform" method="get" action="">
<input type="text" value="Search this Website..." name="s" class="searchinput" onfocus="if (this.value == 'Search this Website...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this Website...';}">
<input type="submit" class="searchsubmit" value="Go">
</form>
</div>
</div>