Multi Div Issues with clicking individually and affecting removable classes - javascript

I have few divs that will act like independent "buttons" with different products and services. I also created a javascript code that allows you to change the class of the subproducts for each product button. they only show if you click on a certain product. I'm experimenting two issues:
1- I need only to affect the selected one, right now, since they're called the same, is opening them all.
Also, once I open the prefered one, I want the rest to keep the Height: auto, right now they're increasing in size to the reference or the bigger one.
Someone can help me to solve this? this is my actual code:
HTML
<div id="quotingWrapper">
<div id="quotingArea2">
<div id="item">
<h4 class="itemText">Product 1</h4>
<div class="itemHidden">
<h4 class="itemText">First Option</h4>
<h4 class="itemText">Second Option</h4>
<h4 class="itemText">Third Option</h4>
</div>
</div>
<div id="item">
<h4 class="itemText">Product 2</h4>
<div class="itemHidden">
<h4 class="itemText">First Option</h4>
<h4 class="itemText">Second Option</h4>
<h4 class="itemText">Third Option</h4>
</div>
</div>
<div id="item">
<h4 class="itemText">Product 3</h4>
<div class="itemHidden">
<h4 class="itemText">First Option</h4>
<h4 class="itemText">Second Option</h4>
<h4 class="itemText">Third Option</h4>
</div>
</div>
<div id="item">
<h4 class="itemText">Product 4</h4>
<div class="itemHidden">
<h4 class="itemText">First Option</h4>
<h4 class="itemText">Second Option</h4>
<h4 class="itemText">Third Option</h4>
</div>
</div>
<div id="item">
<h4 class="itemText">Product 5</h4>
<div class="itemHidden">
<h4 class="itemText">First Option</h4>
<h4 class="itemText">Second Option</h4>
<h4 class="itemText">Third Option</h4>
</div>
</div>
<div id="item">
<h4 class="itemText">Product 6</h4>
<div class="itemHidden">
<h4 class="itemText">First Option</h4>
<h4 class="itemText">Second Option</h4>
<h4 class="itemText">Third Option</h4>
</div>
</div>
<div id="item">
<h4 class="itemText">Product 7</h4>
<div class="itemHidden">
<h4 class="itemText">First Option</h4>
<h4 class="itemText">Second Option</h4>
<h4 class="itemText">Third Option</h4>
</div>
</div>
</div>
</div>
CSS
body {
margin: 0 auto;
background-color: #fff;
}
#quotingWrapper {
width: 100%;
height: 2000px;
background-color: #662d91;
color: #fff;
position: relative;
text-align: center;
}
#quotingArea2 {
width: 90%;
background-color: pink;
position: relative;
text-align: center;
color: ;
margin:0 auto;
display: flex;
flex-flow: row wrap;
}
#item {
width: 23%;
height: auto;
font-family: 'Open Sans';
font-size:18px;
background-color: #3c1e57;
color: #fff;
cursor: pointer;
margin: 1%;
transition: all 0.2s ease;
}
#item:hover {
background-color: #492362;
}
.itemHidden {
width: 100%;
height: 0px;
position: relative;
background-color: #8345ae;
overflow: hidden;
transition: height 0.4s ease-in-out;
}
.itemHidden2 {
height: auto;
transition: height 0.4s ease-in-out;
}
.itemText {
margin: 0 auto;
padding: 5px;
font-size: 18px;
}
#media all and (max-width:1000px) {
#item {
width: 31.3%;
}
}
#media all and (max-width:650px) {
#item {
width: 48%;
}
}
#media all and (max-width:500px) {
#item {
width: 100%;
}
}
JAVASCRIPT
$('#item').click( function() {
$(".itemHidden").toggleClass("itemHidden2");
} );
Someone can guide me:)!?


You could put a function on each div
<div id="quotingWrapper">
<div id="quotingArea2">
<div id="item" onclick="f(this);">
<h4 class="itemText">Product 1</h4>
<div class="itemHidden">
<h4 class="itemText">First Option</h4>
<h4 class="itemText">Second Option</h4>
<h4 class="itemText">Third Option</h4>
</div>
</div>
and add a function that each div calls
var prevEle;
function f(ele) {
$(ele).find(".itemHidden").toggleClass("itemHidden2");
if (prevEle !== undefined) {
$(prevEle).find(".itemHidden").toggleClass("itemHidden2");
}
prevEle = ele;
}
you really need unique id's though. for some of this, the js is going through all the divs to manipulate them and there's only so much you can do.
https://jsfiddle.net/qts0Lpmq/

Related

How to turn a container div into content slider

I'm working with Bootstrap 3 and I have made this div:
<div class="second-para">
<div class="container">
<div class="second-section">
<div class="container mt-2">
<div class="row">
<div class="col-md-3 col-sm-6 section-two-title">
<h1 class="text-center m-0 py-2">
Newest
</h1>
<h1 class="text-center m-0 py-2">
Courses
</h1>
</div>
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/7096/people-woman-coffee-meeting.jpg" alt="Photo of sunset">
<h5 class="item-card-title mt-3 mb-3">Sierra Web Development • Owner</h5>
<p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
</div>
</div>
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/7357/startup-photos.jpg" alt="Photo of sunset">
<h5 class="card-title mt-3 mb-3">ProVyuh</h5>
<p class="card-text">This is a company that builds websites, web .</p>
</div>
</div>
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/262550/pexels-photo-262550.jpeg" alt="Photo of sunset">
<h5 class="card-title mt-3 mb-3">ProVyuh</h5>
<p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And the result looks like this:
But as I mentioned out in the image, I need to add two icons at the right and left of the cards in order to browse more courses.
So it would be a dynamic content slider.
But I don't know how to do that, so I would really appreciate if you could help me with this...
And here is also the CSS part:
.second-para{
height:500px;
background-color: #ffcc32 !important;
}
.second-section, .third-section, .fourth-section{
padding-top:100px;
}
.card-section{
border-radius: 2%;
}
.second-section img, .third-section img, .fourth-section img{
height:150px;
width:100%;
}
.second-section .item, .third-section .item, .fourth-section .item{
padding-left:5px;
padding-right:5px;
}
.second-section .item-card, .third-section .item-card, .fourth-section .item-card{
transition:0.5s;
cursor:pointer;
}
.second-section .item-card-title, .third-section .item-card-title, .fourth-section .item-card-title{
font-size:15px;
transition:1s;
cursor:pointer;
}
.second-section .item-card-title i, .third-section .item-card-title, .fourth-section .item-card-title{
font-size:15px;
transition:1s;
cursor:pointer;
color:#ffa710
}
.second-section .card-title i:hover,.third-section .card-title i:hover,.fourth-section .card-title i:hover{
transform: scale(1.25) rotate(100deg);
color:#18d4ca;
}
.second-section .card:hover,.third-section .card:hover,.fourth-section .card:hover{
transform: scale(1.05);
box-shadow: 10px 10px 15px rgba(0,0,0,0.3);
}
.second-section .card-text,.third-section .card-text,.fourth-section .card-text{
height:80px;
}
.second-section .card::before, .card::after,.third-section .card::before,.fourth-section .card::before, .card::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: scale3d(0, 0, 1);
transition: transform .3s ease-out 0s;
background: rgba(255, 255, 255, 0.1);
content: '';
pointer-events: none;
}
.second-section .card::before,.third-section .card::before,.fourth-section .card::before {
transform-origin: left top;
}
.second-section .card::after,.third-section .card::after {
transform-origin: right bottom;
}
.second-section .card:hover::before, .card:hover::after, .card:focus::before, .card:focus::after,.third-section .card:hover::before {
transform: scale3d(1, 1, 1);
}
.section-two-title, .section-three-title,.section-fourth-title{
padding-top:5%;
}
.section-two-title h1, .section-three-title h1, .section-fourth-title h1{
font-size:30px !important;
}

