Bootstrap collapse panel not working on mobile - javascript

Hi, I'm tyring to make a mobile version of a website. I used collapse panel from Bootstrap so the user can view specified content easily. Everything works perfectly in desktop mode, but when I go in mobile, if I toggle the collapse div, the fonts and the content shrinks for a reason I don't understand. I tried different version of imports (bootstrap, jquery) and I read the existing related problems but I didn't find any answer so far.
Here's a picture of the current behavior of the code (tested on a real phone):
http://imgur.com/Mfnj4hA
Here's the code:
<html lang="en">
<head>
<!-- STYLE IMPORT -->
<link rel="stylesheet" href="../libs/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../libs/font-awesome/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/png" href="../img/brand-image.png" />
<!-- SCRIPT IMPORT -->
<style>
.panel-heading a:after {
font-family:'Glyphicons Halflings';
content:"\e114";
float: right;
color: grey;
}
.panel-heading a.collapsed:after {
content:"\e080";
}
</style>
</head>
<body>
<div class="fluid-container">
<div class="panel panel-default">
<div class="panel-heading"><a data-toggle="collapse" data-target="#collapseOne" href="#collapseOne">Panel 1</a></div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="panel panel-primary">
<div class="panel-heading"><i class="fa fa-check" style="padding-right:25px"></i> Lorem Ipsum</div>
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempor faucibus lacus in lacinia. Mauris sed sem nibh. In sem sapien, aliquam et placerat vitae, rutrum eget nunc. Maecenas consequat molestie fringilla. Nunc non pellentesque augue. Fusce egestas, urna pellentesque aliquam interdum, mi enim efficitur sem, et pretium orci diam eu ipsum. Vestibulum lobortis pellentesque massa sed gravida. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque tortor mi, consectetur at molestie sit amet, aliquet eu felis. Integer euismod rhoncus egestas. Donec porta ligula vel libero maximus molestie. Fusce porttitor dictum magna vitae maximus. Cras pulvinar consectetur orci, ac tincidunt libero condimentum nec. Sed molestie lacinia neque sed sollicitudin.
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading"><i class="fa fa-check" style="padding-right:25px"></i> Morbi quis magna</div>
<div class="panel-body">
Morbi quis magna scelerisque, egestas leo id, sodales lectus. Aliquam vel commodo leo. Vestibulum imperdiet maximus felis, quis ullamcorper tellus sodales in. Nunc aliquet, lectus a maximus pellentesque, dolor neque tempor sem, vitae dignissim enim neque et arcu. Nullam at sagittis tortor, sed imperdiet turpis. Quisque non leo sollicitudin, tincidunt felis a, fringilla tellus. Phasellus ipsum lorem, sodales non dolor nec, viverra rutrum magna. Phasellus quam purus, efficitur ac sodales ac, pretium ac tellus. Aenean pulvinar felis sollicitudin tellus bibendum, ac vestibulum nulla facilisis. Mauris maximus, dui in gravida molestie, tellus nisl convallis ex, ut fermentum orci odio at mauris. Donec et erat eget diam ultrices auctor et vitae felis. Nullam et arcu ligula. Proin nec tristique dui, ut luctus velit.
</div>
</div>
<div class="fluid-container">
<button type="button" class="btn btn-primary" style="width:100%;font-size:20pt;padding:20px" data-toggle="collapse" data-target="#collapseOne" href="#collapseOne"><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Bootstrap JavaScript -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
Thank you for your help.


Defining your viewport to device-width is important, when you do responsive web development.
Add this to the head section:
<meta name="viewport" content="width=device-width, initial-scale=1">
You can find the bootstrap bioler template here: http://getbootstrap.com/getting-started/

Related

Smooth Scroll in ScrollSpy