As mentioned, you can use Bootstrap's Carousel
You need custom code, however, to show multiple cards at once: Bootstrap carousel multiple frames at once
See this CodePly for another example: https://www.codeply.com/p/0CWffz76Q9
/* https://stackoverflow.com/a/20008623 */
let items = document.querySelectorAll('.carousel .carousel-item')
window.addEventListener('resize', initCarousel);
initCarousel();
function initCarousel() {
items.forEach((el) => {
// number of slides per carousel-item
const minPerSlide = getMinSlides();
let next = el.nextElementSibling
for (var i = 1; i < minPerSlide; i++) {
if (!next) {
// wrap carousel by using first child
next = items[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
})
}
function getMinSlides() {
// https://stackoverflow.com/a/8876069
const width = Math.max(
document.documentElement.clientWidth,
window.innerWidth || 0
)
if (width < 576) return 1
if (width < 768) return 2
return 4
}
.second-para {
height: 500px;
background-color: #ffcc32 !important;
}
.second-section,
.third-section,
.fourth-section {
padding-top: 100px;
}
.card-section {
border-radius: 2%;
}
.second-section img,
.third-section img,
.fourth-section img {
height: 150px;
width: 100%;
}
.second-section .item,
.third-section .item,
.fourth-section .item {
padding-left: 5px;
padding-right: 5px;
}
.second-section .item-card,
.third-section .item-card,
.fourth-section .item-card {
transition: 0.5s;
cursor: pointer;
}
.second-section .item-card-title,
.third-section .item-card-title,
.fourth-section .item-card-title {
font-size: 15px;
transition: 1s;
cursor: pointer;
}
.second-section .item-card-title i,
.third-section .item-card-title,
.fourth-section .item-card-title {
font-size: 15px;
transition: 1s;
cursor: pointer;
color: #ffa710
}
.second-section .card-title i:hover,
.third-section .card-title i:hover,
.fourth-section .card-title i:hover {
transform: scale(1.25) rotate(100deg);
color: #18d4ca;
}
.second-section .card:hover,
.third-section .card:hover,
.fourth-section .card:hover {
transform: scale(1.05);
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
}
.second-section .card-text,
.third-section .card-text,
.fourth-section .card-text {
height: 80px;
}
.second-section .card::before,
.card::after,
.third-section .card::before,
.fourth-section .card::before,
.card::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: scale3d(0, 0, 1);
transition: transform .3s ease-out 0s;
background: rgba(255, 255, 255, 0.1);
content: '';
pointer-events: none;
}
.second-section .card::before,
.third-section .card::before,
.fourth-section .card::before {
transform-origin: left top;
}
.second-section .card::after,
.third-section .card::after {
transform-origin: right bottom;
}
.second-section .card:hover::before,
.card:hover::after,
.card:focus::before,
.card:focus::after,
.third-section .card:hover::before {
transform: scale3d(1, 1, 1);
}
.section-two-title,
.section-three-title,
.section-fourth-title {
padding-top: 5%;
}
.section-two-title h1,
.section-three-title h1,
.section-fourth-title h1 {
font-size: 30px !important;
}
/* More Carousel code */
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
/* https://stackoverflow.com/a/20008623 */
#media (min-width: 576px) {
.carousel-inner .carousel-item-end.active,
.carousel-inner .carousel-item-next {
transform: translateX(50%);
}
.carousel-inner .carousel-item-start.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-50%);
}
}
#media (min-width: 768px) {
.carousel-inner .carousel-item-end.active,
.carousel-inner .carousel-item-next {
transform: translateX(25%);
}
.carousel-inner .carousel-item-start.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-25%);
}
}
.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
transform: translateX(0);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="second-para">
<div class="container">
<div class="second-section">
<div class="container mt-2">
<h1 class="text-center m-0 py-2">
Newest Courses
</h1>
<div class="row">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/7096/people-woman-coffee-meeting.jpg" alt="Photo of sunset">
<h5 class="item-card-title mt-3 mb-3">Sierra Web Development • Owner</h5>
<p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/7357/startup-photos.jpg" alt="Photo of sunset">
<h5 class="card-title mt-3 mb-3">ProVyuh</h5>
<p class="card-text">This is a company that builds websites, web .</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/262550/pexels-photo-262550.jpeg" alt="Photo of sunset">
<h5 class="card-title mt-3 mb-3">ProVyuh</h5>
<p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/7096/people-woman-coffee-meeting.jpg" alt="Photo of sunset">
<h5 class="item-card-title mt-3 mb-3">Sierra Web Development • Owner</h5>
<p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/7357/startup-photos.jpg" alt="Photo of sunset">
<h5 class="card-title mt-3 mb-3">ProVyuh</h5>
<p class="card-text">This is a company that builds websites, web .</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/262550/pexels-photo-262550.jpeg" alt="Photo of sunset">
<h5 class="card-title mt-3 mb-3">ProVyuh</h5>
<p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/7096/people-woman-coffee-meeting.jpg" alt="Photo of sunset">
<h5 class="item-card-title mt-3 mb-3">Sierra Web Development • Owner</h5>
<p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/7357/startup-photos.jpg" alt="Photo of sunset">
<h5 class="card-title mt-3 mb-3">ProVyuh</h5>
<p class="card-text">This is a company that builds websites, web .</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/262550/pexels-photo-262550.jpeg" alt="Photo of sunset">
<h5 class="card-title mt-3 mb-3">ProVyuh</h5>
<p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>

Why jQuery .scroll() method is not working with .addClass() method