Sorry for my English.
I'm creating a website, and I want to implement smooth scroll for internal links. I have tried many different codes, html {scroll-behavior: smooth;}, and different JavaScript codes.
The horizontal navbar works fine with those codes:
But the vertical navbar, which works as scrollspy, doesn't work with smooth scroll.
This is my code:
<!doctype html>
<html lang="pt-bt">
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<title> Curso HTML Bootstrap </title>
<!--Requeried Meta TAGS!-->
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/compiler/bootstrap.css">
<link rel="stylesheet" href="node_modules/bootstrap/compiler/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-gradient-primary">
<div class="container">
<a class="navbar-brand h1 mb-0" href="#">Curso</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSite">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSite">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#item3">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Perfil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Serviços</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Depoimentos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contatos</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"
id="navDrop">Redes Sociais</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Facebook</a>
<a class="dropdown-item" href="#">Instagram</a>
<a class="dropdown-item" href="#">Youtube</a>
<a class="dropdown-item" href="#">Linkedin</a>
</div>
</li>
</ul>
<form class="form-inline">
<input class="form-control ml-4" type="search"
placeholder="Pesquisar...">
<button class="btn btn-dark" type="submit">Ok</button>
</form>
</div>
</div>
</nav>
<div id="carouselSite" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselSite" data-slide-to="0" class="active"></li>
<li data-target="#carouselSite" data-slide-to="1"></li>
<li data-target="#carouselSite" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/idaho239691_1920.jpg" class="d-block w-100">
<div class="carousel-caption d-none d-md-block">
<h1>Lorem ipsum dolor sit amet</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam commodo dolor a ligula fringilla laoreet. Sed sagittis
eleifend sem, eget pretium est aliquam sit amet. Vivamus at
consectetur felis. Proin eu accumsan lectus. Etiam id ante at ex
tempor iaculis.</p>
</div>
</div>
<div class="carousel-item">
<img src="img/img (35).jpg" class="d-block w-100">
<div class="carousel-caption d-none d-md-block">
<h1>Etiam ac elit et eros consequat luctus.</h1>
<p class="lead">Etiam ac elit et eros consequat luctus. Phasellus eu
sapien molestie, pharetra odio ac, mollis turpis. Mauris aliquam arcu
in orci accumsan, et semper mi lacinia.</p>
</div>
</div>
<div class="carousel-item">
<img src="img/maxresdefault.jpg" class="d-block w-100">
<div class="carousel-caption d-none d-md-block">
<h1>Phasellus tempus eget enim vel pharetra.</h1>
<p class="lead">Phasellus tempus eget enim vel pharetra. Aliquam erat
volutpat. Mauris vehicula lectus quis tellus semper pretium vitae a
purus. Ut vulputate quam eget tincidunt efficitur.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselSite" role="button"
data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="carousel-control-next" href="#carouselSite" role="button"
data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Avançar</span>
</a>
</div>
<div class="container">
<div class="row">
<div class="col-12 text-center my-5">
<h1 class="display-3">Maecenas orci risus</h1>
<p>Maecenas orci risus, consequat eu luctus vehicula, vulputate sit amet
arcu.</p>
</div>
</div>
<div class="row mb-5">
<div class="col-sm-5 col-md-3">
<nav id="navbarVertical" class="navbar navbar-light bg-light">
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item1">Lorem ipsum</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ml-3" href="#item1-1">Curabitur bibendum</a>
<a class="nav-link ml-3" href="#item1-2">Phasellus posuere</a>
</nav>
<a class="nav-link my-2" href="#item2">Sed feugiat</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ml-3" href="#item2-1">Aliquam ac</a>
<a class="nav-link ml-3" href="#item2-2">Maecenas eleifend</a>
</nav>
<a class="nav-link my-2" href="#item3">Nunc vitae</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ml-3" href="#item3-1">Duis nec orci</a>
<a class="nav-link ml-3" href="#item3-2">Ut imperdiet</a>
</nav>
</nav>
</nav>
</div>
<div class="col-sm-7 col-md-9">
<div data-spy="scroll" data-target="#navbarVertical" data-offset="0"
class="scrollspySite">
<h4 id="item1">Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
venenatis tortor fermentum ullamcorper laoreet. Fusce fermentum nibh
sed lacus euismod tincidunt. Aliquam lorem turpis, condimentum id
augue ut, aliquet pretium eros. In id neque mi. Fusce semper magna
eget pharetra porta. Donec auctor scelerisque nisi, eleifend rhoncus
lectus suscipit quis. Etiam scelerisque feugiat varius. Maecenas sed
malesuada mi. Pellentesque sit amet dolor aliquet, imperdiet odio
vitae, suscipit dolor. Aliquam ullamcorper eros ac justo volutpat, nec
lacinia metus tempus. Morbi at odio vestibulum, scelerisque mauris in,
laoreet massa. Praesent consectetur eros quis dapibus pharetra.</p>
<h5 id="item1-1">Teste</h5>
<p>Vestibulum mollis lacus quis dolor sodales, sit amet vestibulum
tellus aliquet. Fusce ultrices quis mauris non placerat. Maecenas
dolor velit, tincidunt rutrum sapien vitae, cursus vestibulum dui.
Quisque in dignissim arcu, vitae porttitor velit. Mauris tempus
ullamcorper orci ut dictum. Curabitur commodo dolor ac dui accumsan,
luctus tincidunt nisl pulvinar. Donec est ipsum, lobortis id lorem sit
amet, vulputate blandit nisl. Nunc viverra pulvinar neque. Orci varius
natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Curabitur sed sem ac velit lobortis porta. Proin blandit turpis
diam, non consectetur lectus iaculis molestie. Fusce venenatis, erat a
venenatis vehicula, libero sapien molestie dui, ac aliquet risus nisi
at orci.</p>iquet. Fusce ultrices quis mauris non placerat. Maecenas
dolor velit, tincidunt rutrum sapien vitae, cursus vestibulum dui.
Quisque in dignissim arcu, vitae porttitor velit. Mauris tempus
ullamcorper orci ut dictum. Curabitur commodo dolor ac dui accumsan,
luctus tincidunt nisl pulvinar. Donec est ipsum, lobortis id lorem sit
amet, vulputate blandit nisl. Nunc viverra pulvinar neque. Orci varius
natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Curabitur sed sem ac velit lobortis porta. Proin blandit turpis
diam, non consectetur lectus iaculis molestie. Fusce venenatis, erat a
venenatis vehicula, libero sapien molestie dui, ac aliquet risus nisi at
orci.</p>
<h5 id="item1-2">Aliquam at</h5>
<p>Aliquam at enim tincidunt, fringilla purus at, lacinia ipsum. Aenean
sed convallis elit, eu hendrerit urna. Praesent hendrerit dui non
vulputate lobortis. Praesent tempor tellus in ultricies gravida.
Nullam bibendum bibendum justo eget pulvinar. Suspendisse gravida
tristique tristique. Nulla tincidunt nibh et luctus mollis. Praesent
nunc ipsum, porttitor nec quam non, eleifend bibendum elit. Vestibulum
dui dui, suscipit sit amet consequat ut, sagittis eu libero. Duis
tempus luctus lobortis. Maecenas consectetur finibus porta.</p>
<h4 id="item2">Sed varius</h4>
<p>Sed varius augue in velit lobortis ultricies. Donec auctor vitae
justo quis laoreet. Sed ac tellus metus. Nunc non mauris est. Interdum
et malesuada fames ac ante ipsum primis in faucibus. Cras turpis
justo, lobortis et cursus in, mattis at est. Sed lorem enim, dignissim
at sem vitae, mattis porttitor turpis. Nunc ac eleifend orci, et
tincidunt sapien. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Curabitur placerat varius
aliquet. Nullam sit amet velit laoreet, accumsan purus at, molestie
est. Aenean sodales turpis vel egestas dapibus. Mauris fringilla at
eros quis blandit. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Sed convallis nisi fermentum
varius tincidunt.</p>
<h5 id="item2-1">Ut scelerisque</h5>
<p>Ut scelerisque neque sed nunc porttitor, ut egestas metus accumsan.
Proin quis odio nec ex fringilla cursus. Quisque faucibus dictum
risus, vitae porttitor felis varius ac. Etiam sit amet gravida felis,
sed porta velit. Etiam rhoncus egestas maximus. Quisque mollis, elit
eu ultricies luctus, velit mi congue nisi, iaculis congue massa risus
vitae lectus. In hac habitasse platea dictumst.</p>
<h5 id="item2-2">Lorem ipsum</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
venenatis tortor fermentum ullamcorper laoreet. Fusce fermentum nibh
sed lacus euismod tincidunt. Aliquam lorem turpis, condimentum id
augue ut, aliquet pretium eros. In id neque mi. Fusce semper magna
eget pharetra porta. Donec auctor scelerisque nisi, eleifend rhoncus
lectus suscipit quis. Etiam scelerisque feugiat varius. Maecenas sed
malesuada mi. Pellentesque sit amet dolor aliquet, imperdiet odio
vitae, suscipit dolor. Aliquam ullamcorper eros ac justo volutpat, nec
lacinia metus tempus. Morbi at odio vestibulum, scelerisque mauris in,
laoreet massa. Praesent consectetur eros quis dapibus pharetra.</p>
<h4 id="item3">Vestibulum mollis</h4>
<p>Vestibulum mollis lacus quis dolor sodales, sit amet vestibulum
tellus aliquet. Fusce ultrices quis mauris non placerat. Maecenas
dolor velit, tincidunt rutrum sapien vitae, cursus vestibulum dui.
Quisque in dignissim arcu, vitae porttitor velit. Mauris tempus
ullamcorper orci ut dictum. Curabitur commodo dolor ac dui accumsan,
luctus tincidunt nisl pulvinar. Donec est ipsum, lobortis id lorem sit
amet, vulputate blandit nisl. Nunc viverra pulvinar neque. Orci varius
natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Curabitur sed sem ac velit lobortis porta. Proin blandit turpis
diam, non consectetur lectus iaculis molestie. Fusce venenatis, erat a
venenatis vehicula, libero sapien molestie dui, ac aliquet risus nisi
at orci.estibulum mollis lacus quis dolor sodales, sit amet vestibulum
tellus aliquet. Fusce ultrices quis mauris non placerat. Maecenas
dolor velit, tincidunt rutrum sapien vitae, cursus vestibulum dui.
Quisque in dignissim arcu, vitae porttitor velit. Mauris tempus
ullamcorper orci ut dictum. Curabitur commodo dolor ac dui accumsan,
luctus tincidunt nisl pulvinar. Donec est ipsum, lobortis id lorem sit
amet, vulputate blandit nisl. Nunc viverra pulvinar neque. Orci varius
natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Curabitur sed sem ac velit lobortis porta. Proin blandit turpis
diam, non consectetur lectus iaculis molestie. Fusce venenatis, erat a
venenatis vehicula, libero sapien molestie dui, ac aliquet risus nisi
at orci.</p>
<h5 id="item3-1">Aliquam at</h5>
<p> raesent tempor tellus in ultricies gravida. Nullam bibendum bibendum
justo eget pulvinar. Su Praesent tempor tellus in ultricies gravida.
Nullam bibendum bibendum justo eget pulvinar. Suspendisse gravida
tristique tristique. Nulla tincidunt nibh et luctus mollis. Praesent
nunc ipsum, porttitor nec quam non, eleifend bibendum elit. Vestibulum
dui dui, suscipit sit amet consequat ut, sagittis eu libero. Duis
tempus luctus lobortis. Maecenas consectetur finibus porta. liquam at
enim tincidunt, fringilla purus at, lacinia ipsum. Aenean sed
convallis elit, eu hendrerit urna. Praesent hendrerit dui non
vulputate lobortis. Praesent tempor tellus in ultricies gravida.
Nullam bibendum bibendum justo eget pulvinar. Suspendisse gravida
tristique tristique. Nulla tincidunt nibh et luctus mollis. Praesent
nunc ipsum, porttitor nec quam non, eleifend bibendum elit. Vestibulum
dui dui, suscipit sit amet consequat ut, sagittis eu libero. Duis
tempus luctus lobortis. Maecenas consectetur finibus porta</p>
<h5 id="item3-2">Sed varius</h5>
<p>Sed varius augue in velit lobortis ultricies. Donec auctor vitae
justo quis laoreet. Sed ac tellus metus. Nunc non mauris est. Interdum
et malesuada fames ac ante ipsum primis in faucibus. Cras turpis
justo, lobortis et cursus in, mattis at est. Sed lorem enim, dignissim
at sem vitae, mattis porttitor turpis. Nunc ac eleifend orci, et
tincidunt sapien. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Curabitur placerat varius
aliquet. Nullam sit amet velit laoreet, accumsan purus at, molestie
est. Aenean sodales turpis vel egestas dapibus. Mauris fringilla at
eros quis blandit. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Sed convallis nisi fermentum
varius tincidunt.</p>
</div>
</div>
</div>
</div>
<!-- jQuery first, then popper.js, then Bootstrap JS -->
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="js/app.js"></script>
</body>
</html>
And my styles.scss is:
.scrollspySite{
position: relative;
overflow: auto;
height: 400px;
}
html {
scroll-behavior: smooth;
}

Accordion doesn't expand

I've created an accordion with the help of a tutorial and some demo files and even though the demo file works, when I transferred it over to my HTML file, it doesn't expand upon clicking. The weird thing is that when I copy pasted it to a jsfiddle, it works. I'm not sure what I'm doing wrong here.
Heres my HTML,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>What is Diabetes?</title>
<script type="text/javascript" src="js/accordion.js"></script>
<script
src="https://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous">
</script>
<link href="https://fonts.googleapis.com/css?family=Ek+Mukta:300,400|Roboto:100,200,300,400,800,900|Source+Sans+Pro:300,400|Raleway:100,200,300,400,500,800,900" rel="stylesheet">
<link href="css/accordion.css" rel="stylesheet" type="text/css">
<!--Fonts-->
</head>
<body>
<div id="container"> <!-- Container for Everything -->
<div class="divider1"></div>
<div class="sectionbanner">
<h2>WHAT IS DIABETES?</h2>
</div>
<div class="divider1"></div>
<div id="whatisdiabetes">
<p>Diabetes or diabetes mellitus is a chronic disease where the body does not make or does not use insulin properly, resulting in having too much sugar (glucose) in the blood. Sugar comes from the food we eat. The body needs sugar to make energy. The amount of sugar in the blood of a normal person is closely controlled by a substance called insulin. Insulin is made by the pancreas, a gland found below the stomach. People with diabetes either do not produce enough insulin or the insulin produced does not work well. As a result, sugar builds up in the blood.<br><br>
Over time, high sugar levels can give rise to problems like infections, blindness, kidney disorders, stroke, heart disease, and foot and leg disorders.</p>
</div>
<div id="faq">
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">Accordion Section #1</a>
<div id="accordion-1" class="accordion-section-content">
<p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
</div><!--end .accordion-section-content-->
</div><!--end .accordion-section-->
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-2">Accordion Section #2</a>
<div id="accordion-2" class="accordion-section-content">
<p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
</div><!--end .accordion-section-content-->
</div><!--end .accordion-section-->
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-3">Accordion Section #3</a>
<div id="accordion-3" class="accordion-section-content">
<p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
</div><!--end .accordion-section-content-->
</div><!--end .accordion-section-->
</div><!--end .accordion-->
</div>
</div>
</body>
</html>
As for my JS and CSS, it is exactly how I put it in the jsfiddle. I'm honestly stumped and confused as to why it works in jsfiddle but not when I put it in my HTML using Dreamweaver.