I am trying to add a class named .nav-color if window is scrolled greater than or equal to 50px with jQuery (jQuery version 3.6.0).
For that I have crated a .nav-color class and trying to add it to #navigation with jQuery .addClass() method but somehow it is not working.
My jQuery Code:
$(document).ready(function() {
$(body).scroll(function() {
if ($(body).scroll() > 20) {
$("#navigation").addClass("nav-color");
}
else {
$("#navigation").removeClass("nav-color");
}
});
});
Why is that happening? Why the code is not working?
Here is my full code:
<!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.0">
<link rel="icon" href="./images/favicon.ico">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
text-decoration: none;
list-style: none;
}
header {
background: linear-gradient(rgba(45, 44, 48, 0.753), rgba(45, 44, 48, 0.753)), url(./images/bg-masthead.jpg);
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
font-weight: bold;
}
.navbar-brand {
font-size: 20px;
}
.navbar {
position: fixed;
width: 100%;
top: 0;
left: 0;
}
#header-texts {
height: 90vh;
align-items: center;
margin-top: 60px;
height: 90vh;
}
#header-texts-1 {
font-size: 55px;
}
#header-texts-2 {
font-size: 20px;
font-weight: normal;
}
#header-btn {
background: #f24516;
color: white;
padding: 15px 20px;
border-radius: 30px;
letter-spacing: 0.8px;
}
#s-5:hover {
border-bottom: 1px solid #f24516;
}
.nav-color {
background-color: #ffffff;
color: black;
}
/* ========================= Responsive ========================= */
#media (max-width: 540px) {
#header-texts-1 {
font-size: 30px;
}
#header-texts-2 {
font-size: 16px;
}
}
#media (min-width: 992px) {
.container {
width: 100vw !important;
}
.navbar-expand-lg {
background: transparent !important;
}
a {
color: white !important;
}
}
</style>
<title>Creative</title>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="navigation">
<div class="container-fluid">
<a class="navbar-brand ms-lg-5" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav me-lg-5" id="nav-items">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Protfolio</a>
<a class="nav-link" href="#">Contact</a>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="row text-center" id="header-texts">
<div class="col">
<p id="header-texts-1">YOUR FAVORITE SOURCE OF FREE<br>BOOTSTRAP THEMES</p>
<hr class="mb-4" style="width: 5%; margin: auto; height: 5px; border: none; color: #ff0000; background-color:#ff0000; opacity: 1;">
<p id="header-texts-2">Start Bootstrap can help you build better websites using the Bootstrap<br>framework! Just download a theme and start customizing, no strings attached!</p>
<button class="btn mt-4" id="header-btn">FIND OUT MORE</button>
</div>
</div>
</div>
</header>
<!-- ========================= Section 02 ========================= -->
<div class="sec-2 text-light text-center py-5" style="background-color: #f4623a;">
<p class="display-6">We've got what you need!</p>
<hr class="mb-4" style="width: 5%; margin: auto; height: 3px; border: none; color: #fff; background-color:#fff;
opacity: 1;">
<p class="w-md-50 m-auto">Start Bootstrap has everything you need to get your new website up and running in no time! Choose one of our open source, free to download, and easy to use themes! No strings attached!</p>
<button class="btn mt-4 bg-light text-dark fw-bold" id="header-btn">GET STRATED!</button>
</div>
<!-- ========================= Section 03 ========================= -->
<div class="sec-3 py-5 my-5">
<div class="container text-center">
<h2>At your Service</h2>
<hr class="my-4" style="width: 5%; margin: auto; height: 3px; border: none; color: #f24516; background-color:#f24516;
opacity: 1;">
<div class="row text-center mt-5">
<div class="col-md">
<img src="./images/diamond.png" alt="">
<p class="fw-bold mt-3 mb-0" style="font-size: 22px;">Sturdy Themes</p>
<p>Our themes are updated regularly to keep them bug free!</p>
</div>
<div class="col-md">
<img src="./images/uptodate.png" alt="">
<p class="fw-bold mt-3 mb-0" style="font-size: 22px;">Up to Date</p>
<p>All dependencies are kept current to keep things fresh.</p>
</div>
<div class="col-md">
<img src="./images/globe.png" alt="">
<p class="fw-bold mt-3 mb-0" style="font-size: 22px;">Ready to Publish</p>
<p>You can use this design as is, or you can make changes!</p>
</div>
<div class="col-md">
<img src="./images/heart.png" alt="">
<p class="fw-bold mt-3 mb-0" style="font-size: 22px;">Made with Love</p>
<p>Is it really open source if it's not made with love?</p>
</div>
</div>
</div>
</div>
<!-- ========================= Section 04 ========================= -->
<div class="container-fluid">
<div class="row">
<div class="col-md px-0"><img class="w-100" src="./images/portfolio/thumbnails/1.jpg" alt=""></div>
<div class="col-md px-0"><img class="w-100" src="./images/portfolio/thumbnails/2.jpg" alt=""></div>
<div class="col-md px-0"><img class="w-100" src="./images/portfolio/thumbnails/3.jpg" alt=""></div>
</div>
<div class="row">
<div class="col-md px-0"><img class="w-100" src="./images/portfolio/thumbnails/4.jpg" alt=""></div>
<div class="col-md px-0"><img class="w-100" src="./images/portfolio/thumbnails/5.jpg" alt=""></div>
<div class="col-md px-0"><img class="w-100" src="./images/portfolio/thumbnails/6.jpg" alt=""></div>
</div>
<div class="row py-5" style="background-color: #343a40;">
<div class="col text-center py-5">
<h2 class="text-light">Free Download at Start Bootstrap!</h2>
<button class="btn mt-4 bg-light text-dark fw-bold" id="header-btn">DOWNLOAD NOW!</button>
</div>
</div>
</div>
<!-- ========================= Section 05 ========================= -->
<div class="container text-center py-5 my-5">
<h2>Let's Get In Touch!</h2>
<hr class="my-4" style="width: 5%; margin: auto; height: 3px; border: none; color: #f24516; background-color:#f24516;
opacity: 1;">
<p class="w-50 m-auto">Ready to start your next project with us? Give us a call or send us an email and we will get back to you as soon as possible!</p>
<div class="row w-50 m-auto mt-5">
<div class="col-md">
<img src="./images/phone.png" alt="">
<p>+1 (555) 123-4567</p>
</div>
<div class="col-md">
<img src="./images/email.png" alt="">
contact#yourwebsite.com
</div>
</div>
</div>
<!-- ========================= footer ========================= -->
<div class="container-fluid text-center py-5" style="background-color: #f8f9fa;">
<p class="mb-0">Copyright © 2021 - Dabananda Mitra</p>
</div>
<!-- ========================= JavaScript ========================= -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$(body).scroll(function() {
if ($(body).scroll() > 20) {
$("#navigation").addClass("nav-color");
}
else {
$("#navigation").removeClass("nav-color");
}
});
});
</script>
</body>
</html>