How to make chevron icon on each accordion menu rotate

I was just wondering how to make my little chevron icon on each accordion menu rotate. (not just jump to the point but actually having an animation effect and rotate)
Thanks!!!!
here's my code:
<!DOCTYPE html>
<html>
<head>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js">
</script><!-- Latest compiled and minified CSS -->
<link crossorigin="anonymous" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity=
"sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
rel="stylesheet"><!-- Optional theme -->
<link crossorigin="anonymous" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
integrity=
"sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r"
rel="stylesheet"><!-- Latest compiled and minified JavaScript -->
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="common.css">
<title></title>
</head>
<body overflow:hidden>
<div id="header">
<a href="frontend.html">
<img src="logo.png" alt="logo image" style="width:50%;height:50%;">
</a>
</div>
<!-- drop down menu for desktop-->
<div id="website">
<ul >
<div class="dropdown" >
<li><a href="#about" >About ▾</a>
<ul class="dropdown">
<li>Staff</li>
<li>History</li>
<li>Our Mission</li>
</ul>
</li>
<li>Contact
<ul class="dropdown">
<li>Employee Contacts</li>
<li>Corporate Contacts</li>
<li>Join Our Team</li>
</ul>
</li>
</div>
</ul>
</div>
<!--drop down menu for mobile-->
<div id="mobileHover">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 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" aria-expanded="false">
<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="#">Menu</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="dropdown">
About <span class="caret"></span>
<ul class="dropdown-menu">
<li>History</li>
<li>Staff</li>
<li>Our Mission</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Employee Contacts</li>
<li>Corporate Contacts</li>
<li>Join Our Team</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="streamline.png" alt="steamline">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="synergy.png" alt="synergy">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="impact.png" alt="impact">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
</div>
<div id="wantit">
<h3>What We Offer</h3>
<p>Lorem ipsum dolor sit amet, suspendisse at sit, porttitor integer in. Ipsum sed vel dapibus et. Ut integer mi, elit posuere, earum eleifend vestibulum, tempor natoque molestie aliquet voluptas mus, velit condimentum dui eget. Velit turpis, dignissim convallis luctus vestibulum augue praesent mus. Sit sit mauris pellentesque, massa nec. Odio urna nonummy, magna sed nullam integer, leo nec. Ac nunc amet interdum dolor mattis quisque.</p>
<p>Sollicitudin dolor, cras mauris iaculis sed parturient, felis dictum sit ligula etiam scelerisque ut, libero curabitur voluptatibus metus neque ac. Feugiat nibh porta libero ut placerat, auctor et. Quis eros in, non nibh id turpis ullamcorper. Semper turpis, eget fermentum aperiam elit, augue integer. Mauris curabitur facere consectetuer, tincidunt ac pulvinar, consectetuer magna ultrices est doloribus ligula, in interdum vel urna, suspendisse magna per enim integer at montes. At quis, libero nisl ipsam ipsum, in tortor sodales ac tortor officiis id. Nunc vestibulum viverra mus, ullamcorper aliquet tellus felis nec sit ut. Metus tincidunt orci nec, metus erat suspendisse eleifend ac magna sollicitudin, vestibulum orci et. Ipsum elit, aliquam risus ullamcorper nulla. At libero scelerisque fermentum aperiam per. Sed commodo gravida diam etiam dignissim, amet nam.</p>
<h3>Testimonials</h3>
<p>Aliquet varius vel etiam velit in, ultrices eros vitae, pharetra ut velit sit ipsum, nisl dignissim sed eleifend nunc, amet eros. A laoreet egestas et faucibus et. Sit felis lobortis dignissim porta vehicula, ac ea tortor magna eget, eget condimentum est, sit massa ipsum integer, aenean tristique ultricies euismod interdum. Nostra euismod ipsum euismod vestibulum vitae. Urna enim felis leo erat, a mattis sed etiam vivamus tristique accumsan, curabitur wisi pretium sed risus sagittis ac. Eget bibendum suscipit viverra in mauris, cras turpis.</p>
<p>Cras purus, purus ipsum viverra semper purus wisi in. Penatibus est, ullamcorper dolor vehicula aliquam odio, vel tristique eu ac, non nullam lorem massa dolore duis, justo venenatis. Vitae sed nascetur, metus lacinia suspendisse in eget consequat, est neque gravida phasellus nullam vitae nec, dolor dui orci parturient, eget dolore wisi tellus lorem. Tincidunt sodales quis pellentesque, non vitae blandit. Scelerisque non a nibh. Lobortis erat faucibus duis interdum adipiscing eros. Praesent phasellus, magnis nam in eu, at montes etiam nibh placerat morbi amet, aenean nec lectus luctus. Proin lorem ultricies vero vel consectetuer, et feugiat tempor, neque donec wisi blandit, vulputate aliquet wisi donec eros. Nulla erat, semper dignissim ducimus viverra ante nullam. Donec habitasse, dapibus vitae imperdiet nunc tempor aenean ipsum, quisque est egestas ut senectus metus iaculis, diam lectus convallis, massa gravida est dapibus id habitant. Nibh posuere mi. Auctor convallis augue ipsum.</p>
</div>
<div class="panel-group" id="accordion">
<div class="panel panel-default" id="panel1">
<div class="panel-heading">
<h4 class="panel-title"><a data-target="#collapseOne"
data-toggle="collapse" href="#collapseOne">What We Offer
</a>
<i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
<i class="indicator glyphicon glyphicon-chevron-down pull-left"></i>
</h4>
</div>
<div class="panel-collapse collapse in" id="collapseOne">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, suspendisse at sit, porttitor integer in. Ipsum sed vel dapibus et. Ut integer mi, elit posuere, earum eleifend vestibulum, tempor natoque molestie aliquet voluptas mus, velit condimentum dui eget. Velit turpis, dignissim convallis luctus vestibulum augue praesent mus. Sit sit mauris pellentesque, massa nec. Odio urna nonummy, magna sed nullam integer, leo nec. Ac nunc amet interdum dolor mattis quisque.
</p>
<p>Sollicitudin dolor, cras mauris iaculis sed parturient, felis dictum sit ligula etiam scelerisque ut, libero curabitur voluptatibus metus neque ac. Feugiat nibh porta libero ut placerat, auctor et. Quis eros in, non nibh id turpis ullamcorper. Semper turpis, eget fermentum aperiam elit, augue integer. Mauris curabitur facere consectetuer, tincidunt ac pulvinar, consectetuer magna ultrices est doloribus ligula, in interdum vel urna, suspendisse magna per enim integer at montes. At quis, libero nisl ipsam ipsum, in tortor sodales ac tortor officiis id. Nunc vestibulum viverra mus, ullamcorper aliquet tellus felis nec sit ut. Metus tincidunt orci nec, metus erat suspendisse eleifend ac magna sollicitudin, vestibulum orci et. Ipsum elit, aliquam risus ullamcorper nulla. At libero scelerisque fermentum aperiam per. Sed commodo gravida diam etiam dignissim, amet nam.
</p>
</div>
</div>
</div>
<div class="panel panel-default" id="panel2">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-target=
"#collapseTwo" data-toggle="collapse" href=
"#collapseTwo">Testimonials</a>
<i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
<i class="indicator glyphicon glyphicon-chevron-down pull-left"></i></h4>
</div>
<div class="panel-collapse collapse" id="collapseTwo">
<div class="panel-body">
<p>Aliquet varius vel etiam velit in, ultrices eros vitae, pharetra ut velit sit ipsum, nisl dignissim sed eleifend nunc, amet eros. A laoreet egestas et faucibus et. Sit felis lobortis dignissim porta vehicula, ac ea tortor magna eget, eget condimentum est, sit massa ipsum integer, aenean tristique ultricies euismod interdum. Nostra euismod ipsum euismod vestibulum vitae. Urna enim felis leo erat, a mattis sed etiam vivamus tristique accumsan, curabitur wisi pretium sed risus sagittis ac. Eget bibendum suscipit viverra in mauris, cras turpis.
</p>
<p>Cras purus, purus ipsum viverra semper purus wisi in. Penatibus est, ullamcorper dolor vehicula aliquam odio, vel tristique eu ac, non nullam lorem massa dolore duis, justo venenatis. Vitae sed nascetur, metus lacinia suspendisse in eget consequat, est neque gravida phasellus nullam vitae nec, dolor dui orci parturient, eget dolore wisi tellus lorem. Tincidunt sodales quis pellentesque, non vitae blandit. Scelerisque non a nibh. Lobortis erat faucibus duis interdum adipiscing eros. Praesent phasellus, magnis nam in eu, at montes etiam nibh placerat morbi amet, aenean nec lectus luctus. Proin lorem ultricies vero vel consectetuer, et feugiat tempor, neque donec wisi blandit, vulputate aliquet wisi donec eros. Nulla erat, semper dignissim ducimus viverra ante nullam. Donec habitasse, dapibus vitae imperdiet nunc tempor aenean ipsum, quisque est egestas ut senectus metus iaculis, diam lectus convallis, massa gravida est dapibus id habitant. Nibh posuere mi. Auctor convallis augue ipsum.
</p>
</div>
</div>
</div>
</div><!-- Post Info -->
<script>
if($(window).width() > 992){
console.log('test');
$("#accordion").remove();
$("#mobileHover").remove();
}else{
console.log($(window).width());
$("#wantit").remove();
$("#website").remove();
$(accordion).ready(function(){
$('#collapseOne').on('shown', function () {
$(".indicator glyphicon glyphicon-chevron-down pull-right").removeClass("indicator glyphicon glyphicon-chevron-down pull-right").addClass("indicator glyphicon glyphicon-chevron-right pull-right");
});
$('#collapseOne').on('hidden', function () {
$(".indicator glyphicon glyphicon-chevron-right pull-right").removeClass("indicator glyphicon glyphicon-chevron-right pull-right").addClass("indicator glyphicon glyphicon-chevron-down pull-right");
});
});
$('.accordion').on('show', function(){
$(this).parent().find(".indicator glyphicon glyphicon-chevron-down pull-right").removeClass("indicator glyphicon glyphicon-chevron-down pull-right").addClass("indicator glyphicon glyphicon-chevron-up pull-right");
}).on('hide', function(){
$(this).parent().find(".indicator glyphicon glyphicon-chevron-up pull-right").removeClass("indicator glyphicon glyphicon-chevron-up pull-right").addClass("indicator glyphicon glyphicon-chevron-up pull-right");
});
}
</script>
</body>
</html>
It's at the very end by the way!