You can use scrollTop in the following way (and detect scroll for window, not body):
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 20) {
$("#navigation").addClass("nav-color");
} else {
$("#navigation").removeClass("nav-color");
}
});
});
Applied to your snippet:
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 20) {
$("#navigation").addClass("nav-color");
} else {
$("#navigation").removeClass("nav-color");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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.0">
<link rel="icon" href="./images/favicon.ico">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
text-decoration: none;
list-style: none;
}
header {
background: linear-gradient(rgba(45, 44, 48, 0.753), rgba(45, 44, 48, 0.753)), url(./images/bg-masthead.jpg);
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
font-weight: bold;
}
.navbar-brand {
font-size: 20px;
}
.navbar {
position: fixed;
width: 100%;
top: 0;
left: 0;
}
#header-texts {
height: 90vh;
align-items: center;
margin-top: 60px;
height: 90vh;
}
#header-texts-1 {
font-size: 55px;
}
#header-texts-2 {
font-size: 20px;
font-weight: normal;
}
#header-btn {
background: #f24516;
color: white;
padding: 15px 20px;
border-radius: 30px;
letter-spacing: 0.8px;
}
#s-5:hover {
border-bottom: 1px solid #f24516;
}
.nav-color {
background-color: #ffffff;
color: black;
}
/* ========================= Responsive ========================= */
#media (max-width: 540px) {
#header-texts-1 {
font-size: 30px;
}
#header-texts-2 {
font-size: 16px;
}
}
#media (min-width: 992px) {
.container {
width: 100vw !important;
}
.navbar-expand-lg {
background: transparent !important;
}
a {
color: white !important;
}
}
</style>
<title>Creative</title>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="navigation">
<div class="container-fluid">
<a class="navbar-brand ms-lg-5" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav me-lg-5" id="nav-items">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Protfolio</a>
<a class="nav-link" href="#">Contact</a>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="row text-center" id="header-texts">
<div class="col">
<p id="header-texts-1">YOUR FAVORITE SOURCE OF FREE<br>BOOTSTRAP THEMES</p>
<hr class="mb-4" style="width: 5%; margin: auto; height: 5px; border: none; color: #ff0000; background-color:#ff0000; opacity: 1;">
<p id="header-texts-2">Start Bootstrap can help you build better websites using the Bootstrap<br>framework! Just download a theme and start customizing, no strings attached!</p>
<button class="btn mt-4" id="header-btn">FIND OUT MORE</button>
</div>
</div>
</div>
</header>
<!-- ========================= Section 02 ========================= -->
<div class="sec-2 text-light text-center py-5" style="background-color: #f4623a;">
<p class="display-6">We've got what you need!</p>
<hr class="mb-4" style="width: 5%; margin: auto; height: 3px; border: none; color: #fff; background-color:#fff;
opacity: 1;">
<p class="w-md-50 m-auto">Start Bootstrap has everything you need to get your new website up and running in no time! Choose one of our open source, free to download, and easy to use themes! No strings attached!</p>
<button class="btn mt-4 bg-light text-dark fw-bold" id="header-btn">GET STRATED!</button>
</div>
<!-- ========================= Section 03 ========================= -->
<div class="sec-3 py-5 my-5">
<div class="container text-center">
<h2>At your Service</h2>
<hr class="my-4" style="width: 5%; margin: auto; height: 3px; border: none; color: #f24516; background-color:#f24516;
opacity: 1;">
<div class="row text-center mt-5">
<div class="col-md">
<img src="./images/diamond.png" alt="">
<p class="fw-bold mt-3 mb-0" style="font-size: 22px;">Sturdy Themes</p>
<p>Our themes are updated regularly to keep them bug free!</p>
</div>
<div class="col-md">
<img src="./images/uptodate.png" alt="">
<p class="fw-bold mt-3 mb-0" style="font-size: 22px;">Up to Date</p>
<p>All dependencies are kept current to keep things fresh.</p>
</div>
<div class="col-md">
<img src="./images/globe.png" alt="">
<p class="fw-bold mt-3 mb-0" style="font-size: 22px;">Ready to Publish</p>
<p>You can use this design as is, or you can make changes!</p>
</div>
<div class="col-md">
<img src="./images/heart.png" alt="">
<p class="fw-bold mt-3 mb-0" style="font-size: 22px;">Made with Love</p>
<p>Is it really open source if it's not made with love?</p>
</div>
</div>
</div>
</div>
<!-- ========================= Section 04 ========================= -->
<div class="container-fluid">
<div class="row">
<div class="col-md px-0"><img class="w-100" src="./images/portfolio/thumbnails/1.jpg" alt=""></div>
<div class="col-md px-0"><img class="w-100" src="./images/portfolio/thumbnails/2.jpg" alt=""></div>
<div class="col-md px-0"><img class="w-100" src="./images/portfolio/thumbnails/3.jpg" alt=""></div>
</div>
<div class="row">
<div class="col-md px-0"><img class="w-100" src="./images/portfolio/thumbnails/4.jpg" alt=""></div>
<div class="col-md px-0"><img class="w-100" src="./images/portfolio/thumbnails/5.jpg" alt=""></div>
<div class="col-md px-0"><img class="w-100" src="./images/portfolio/thumbnails/6.jpg" alt=""></div>
</div>
<div class="row py-5" style="background-color: #343a40;">
<div class="col text-center py-5">
<h2 class="text-light">Free Download at Start Bootstrap!</h2>
<button class="btn mt-4 bg-light text-dark fw-bold" id="header-btn">DOWNLOAD NOW!</button>
</div>
</div>
</div>
<!-- ========================= Section 05 ========================= -->
<div class="container text-center py-5 my-5">
<h2>Let's Get In Touch!</h2>
<hr class="my-4" style="width: 5%; margin: auto; height: 3px; border: none; color: #f24516; background-color:#f24516;
opacity: 1;">
<p class="w-50 m-auto">Ready to start your next project with us? Give us a call or send us an email and we will get back to you as soon as possible!</p>
<div class="row w-50 m-auto mt-5">
<div class="col-md">
<img src="./images/phone.png" alt="">
<p>+1 (555) 123-4567</p>
</div>
<div class="col-md">
<img src="./images/email.png" alt="">
contact#yourwebsite.com
</div>
</div>
</div>
<!-- ========================= footer ========================= -->
<div class="container-fluid text-center py-5" style="background-color: #f8f9fa;">
<p class="mb-0">Copyright © 2021 - Dabananda Mitra</p>
</div>
<!-- ========================= JavaScript ========================= -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>

You accidently used the scroll()-trigger instead of the scrollTop()-function
Correct it to
$(document).ready(function() {
$(body).scroll(function() {
if ($(body).scrollTop() > 20) {
$("#navigation").addClass("nav-color");
}
else {
$("#navigation").removeClass("nav-color");
}
});
});

how to open accordion if its inside filter by using anchor tag