Class
.indicator{
-moz-transition: all 2s linear;
-webkit-transition: all 2s linear;
transition: all 2s linear;
}
.indicator.down{
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
JS
function toggleChevron(e) {
$(e.target)
.prev('.panel-heading')
.find("i.indicator")
.toggleClass("down");
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);
</script>
for reference https://plnkr.co/edit/3ItOoCFZQlicu7iCcGFL?p=preview

do you mean like this?
$(".rotate").click(function(){
$(this).toggleClass("down") ;
})
.rotate{
-moz-transition: all 2s linear;
-webkit-transition: all 2s linear;
transition: all 2s linear;
}
.rotate.down{
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fa fa-chevron-up rotate"></div>

ScrollSpy Not Working Bootstrap

Hello guys I'm using scroll spy of bootstrap. I have applied some height and a overflow to make the scroll appear but after applying it the scroll spy does not works. I mean that when I scroll up or down the link in the navbar does not changes If I remove the style that I gave it starts working. Here is a Jsbin code. Hope this helps and please tell me what is it that I'm doing wrong
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Section 4-1</li>
<li>Section 4-2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div style="height:200px; overflow:scroll;">
<div id="section1" class="container-fluid">
<h1>Section 1</h1>
..
</div>
<div id="section2" class="container-fluid">
<h1>Section 2</h1>
..
</div>
<div id="section3" class="container-fluid">
<h1>Section 3</h1>
..
</div>
<div id="section41" class="container-fluid">
<h1>Section 4 Submenu 1</h1>
..
</div>
<div id="section42" class="container-fluid">
<h1>Section 4 Submenu 2</h1>
..
</div>
</div>
</body>
JsBin

The problem is that you're overriding the BODY scroll by using style="height:500px;overflow:scroll;" in the DIV that wraps all of the sections.
As a result, the BODY is never scrolled. You can instead put the ScrollSpy on this wrapper DIV..
<div style="height:500px;overflow:scroll;" data-spy="scroll" data-target="#myNavbar" data-offset="50">
...
</div>
Also, the data-target should be #myNavbar...
Working Demo on Codeply

Try the following code. Taken this example form the page - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-scrollspy.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 3 ScrollSpy Events</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".scroll-area").scrollspy({target: "#myNavbar"});
});
</script>
<style type="text/css">
.scroll-area {
height: 250px;
position: relative;
overflow: auto;
}
</style>
</head>
<body>
<div class="container">
<h2>Bootstrap Scrollspy</h2>
<p>Scroll the area below the navbar and see how menu items are highlighted automatically based on the scroll position. The items in dropdown submenu will be highlighted as well.</p>
<nav id="myNavbar" class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<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="#">Scrollspy</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active">Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<li>Section 4</li>
</ul>
</div>
</nav>
<div class="scroll-area" data-spy="scroll" data-offset="0">
<div class="section">
<h3 id="section-1">Section 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
<p>Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
</div>
<hr>
<div class="section">
<h3 id="section-2">Section 2</h3>
<p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis dapibus orci. In dapibus velit blandit pharetra tincidunt. Quisque non sapien nec lacus condimentum facilisis ut iaculis enim. Sed viverra interdum bibendum. Donec ac sollicitudin dolor. Sed fringilla vitae lacus at rutrum. Phasellus congue vestibulum ligula sed consequat.</p>
<p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem convallis sed. Nam odio tortor, dictum quis malesuada at, pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis, diam velit egestas lacus, quis fermentum metus ante quis urna. Sed at facilisis libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum bibendum blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit tincidunt ante. Vivamus sem augue, hendrerit non sapien in, mollis ornare augue.</p>
</div>
<hr>
<div class="section">
<h3 id="section-3">Section 3</h3>
<p>Integer pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. Donec sed nibh vitae lorem porttitor blandit in nec ante. Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec pharetra id arcu eget blandit. Proin imperdiet mattis augue in porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse tincidunt risus quis dolor fringilla blandit. Ut sed sapien at purus lacinia porttitor. Nullam iaculis, felis a pretium ornare, dolor nisl semper tortor, vel sagittis lacus est consequat eros. Sed id pretium nisl. Curabitur dolor nisl, laoreet vitae aliquam id, tincidunt sit amet mauris.</p>
<p>Phasellus vitae suscipit justo. Mauris pharetra feugiat ante id lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus turpis at accumsan tincidunt. Phasellus risus risus, volutpat vel tellus ac, tincidunt fringilla massa. Etiam hendrerit dolor eget ante rutrum adipiscing. Cras interdum ipsum mattis, tempus mauris vel, semper ipsum. Duis sed dolor ut enim lobortis pellentesque ultricies ac ligula. Pellentesque convallis elit nisi, id vulputate ipsum ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse potenti. Integer pellentesque neque et elementum tempus. Curabitur bibendum in ligula ut rhoncus.</p>
<p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo sed ligula porta semper eu quis enim. Pellentesque pellentesque, metus at facilisis hendrerit, lectus velit facilisis leo, quis volutpat turpis arcu quis enim. Nulla viverra lorem elementum interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus. Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti.</p>
</div>
<hr>
<div class="section">
<h3 id="section-4">Section 4</h3>
<p>Nam eget purus nec est consectetur vehicula. Nullam ultrices nisl risus, in viverra libero egestas sit amet. Etiam porttitor dolor non eros pulvinar malesuada. Vestibulum sit amet est mollis nulla tempus aliquet. Praesent luctus hendrerit arcu non laoreet. Morbi consequat placerat magna, ac ornare odio sagittis sed. Donec vitae ullamcorper purus. Vivamus non metus ac justo porta volutpat.</p>
<p>Vivamus mattis accumsan erat, vel convallis risus pretium nec. Integer nunc nulla, viverra ut sem non, scelerisque vehicula arcu. Fusce bibendum convallis augue sit amet lobortis. Cras porta urna turpis, sodales lobortis purus adipiscing id. Maecenas ullamcorper, turpis suscipit pellentesque fringilla, massa lacus pulvinar mi, nec dignissim velit arcu eget purus. Nam at dapibus tellus, eget euismod nisl. Ut eget venenatis sapien. Vivamus vulputate varius mauris, vel varius nisl facilisis ac. Nulla aliquet justo a nibh ornare, eu congue neque rutrum.</p>
<p>Suspendisse a orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum a iaculis lacus. Phasellus vitae convallis ligula, nec volutpat tellus. Vivamus scelerisque mollis nisl, nec vehicula elit egestas a. Sed luctus metus id mi gravida, faucibus convallis neque pretium. Maecenas quis sapien ut leo fringilla tempor vitae sit amet leo. Donec imperdiet tempus placerat. Pellentesque pulvinar ultrices nunc sed ultrices. Morbi vel mi pretium, fermentum lacus et, viverra tellus. Phasellus sodales libero nec dui convallis, sit amet fermentum sapien auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eu elementum nibh, quis varius libero.</p>
</div>
</div>
</div>
</body>
</html>