I am stuck in some unusual situation. I want to redirect button to the specific page where there are multiple category filters of bike models and similar category models description is mentioned in another page with same kind of filter but the inside filter, there are multiple accordions according to models.
Whenever I am trying to redirect link to particular models and its accordion should open but it is redirecting to only first element. Here is code
I have tried with adding id after link but its not working because there is filter in between
// add attempt here
$(document).ready(function() {
$(".rm-box").hide();
});
$(document).ready(function(){
$(".button").click(function(){
var value = $(this).attr("data-filter");
if (value == "all")
{
$(".filters").hide('1000');
}
else
{
$(".filters").not("." + value).hide("1000");
$(".filters").filter("." + value).show("1000");
}
$("ul .button").click(function(){
$(this).addClass('active').siblings().removeClass('active');
})
})
})
$(document).ready(function() {
var hash = window.location.hash;
hash && $('ul.myfilter a[href="' + hash + '"]').panel-body('show');
});
/* add helpful css here */
ul.myfilter {
padding: 0;
position: relative;
width: 100%;
margin: 10px 10px 30px;
}
.myfilter>li {
list-style: none;
float: left;
padding: 10px 20px;
color: #ffffff;
margin-right: 15px;
font-family: 'Oswald';
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
font-size: 24px;
}
.myfilter>li:hover, .active {
color: #ff6501!important;
font-size: 30px!important;
}
.filter-cont{
padding: 0 30px;
position: relative;
padding: 30px;
box-sizing: border-box;
background-color: #000000;
width: 100%;
margin: 0;
}
.iron-883{
height:400px;
width: 100%;
background-size: cover;
background-position: 50%;
}
.acco-title:hover {
text-decoration: none;
}
.acco-title {
font-family: 'Montserrat';
font-weight: 700;
color: #ff6501 !important;
font-size: 24px;
text-transform: uppercase;
}
.colorview{
position: relative;
background-color: #363636;
width: 40%;
height: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<ul class="myfilter">
<li class="button active" data-filter="sportster">Sportster</li>
<li class="button" data-filter="street">Street</li>
<li class="button" data-filter="softail">Softail</li>
<li class="button" data-filter="touring">Touring</li>
<li class="button" data-filter="cvo">Cvo</li>
<div style="clear: both;"></div>
</ul>
<div class="box filters sportster">
<div class="row">
<div class="col-md-6 col-xs-12 common-for-all">
<div class="col-md-4 cmn-fit-img iron-883">
</div>
<div class="col-md-2 cmn-fit-txt wh-rhs">
<h4>IRON 883</h4>
<a class="orng-btn filt-bike-link" href="hdmodels.html#collapse1">Know More</a>
</div>
</div>
<div class="col-md-6 col-xs-12 common-for-all">
<div class="col-md-4 cmn-fit-img forty-8">
</div>
<div class="col-md-2 cmn-fit-txt orng-rhs">
<h4>FORTY EIGHT</h4>
<a class="white-btn filt-bike-link" href="hdmodels.html#collapse2">Know More</a>
</div>
</div>
</div>
<div class="row hd-sportster">
<div class="col-md-6 col-xs-12 common-for-all">
<div class="col-md-4 cmn-fit-img custom-1200">
</div>
<div class="col-md-2 cmn-fit-txt orng-rhs">
<h4>1200 CUSTOM</h4>
<a class="white-btn filt-bike-link" href="hdmodels.html#collapse3">Know More</a>
</div>
</div>
<div class="col-md-6 col-xs-12 common-for-all">
<div class="col-md-4 cmn-fit-img hd-roadster">
</div>
<div class="col-md-2 cmn-fit-txt wh-rhs">
<h4>ROADSTER</h4>
<a class="orng-btn filt-bike-link" href="hdmodels.html">Know More</a>
</div>
</div>
</div>
</div>
<ul class="myfilter">
<li class="button active" data-filter="street">Street</li>
<li class="button" data-filter="sportster">Sportster</li>
<li class="button" data-filter="softail">Softail</li>
<li class="button" data-filter="touring">Touring</li>
<li class="button" data-filter="cvo">Cvo</li>
<div style="clear: both;"></div>
</ul>
<div class="box filters street">
<div class="panel-group" id="streetaccordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#streetaccordion" href="#collapse1" class="acco-title">Harley-Davidson Street-750</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
Some Code
</div>
</div>
</div>
</div>
</div>

I am not going to try to figure out ALL your functionality but just address the question. Note where the element with id collapse2 is open when this is ran.
I used this reference: https://getbootstrap.com/docs/4.0/components/collapse/
I altered some CSS etc. just to show it better in this limited context more clearly. You were close but the key is the selector and then trigger the show event. These are the key lines: (comments in the code, note where they are placed)
let hash = window.location.hash;
$('#' + hash).collapse('show');
Side note, I moved these outside the UL since a UL can only contain li or a nested list item and added a class instead of in-line style:
<div class="clear-things"></div>
Reference https://www.w3.org/TR/html401/struct/lists.html#h-10.2
$(function() {
//$(".rm-box").hide();
$("ul.myfilter").find(".button").on('color-siblings', function(event) {
$(this).addClass('active').siblings().removeClass('active');
}).on('click', function(event) {
let filters = $(".filters");
let value = $(this).data("filter");
if (value == "all") {
filters.hide('1000');
} else {
filters.not("." + value).hide("1000");
filters.filter("." + value).show("1000");
}
$(this).trigger('color-siblings');
});
// code that toggles the collapse in the document ready event handler
// could also be a custom event trigger like I show for the color above
let hash = window.location.hash;
hash = "collapse2"; // just to test - get hash as above
// assumption of ID here thus the '#', ID MUST be unique so that is OK
$('#' + hash).collapse('show');
});
/* add helpful css here */
div>ul.myfilter {
background-color: #333333;
border: solid 1px lime;
}
/*so we see it */
ul.myfilter {
padding: 0;
position: relative;
width: 100%;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 30px;
}
.myfilter>li {
list-style: none;
float: left;
padding-top: 1em;
padding-right: 1.2em;
color: #0165ff;
margin-right: 0.25em;
font-family: 'Oswald';
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
font-size: 1.2em;
}
.myfilter>li:hover,
.active {
color: #ff6501!important;
}
.filter-cont {
padding: 0 30px;
position: relative;
padding: 30px;
box-sizing: border-box;
background-color: #000000;
width: 100%;
margin: 0;
}
.iron-883 {
height: 10px;
width: 100%;
background-size: cover;
background-position: 50%;
}
.acco-title:hover {
text-decoration: none;
}
.acco-title {
font-family: 'Montserrat';
font-weight: 700;
color: #ff6501 !important;
font-size: 24px;
text-transform: uppercase;
}
.colorview {
position: relative;
background-color: #363636;
width: 40%;
height: 500px;
}
.clear-things {
clear: both;
}
.panel-body {border:solid blue 1px;}
<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="accordion" id="accordionExample">
<ul class="myfilter">
<li class="button active" data-filter="sportster">Sportster</li>
<li class="button" data-filter="street">Street</li>
<li class="button" data-filter="softail">Softail</li>
<li class="button" data-filter="touring">Touring</li>
<li class="button" data-filter="cvo">Cvo</li>
</ul>
<div class="clear-things"></div>
<div class="box filters sportster">
<div class="row">
<div class="col-md-6 col-xs-12 common-for-all">
<div class="col-md-4 cmn-fit-img iron-883">
</div>
<div class="col-md-2 cmn-fit-txt wh-rhs">
<h4>IRON 883</h4>
<a class="orng-btn filt-bike-link" href="#collapse1">Know More</a>
</div>
</div>
<div class="col-md-6 col-xs-12 common-for-all">
<div class="col-md-4 cmn-fit-img forty-8">
</div>
<div class="col-md-2 cmn-fit-txt orng-rhs">
<h4>FORTY EIGHT</h4>
<a class="white-btn filt-bike-link" href="#collapse2">Know More</a>
</div>
</div>
</div>
<div class="row hd-sportster">
<div class="col-md-6 col-xs-12 common-for-all">
<div class="col-md-4 cmn-fit-img custom-1200">
</div>
<div class="col-md-2 cmn-fit-txt orng-rhs">
<h4>1200 CUSTOM</h4>
<a class="white-btn filt-bike-link" href="hdmodels.html#collapse3">Know More</a>
</div>
</div>
<div class="col-md-6 col-xs-12 common-for-all">
<div class="col-md-4 cmn-fit-img hd-roadster">
</div>
<div class="col-md-2 cmn-fit-txt wh-rhs">
<h4>ROADSTER</h4>
<a class="orng-btn filt-bike-link" href="#collapse3">Know More</a>
</div>
</div>
</div>
</div>
<ul class="myfilter">
<li class="button active" data-filter="street">Street</li>
<li class="button" data-filter="sportster">Sportster</li>
<li class="button" data-filter="softail">Softail</li>
<li class="button" data-filter="touring">Touring</li>
<li class="button" data-filter="cvo">Cvo</li>
</ul>
<div class="clear-things"></div>
<div class="box filters street">
<div class="panel-group" id="streetaccordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#streetaccordion" href="#collapse1" class="acco-title">Harley-Davidson Street-750</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
Some Code 750 CC
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#streetaccordion" href="#collapse2" class="acco-title">Harley-Davidson Forty Eight</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse in">
<div class="panel-body">
Some Code Forty Eight Cheese bits
</div>
</div>
</div>
</div>
</div>
</div>

Make Page go down on-click to bottom of Bootstrap Accordion Panel Body

I have a bootstrap accordion on my website and I am trying to make the page go down to the bottom of the panel body on-click. Currently if you click on one of the images you may not notice that it expands into an accordion with words under the picture. Therefore when someone clicks a picture, I want the page to go to the bottom of the selected panel body on-click.
To see an example, visit https://codepen.io/aahmed2/pen/rmEojo?editors=1000
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="row health-main">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default col-md-4">
<div class="panel-heading pet-health" alt="Cat on sidewalk" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseTwo" aria-expanded="false" aria-controls="collapseOne" role="tab" id="headingTwo">
<h2>Pet Health & Safety</h2>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<h4>Pet Diseases</h4>
<!--<h4>Pet Allergies</h4>-->
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading livestock-health" alt="Young cow near barn" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree" role="tab" id="headingThree">
<h2>Livestock Health & Safety</h2>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<h4>Livestock Diseases</h4>
<!--<h4>Livestock Allergies</h4>-->
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading wildlife" alt="Raccoon" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix" role="tab" id="headingSix">
<h2>Wildlife Health & Safety</h2>
</div>
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
<div class="panel-body">
<h4>Wildlife Diseases</h4>
<h4>Wildlife Damage Management</h4>
<h4>Wildlife Conservation</h4>
</div>
</div>
</div>
</div>
</div>
<div class="row health-main">
<div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
<div class="panel panel-default col-md-4">
<div class="panel-heading human-health" alt="Person sitting next to dog in a park" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour" role="tab" id="headingFour">
<h2>Human Health & Safety</h2>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<h4>Zoonotic Diseases</h4>
<h4>Allergies</h4>
<h4>Sanitation</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading insect-tick-mite" alt="Bee on flower" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" role="tab" id="headingOne">
<h2>Insects, Ticks, and Mites</h2>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<h4>Diseases</h4></a>
<h4>Pests</h4>
<h4>Pollinator Health</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading eco-health" alt="Woman holding child's hand walking down a trail" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive" role="tab" id="headingFive">
<h2>Ecosystem Health</h2>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
<h4>Plant Health</h4>
<h4>Water Quality</h4>
<h4>Air Quality</h4>
<h4>Soil Quality</h4>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
CSS
.health-main #accordion {
margin-top: 25px;
cursor: pointer;
}
.health-main #accordion2 {
margin-top: -19px;
cursor: pointer;
margin-bottom: 0px;
}
.health-main .panel-heading:focus {
border: none;
outline: 0;
}
.health-main .panel-group {
clear: both;
}
.health-main .panel-group .panel {
border-radius: 0%;
border-width: 0;
padding: 0 !important;
}
.health-main .panel-group .panel-heading {
background-color: rgba(0,0,0,1);
border-radius: 0%;
color: #fff;
height: 350px;
text-align: center;
}
.health-main .panel-group .panel-heading h2 {
font-size: 1.99em;
text-transform: none;
color: #fff;
margin-top: 140px;
text-shadow: 2px 2px 3px #333332;
}
.health-main .panel-group .panel-heading a:active, .health-main .panel-group .panel-heading a:visited, .health-main .panel-group .panel-heading a:focus {
text-decoration: none !important;
}
.health-main .panel-group .insect-tick-mite {
background: url(http://www.slate.com/content/dam/slate/articles/double_x/the_kids/2015/05/150522_KIDS_Tick.jpg.CROP.promo-mediumlarge.jpg) bottom no-repeat;
background-size: cover;
}
.health-main .panel-group .pet-health {
background: url(https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg) center center no-repeat;
background-size: cover;
}
.health-main .panel-group .livestock-health {
background: url(https://articles.extension.org//sites/default/files/styles/large/public/CalfEarlyIDFig1.jpg) center center no-repeat;
background-size: cover;
}
.health-main .panel-group .wildlife {
background: url(https://abcwildlife.com/wp-content/uploads/2015/05/Raccoon-Control-Identifying-Raccoon-Damage.jpg) center center no-repeat;
background-size: cover;
}
.health-main .panel-group .human-health {
background: url(https://www.gatescambridge.org/sites/www.gatescambridge.org/files/styles/flexslider_full_900x500/public/3node072child_and_dog.jpg?itok=Tsuklx_F) center center no-repeat;
background-size: cover;
}
.health-main .panel-group .eco-health {
background: url(http://guelph.ca/wp-content/uploads/trees.jpg) bottom no-repeat;
background-size: cover;
}
.health-main .panel-group .panel-collapse {
background-color: #c1c0be;
}
.health-main .panel-group .panel-body {
padding-top: 20px;
padding-bottom: 30px;
text-align: center;
}
.health-main .panel-group a {
color: #000000;
}
.health-main .panel-group a:hover {
color: #fff;
text-decoration: none;
}
.health-main .panel-group > .panel {
margin-top: 5px;
}

What you need to do is hook on to the bootstraps show event for the accordions shown.bs.collapse. This is so you can get the height of the wrapper element after the accordion has finished expanding. You then have everything you need to achieve what you want. I have commented the code to help you see what I have done. The script should be placed after your jQuery and Bootstrap JS includes.
<script type="text/javascript">
$(document).ready(function() {
// do something when accordion has finished expanding the relevent element
$('.panel-collapse').on('shown.bs.collapse', function() {
// $(this).parent().offset().top gets the top position of the parent element.
// $(window).height() gets the height of the window.
// $(this).parent().height() gets the height of the parent element.
// Subtract the top position of the parent element by the height of the window minus the height of the parent elements height.
var scroll = $(this).parent().offset().top - ( $(window).height() - $(this).parent().height() );
// animate the window scroll by the stored scroll variable.
// The 500 is how long the scroll takes in milliseconds.
$('html, body').animate({
scrollTop: scroll
}, 500);
})
});
</script>

Bootstrap side navbar wont collapse on link click

I am trying to build a website for a friend. I am not much in the way of coding as it has been quite a long time since I have messed with it. I am using bootstrap for this project. I cant figure out how to get the side navbar to collapse after clicking on a link. It will collapse if you click the "X" in the corner. Any help will be greatly appreciated. The website is up at this link.

Use jQuery for this:
$('#sidebar-nav a').click(function () {
$('#sidebar-wrapper').removeClass('active');
}
It will remove active class from your sidebar menu when you click on the link in it.

Just add another function to remove the active class from the sidebar-wrapper ID when a link is clicked.
// Closes the sidebar menu on link click
$("#sidebar-wrapper a").click(function (e) {
e.preventDefault();
$("#sidebar-wrapper").removeClass("active");
});
See working example Snippet.
$(document).ready(function() {
// Opens the sidebar menu
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
// Closes the sidebar menu
$("#menu-close").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
// Closes the sidebar menu on link click
$("#sidebar-wrapper a").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").removeClass("active");
});
// Scrolls to the selected menu item on the page
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
});
html,
body {
width: 100%;
height: 100%;
}
body {
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.text-vertical-center {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.text-vertical-center h1 {
margin: 0;
padding: 0;
font-size: 4.5em;
font-weight: 700;
}
.btn-dark {
border-radius: 0;
color: #fff;
background-color: rgba(0, 0, 0, 0.4);
}
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
color: #fff;
background-color: rgba(0, 0, 0, 0.7);
}
.btn-light {
border-radius: 0;
color: #333;
background-color: rgb(255, 255, 255);
}
.btn-light:hover,
.btn-light:focus,
.btn-light:active {
color: #333;
background-color: rgba(255, 255, 255, 0.8);
}
hr.small {
max-width: 100px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
right: 0;
width: 250px;
height: 100%;
margin-right: -250px;
overflow-y: auto;
background: #222;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 55px;
font-size: 18px;
line-height: 55px;
}
.sidebar-nav > .sidebar-brand a {
color: #999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#menu-toggle {
z-index: 1;
position: fixed;
top: 0;
right: 0;
}
#sidebar-wrapper.active {
right: 250px;
width: 250px;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.toggle {
margin: 5px 5px 0 0;
}
.header {
display: table;
position: relative;
width: 100%;
height: 100%;
background: url(../img/bg.jpg) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.about {
padding: 50px 0;
}
.services {
padding: 50px 0;
}
.service-item {
margin-bottom: 30px;
}
.callout {
display: table;
width: 100%;
height: 400px;
color: #fff;
background: url(../img/callout.jpg) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.portfolio {
padding: 50px 0;
}
.portfolio-item {
margin-bottom: 30px;
}
.img-portfolio {
margin: 0 auto;
}
.img-portfolio:hover {
opacity: 0.8;
}
.call-to-action {
padding: 50px 0;
}
.call-to-action .btn {
margin: 10px;
}
.map {
height: 500px;
}
#media(max-width:768px) {
.map {
height: 75%;
}
}
footer {
padding: 100px 0;
}
.modal-dialog {} .thumbnail {
margin-bottom: 6px;
}
.carousel-control.left,
.carousel-control.right {
background-image: none;
margin-top: 10%;
width: 5%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://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" /><a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a>
<nav id="sidebar-wrapper">
<ul class="sidebar-nav"> <a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
<li> <a href="#top" onclick=$ ( "#menu-close").click();>Home</a>
</li>
<li> <a href="#about" onclick=$ ( "#menu-close").click();>About</a>
</li>
<li> <a href="#services" onclick=$ ( "#menu-close").click();>Services</a>
</li>
</ul>
</nav>
<header id="top" class="header">
<div class="text-vertical-center">
<img src="img/PRECISIONLOGO.png" style="padding-bottom:2%; width: 40%; min-width:300px;">
<center>
<h1 style="font-size:5vw; max-width:85%;">DECORATE YOUR LIFE WITH PRECISION </h1>
</center>
<center>
<h3 style="font-size:3vw; max-width:75%;">Established in 2008, we have already established ourselves as one of the premier landscaping companies in South Houston</h3>
</center>
<br>
<center> Hire Us
</center>
<a href="http://www.homeadvisor.com/rated.PrecisionTree.43991652.html">
<img src="img/toprated.png" style="float:left; width:6%; min-width:70px; padding-left:15px; position: absolute; bottom:5px; left: 15px; border:0;">
<img src="img/elite.png" style="float:left; width:6%; min-width:70px; padding-left:15px; position: absolute; bottom: 17px; left: 95px;">
<img src="img/approved.png" style="float:left; width:6%; min-width:70px; padding-left:15px; position: absolute; bottom: 17px; left: 175px;">
</a>
</div>
</header>
<section id="about" class="about" style="padding-bottom:0;">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 style="color:#777">What we are all about!</h2>
<p class="lead">Precision Tree and Landscaping is a locally owned and operated company with over 6 years of experience. We take pride in our work, our goal is to make and keep every customer happy. We have consistently focused on the needs of our customers, providing
personalized attention and a stress-free experience.</p>
<img src="img/jared.jpg" style="max-width:350px; width:80%;">
<p class="lead"> <b>Jared Davis</b> Owner and Operator</p>
</div>
</div>
</div>
</section>
<section id="services" class="services bg-primary">
<div class="container">
<div class="row text-center">
<div class="col-lg-10 col-lg-offset-1">
<h2 style="color:#d7f385;">Our Services</h2>
<hr class="small">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="service-item"> <span class="fa-stack fa-4x">
<img src="img/banner1.png">
</span>
<h4 style="color:#d7f385;">
<strong>Landscaping Design</strong>
</h4>
<p>Allow us to redesign the exterior of your home. It can even bost the value of your home!</p>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#design" style="background:#abd91e; border:none;">Learn More</button>
<!-- Trigger the modal with a button -->
<div class="modal fade" id="design" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="color:#777">Landscaping Design</h4>
</div>
<div class="modal-body">
<p style="color:#777">We have the talent and experience to give your home a complete makeover that will make you love your home again. You can leave all the work to us or we can come up with a design together. Whether you are designing, building, renovating
a home or simply creating a complimentary landscape, we can cover all your needs.</p>
<p style="color:#777;">Our team of designers will unify your home and garden to create a personalized outdoor living space.</p>
<h2 style="color:#777;">Scope of Design Services</h2>
<ul style="color:#777; text-align:left;">
<li>Landscape Design & Installation</li>
<li>Swimming Pools, Spas & Water Features</li>
<li>Fountains, Urns, Statuary & Garden Features</li>
<li>Outdoor Kitchens, Fireplaces, Fire pits, Terraces, Patios & Driveways</li>
<li>Pergolas, Arbors, Gates & Fencing</li>
<li>Outdoor Light</li>
<li>Irrigation Systems</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item"> <span class="fa-stack fa-4x">
<img src="img/banner2.png">
</span>
<h4 style="color:#d7f385;">
<strong>Drainage</strong>
</h4>
<p>Thinking ahead and planning can make a big difference when it comes to protect your house from flooding.</p>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#drainage" style="background:#abd91e; border:none;">Learn More</button>
<!-- Trigger the modal with a button -->
<div class="modal fade" id="drainage" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="color:#777">Drainage</h4>
</div>
<div class="modal-body">
<p style="color:#777">Do you have low spots in your yard? Does standing water stay for days after a rain storm? We can help you fix this. We know how annoying rain on Wednesday still standing in your back yard on Saturday can be. This can ruin -</p>
<ul style="color:#777; text-align:left;">
<li>Prevent water from entering and damaging your home</li>
<li>Prevent soil erosion in and around your home</li>
<li>Prevent mosquito infestation</li>
<li>Prevent your landscape from washout and drowning</li>
<li>Prevent standing water which causes slippery surfaces</li>
<li>Prevent overall nuisance standing water can cause</li>
</ul>
<p style="color:#777">Designing the proper drainage system for your property is more complex than you might think, but having it done correctly the first time is a simple choice. Trust Precision Tree & Landscaping with all your drainage needs.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item"> <span class="fa-stack fa-4x">
<img src="img/bannergrass1.png">
</span>
<h4 style="color:#d7f385;">
<strong>Lawn Maintanance</strong>
</h4>
<p>Maintanance is a pivotal to keep your yard looking in top shape. At Precision we have you covered.</p>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#sprinkler" style="background:#abd91e; border:none;">Learn More</button>
<!-- Trigger the modal with a button -->
<div class="modal fade" id="sprinkler" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="color:#777">Lawn Maintanance</h4>
</div>
<div class="modal-body">
<p style="color:#777;">Make sure your lawn always looks fantastic with regular lawn maintenance services from Precision Tree & Landscaping. From tiny yards to large properties, our specialists can tackle all jobs (big and small). Wether your trying
to grow new, revive, or maintain an already outstanding lawn we have all the tools to tackle the job.</p>
<p style="color:#777;">Proper maintenance can lead to benefits people dont often think about. Such as-</p>
<ul style="color:#777; text-align:left;">
<li>Decreased soil errosion</li>
<li>Reduces allergen-producing weeds</li>
<li>Oxygenates the air and filters groundwater naturally</li>
<li>Absorbs nutrients and prevents leaching</li>
<li>Absorbs as much carbon dioxide as trees</li>
<li>Dissipates heat to reduce temperature</li>
<li>Adds curb appeal to your home</li>
<li>Can improve your homes value by up to 11%</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item"> <span class="fa-stack fa-4x">
<img src="img/banner4.png">
</span>
<h4 style="color:#d7f385;">
<strong>Tree Trimming & Removal</strong>
</h4>
<p>Fallen branches cause over a billion dollars in damage every year. Make sure you dont become a victim</p>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#tree" style="background:#abd91e; border:none;">Learn More</button>
<div class="modal fade" id="tree" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="color:#777">Tree Trimming and Removal</h4>
</div>
<div class="modal-body">
<p style="color:#777">Damage caused to trees by severe weather accounts for more than $1 billion in property damage in the United States each year. Broken limbs, fallen trees and wood debris propelled by strong wind damages thousands of properties annually.
Fallen trees and broken branches cause structural damage, roofing damage, siding damage, break windows, fall on cars and cause power lines to topple. Homeowners should be aware that trees located between the street and sidewalk
are usually owned by the city and removal of damaged trees are the city’s responsibility. If you have a tree that has been damaged and needs to be removed, be aware that many insurance policies cover the cost of tree removal, including
fallen branches.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="services.2" class="services bg-primary" style="padding-top:0;">
<div class="container">
<div class="row text-center">
<div class="col-lg-10 col-lg-offset-1">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="service-item"> <span class="fa-stack fa-4x">
<img src="img/fencebanner.png">
</span>
<h4 style="color:#d7f385;">
<strong>Custom Fencing</strong>
</h4>
<p>If you are looked for a fence replacement or something for a new home. We can do that.</p>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#fence" style="background:#abd91e; border:none;">Learn More</button>
<div class="modal fade" id="fence" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="color:#777">Custom Fencing</h4>
</div>
<div class="modal-body">
<p style="color:#777">Simply stated - perimeter fencing is one of the most important things to consider while either buying or building a new home. The home that you purchase will probably be the most important investment you will ever make, and there
is possibly no other feature that you can add to increase the value and marketablility of that investment - than an attractive looking perimeter fence that is professionally installed and maintained.</p>
<p style="color:#777">Let Precision help you with all your fencing needs. We can answer any questions you may have and we are always here to help</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item"> <span class="fa-stack fa-4x">
<img src="img/rockbanner.png">
</span>
<h4 style="color:#d7f385;">
<strong>Rock Installation</strong>
</h4>
<p>Whether its a custom walkway or place to relax in your backyard, the guys at percision have you covered.</p>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#rock" style="background:#abd91e; border:none;">Learn More</button>
<div class="modal fade" id="rock" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="color:#777">Rock Installation</h4>
</div>
<div class="modal-body">
<p style="color:#777">We can make your dreams a reality for your custom walkways or outdoor relaxation areas. If you have an idea in your head we can get it onto paper and have it finished in no time. If you would like for us to design whatever you need,
we can do that to. Almost nothing can have as dramatic of an effect as custom stone walkways or deck areas in your back yard. The sky is truly the limit on how one of a kind your home can be with custom stone work.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item"> <span class="fa-stack fa-4x">
<img src="img/grass1.png">
</span>
<h4 style="color:#d7f385;">
<strong>Sod Installation</strong>
</h4>
<p>Building a new home? Trying to revive part of your lawn? Whatever the case, we have you covered.</p>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#sod" style="background:#abd91e; border:none;">Learn More</button>
<div class="modal fade" id="sod" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="color:#777">Sod Instalation</h4>
</div>
<div class="modal-body">
<p style="color:#777">There is no job to big or small if you need sod installation we are the answer. It's back breaking work and is not advised to go at it alone. Let the guys at Precision help you out.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item"> <span class="fa-stack fa-4x">
<img src="img/powerbanner.png">
</span>
<h4 style="color:#d7f385;">
<strong>Power Washing</strong>
</h4>
<p>Give your home a quick face lift by power cleaning siding, side walks, and driveways.</p>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#power" style="background:#abd91e; border:none;">Learn More</button>
<!-- Trigger the modal with a button -->
<div class="modal fade" id="power" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="color:#777">Tree Trimming and Removal</h4>
</div>
<div class="modal-body">
<p style="color:#777">Pressure washing is a fast and effective way to clean decks, siding, driveways, and other exterior areas of your property. To have it done right, without the hassle and expense of renting a power washer, call the guys at Precision
for professional power washing services and get the clean deck, siding and driveway you want, fast!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

Categories

Resources