I think its a some kind of bug trying to remove height and add min-height instead or take another div element and give it max-height:200px or what ever you want
hope this help http://jsbin.com/kubisivuwo/edit?html,output

tabs and pills in bootstrap

I have a tab structure consisting of 5 tabs. All tabs are working fine. Now in my first tab, I have few header tags which are same as the other 4 tabs. So when clicking of each of them, I want to change the active tab and also the contents. My code is as below.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-pills" id="myTab">
<li class="active"><a data-toggle="tab" href="#overview">Overview</a>
</li>
<li><a data-toggle="tab" href="#tab1">tab1</a>
</li>
<li><a data-toggle="tab" href="#tab2">tab2</a>
</li>
<li><a data-toggle="tab" href="#tab3">tab3</a>
</li>
<li><a data-toggle="tab" href="#tab4">tab4</a>
</li>
</ul>
<div class="tab-content">
<div id="overview" class="tab-pane fade in active">
<p>overview</p>
<br>
<a href="#tab1">
<h3>tab1 link</h3>
</a>
<br>
<a href="#tab2">
<h3>tab2 link</h3>
</a>
<br>
<a href="#tab3">
<h3>tab3 link</h3>
</a>
<br>
<a href="#tab4">
<h3>tab4 link</h3>
</a>
</div>
<div id="tab1" class="tab-pane fade">
<p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam porttitor condimentum nisi, eu viverra ipsum porta ut. Nam hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean
volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc facilisis leo at faucibus adipiscing.</p>
</div>
<div id="tab2" class="tab-pane fade">
<p>WInteger convallis, nulla in sollicitudin placerat, ligula enim auctor lectus, in mollis diam dolor at lorem. Sed bibendum nibh sit amet dictum feugiat. Vivamus arcu sem, cursus a feugiat ut, iaculis at erat. Donec vehicula at ligula vitae venenatis.
Sed nunc nulla, vehicula non porttitor in, pharetra et dolor. Fusce nec velit velit. Pellentesque consectetur eros.</p>
</div>
<div id="tab3" class="tab-pane fade">
<p>Donec vel placerat quam, ut euismod risus. Sed a mi suscipit, elementum sem a, hendrerit velit. Donec at erat magna. Sed dignissim orci nec eleifend egestas. Donec eget mi consequat massa vestibulum laoreet. Mauris et ultrices nulla, malesuada volutpat
ante. Fusce ut orci lorem. Donec molestie libero in tempus imperdiet. Cum sociis natoque penatibus et magnis dis parturient.</p>
</div>
<div id="tab4" class="tab-pane fade">
<p>Donec vel placerat quam, ut euismod risus. Sed a mi suscipit, elementum sem a, hendrerit velit. Donec at erat magna. Sed dignissim orci nec eleifend egestas. Donec eget mi consequat massa vestibulum laoreet. Mauris et ultrices nulla, malesuada volutpat
ante. Fusce ut orci lorem. Donec molestie libero in tempus imperdiet. Cum sociis natoque penatibus et magnis dis parturient.</p>
</div>
</div>
Any help soon will help.

Based off bootstrap documentation here
Use a jquery function like this
$('a').click(function(e) {
e.preventDefault();
var href = $(this).attr('href');
$('#myTab a[href="' + $(this).attr('href') + '"]').tab('show');
})
THat will work on any a link you click and take you to the tab its href is set to
Look at this codepen

You just have to place the content inside tab-content to make it work.
This will work like you want it to. Try it:
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-pills" id="myTab">
<li class="active"><a data-toggle="tab" href="#tab1">tab1</a>
</li>
<li><a data-toggle="tab" href="#tab2">tab2</a>
</li>
<li><a data-toggle="tab" href="#tab3">tab3</a>
</li>
<li><a data-toggle="tab" href="#tab4">tab4</a>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<p>overview</p>
<br>
<div id="tab1" class="tab-pane fade in active">
<p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam porttitor condimentum nisi, eu viverra ipsum porta ut. Nam hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean
volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc facilisis leo at faucibus adipiscing.</p>
</div>
<div id = "tab2" class = "tab-pane fade">
<br>
<p>WInteger convallis, nulla in sollicitudin placerat, ligula enim auctor lectus, in mollis diam dolor at lorem. Sed bibendum nibh sit amet dictum feugiat. Vivamus arcu sem, cursus a feugiat ut, iaculis at erat. Donec vehicula at ligula vitae venenatis.
Sed nunc nulla, vehicula non porttitor in, pharetra et dolor. Fusce nec velit velit. Pellentesque consectetur eros.</p>
</div>
<br>
<div id="tab3" class="tab-pane fade">
<p>Donec vel placerat quam, ut euismod risus. Sed a mi suscipit, elementum sem a, hendrerit velit. Donec at erat magna. Sed dignissim orci nec eleifend egestas. Donec eget mi consequat massa vestibulum laoreet. Mauris et ultrices nulla, malesuada volutpat
ante. Fusce ut orci lorem. Donec molestie libero in tempus imperdiet. Cum sociis natoque penatibus et magnis dis parturient.</p>
</div>
<div id="tab4" class="tab-pane fade">
<p>Donec vel placerat quam, ut euismod risus. Sed a mi suscipit, elementum sem a, hendrerit velit. Donec at erat magna. Sed dignissim orci nec eleifend egestas. Donec eget mi consequat massa vestibulum laoreet. Mauris et ultrices nulla, malesuada volutpat
ante. Fusce ut orci lorem. Donec molestie libero in tempus imperdiet. Cum sociis natoque penatibus et magnis dis parturient.</p>
</div>
</div>
Run this codepen

Categories

Resources