Bootstrap caption outside carousel - javascript

Iam adding bootstrap carousel to my site. I need bootstrap caption to be placed outside of the image in the right section. I did it but the caption is not adjusting with the container? if anyone knows how to fix this it will be greatful.....
<style>
.img-swap {
cursor: pointer;
}
.content-container:after {
clear: both;
content: "";
display: block;
}
.fullview {
height: 16px;
padding: 0px;
width: 18px;
}
.clean {
background-position: -253px 0;
}
.hide-sidebar { margin-left: -253px; }
.clean { background-position: -253px 0; }
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
.slider-container {
margin-top:35px;
height:100%;
}
.carousel-caption {
position: absolute;
top: 0;
text-align: left;
left: inherit;
right: inherit;
width: 200px;
color:#000;
}
.carousel-caption:not(#caption-0) {
display: none;
}
#media (max-width: 1024px) {
.right-side-content .wrapper { margin-right: 20px; }
.right-side-content.full-content .wrapper { margin-right: -253px; }
body { background-position: -253px 0; }
body.clean { background-position: 0 0; }
.left-side-content { margin-left: -253px; z-index: 99; }
.left-side-content.hide-sidebar { margin-left: 0; }
}
</style>
</head>
<body class="">
<header class="title hidden-xs " role="banner">
<div class="fluid-container">
<div class="row">
<div class="navbar landing-header navbar-inverse navbar-fixed-top col-lg-12 col-md-12 col-sm-12 bg-dkorange" role="navigation">
<div class="navbar-header col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-12">
<a class="navbar-brand" href="#"><img src="images/hudooku-logo-white-sml.png" alt="logo" class="img-responsive"></a>
</div>
</div>
<div class="navbar-header pull-right">
<div class="row">
<div class=" signup-sec">
<div class="signup">
<button class="btn btn-white gotham-bold">SIGN IN</button><span class="padd-lt8 padd-rt3">
/ </span>
<button class="btn btn-white gotham-bold">SIGN UP</button><span class="padd-lr30 gotham-light">
OR </span>
</div>
<div class="social-icon-landing text-center">
<span class="text-center gotham-light">
Login Via </span>
<ul>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end HEADER -->
</header>
<header class="title visible-xs " role="banner">
<div class="fluid-container">
<div class="row">
<div class="navbar landing-header navbar-inverse navbar-fixed-top col-lg-12 col-md-12 col-sm-12 bg-dkorange" role="navigation">
<div class="navbar-header col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-12">
<a class="navbar-brand" href="#"><img src="images/hudooku-logo-white-sml.png" alt="logo" class="img-responsive"></a>
</div>
</div>
<div class="navbar-header pull-right">
<div class="row">
<div class=" signup-sec">
<div class="signup">
<button class="btn btn-white gotham-bold">SIGN IN</button><span class="padd-lt8 padd-rt3">
/ </span>
<button class="btn btn-white gotham-bold">SIGN UP</button><span class="padd-lr30 gotham-light">
OR </span>
</div>
<div class="social-icon-landing text-center">
<span class="text-center gotham-light">
Login Via </span>
<ul>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end HEADER -->
</header>
<div class="clearfix">
</div>
<div class="content-container bg-light-gray">
<div class="container">
<div class="row">
<div class="container slider-container">
<div class="row">
<div id="slider" class="carousel slide col-xs-9 padd-lt0" data-ride="carousel" data-interval="3000">
<div class="carousel-inner">
<div class="item active">
<img alt="First slide" src="images/landing/carousel_bg_4.jpg">
</div>
<div class="item">
<img alt="Second slide" src="images/landing/carousel_bg_2.jpg">
</div>
<div class="item">
<img alt="Third slide" src="images/landing/carousel_bg_3.jpg">
</div>
</div>
</div>
<div id="slider_captions" class="col-xs-3 ">
<div>
<div id="caption-0" class="carousel-caption">
<h2>Title 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, im. A sint repudiandae tempora, nulla aliquam
</p>
</div>
<div id="caption-1" class="carousel-caption">
<h2>Title 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, enim. A sint repudiandae tempora, nulla aliquam
</p>
</div>
<div id="caption-2" class="carousel-caption">
<h2>Title 3</h2>
</div>
</div>
<a data-slide="prev" role="button" href="#slider" class="left carousel-control"><span class="glyphicon glyphicon-chevron-down"></span></a>
<a data-slide="next" role="button" href="#slider" class="right carousel-control"><span class="glyphicon glyphicon-chevron-up"></span></a>
</div>
</div>
</div>
<!-- /.container -->
</div>
</div>
<!-- /.container -->
</div>
<div class="footer">
<div class="footer-menu">
<ul>
<li class="padd-lt0">Mobile App</li>
<li> About </li>
<li>Terms & Privacy Policy</li>
<li>Help</li>
<li>Videos</li>
<li>Disclaimer</li>
<li class="border-rt-none">Blog</li>
</ul>
</div>
<div class="copyright-sec">
2014, Copyright ©<img src="images/hudooku-footer-logo.png">
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<!-- ============= SCRIPTS ============= -->
<!--<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>-->
<script type="text/javascript">
$("#slider").on('slide.bs.carousel', function(evt) {
var step = $(evt.relatedTarget).index();
$('#slider_captions .carousel-caption:not(#caption-'+step+')').fadeOut('fast', function() {
$('#caption-'+step).fadeIn();
});
});
</script>
</body>
</html>


You have to give position from bottom to your carousel-caption class.
like following:
.carousel-caption { bottom:-95px; }
For showing the caption outside the carousel-inner class, you have to set padding bottom into that class otherwise the caption will not appear. It will hide due to overflow
.carousel-inner { padding-bottom:95px; }

Related

When using Twitter Bootstrap 3's Grid, panel-body overlaps the navbar-header

For some reason when I'm using col-xs-* inside the panel-body, the content overlaps the panel-heading when I scroll down. This doesn't happen when I remove the col-xs-* and row tags.
Before Scrolling down:
After Scrolling down:
Source Code:
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
.navbar-collapse {
background-color: #69899f;
border-color: #425766;
}
.navbar-header {
background-color: #69899f;
border-color: #425766;
}
.navbar-collapse .navbar-text {
color: #d7e2e9;
}
.navbar-header .navbar-toggle .icon-bar {
background-color: #d7e2e9;
}
.affix {
top: 0;
width: 100%;
}
.affix+.container-fluid {
padding-top: 70px;
}
</style>
</head>
<body>
<div class="navbar fixed-top clearfix" style="border:1px solid #000;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h2 style="margin-top: 8px;margin-bottom: 8px;margin-right: 80px">Title A</h2>
</div>
<nav class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Title B</li>
</ul>
</nav><!--/.nav-collapse -->
</div>
<div class="container-fluid">
<div class="tab-content clearfix">
<div id="menu1" class="tab-pane fade in active">
<h1 class="text-center">Title B</h1><br>
<div class="container" id="niftarim">
<div class="widget">
<div class="panel panel-info">
<div class="panel-heading"><p>Header</p></div>
<div class="panel-body" style="word-wrap: break-word;">
<div class="row">
<div class="col-xs-3">
<img src="http://placehold.it/40x140">
</div>
<div class="col-xs-9">
<p>bla bla bla</p>
</div>
</div>
</div>
</div>
</div>
<div class="widget">
<div class="panel panel-info">
<div class="panel-heading"><p>Header</p></div>
<div class="panel-body" style="word-wrap: break-word;">
<div class="row">
<div class="col-xs-3">
<img src="http://placehold.it/40x140">
</div>
<div class="col-xs-9">
<p>bla bla bla</p>
</div>
</div>
</div>
</div>
</div>
<div class="widget">
<div class="panel panel-info">
<div class="panel-heading"><p>Header</p></div>
<div class="panel-body" style="word-wrap: break-word;">
<div class="row">
<div class="col-xs-3">
<img src="http://placehold.it/40x140">
</div>
<div class="col-xs-9">
<p>bla bla bla</p>
</div>
</div>
</div>
</div>
</div>
<div class="widget">
<div class="panel panel-info">
<div class="panel-heading"><p>Header</p></div>
<div class="panel-body" style="word-wrap: break-word;">
<div class="row">
<div class="col-xs-3">
<img src="http://placehold.it/40x140">
</div>
<div class="col-xs-9">
<p>bla bla bla</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function() {
$(".navbar").affix({
offset: {
top: $("header").outerHeight(true)
}
});
});
</script>
</body>
</html>

It's an issue with the navigation's z-index. Even just giving .navbar a z-index of 1 fixed the overlap for me. JSYK, the higher the number the less likely it will be under another element, so you should probably make it something like 999. Try these styles instead.
<style>
.navbar {
z-index: 1;
}
.navbar-collapse {
background-color: #69899f;
border-color: #425766;
}
.navbar-header {
background-color: #69899f;
border-color: #425766;
}
.navbar-collapse .navbar-text {
color: #d7e2e9;
}
.navbar-header .navbar-toggle .icon-bar {
background-color: #d7e2e9;
}
.affix {
top: 0;
width: 100%;
}
.affix+.container-fluid {
padding-top: 70px;
}
</style>

issue with carousel thumbnail when doing responsive

I am trying to create a responsive carousel thumbnail slider using bootstrap. In Desktop there is no problem. Everything is fine. But when i resize the window for mobile display the carousel break down the column in vertical direction.
I want to display the one thumbnail image in one time and want to show the next all one after one.
i want like this in mobile
following is my working demo
.collaborators {
background: #0492da;
font-family: 'Work Sans', sans-serif;
color: #fff;
padding: 50px 0;
position: relative;
z-index: 2;
}
.collaborators h1 {
font-size: 50px;
font-weight: 300;
}
.text1 {
font-size: 20px;
}
.carousel-control {
width: auto;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="collaborators">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<h1>Collaborators</h1>
<p class="text1">Based in the Ottawa/Gatineau area, Lead Action specializes primarily in Leadership Development.</p>
</div>
<div class="col-xs-12">
<div id="collaborators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#collaborators" data-slide-to="0" class="active"></li>
<li data-target="#collaborators" data-slide-to="1"></li>
<li data-target="#collaborators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-lg-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" class="img-responsive">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="col-lg-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" class="img-responsive">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="col-lg-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" class="img-responsive">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="col-lg-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" class="img-responsive">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-lg-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" class="img-responsive">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="col-lg-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" class="img-responsive">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="col-lg-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" class="img-responsive">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="col-lg-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" class="img-responsive">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-lg-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" class="img-responsive">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="col-lg-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" class="img-responsive">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="col-lg-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" class="img-responsive">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="col-lg-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" class="img-responsive">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#collaborators" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#collaborators" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</section>

Try this code snippet, Hope this is what you expected. If you have any questions, you can ask in the comment section.
I have also referred the w3schools bootstrap carousel.
.collaborators {
background: #0492da;
font-family: 'Work Sans', sans-serif;
color: #fff;
padding: 50px 0;
position: relative;
z-index: 2;
}
.collaborators h2 {
font-size: 50px;
font-weight: 300;
text-align: center;
}
.text1 {
font-size: 20px;
text-align: center;
}
.carousel-control {
width: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="collaborators">
<h2>Collaborators</h2>
<p class="text1">Based in the Ottawa/Gatineau area, Lead Action specializes primarily in Leadership Development.</p>
<div class="col-xs-12 text-center">
</div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" alt="New york" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</body>
</html>
Edited Version
4 images per carousel item
.collaborators {
background: #0492da;
font-family: 'Work Sans', sans-serif;
color: #fff;
padding: 50px 0;
position: relative;
z-index: 2;
}
.collaborators h2 {
font-size: 50px;
font-weight: 300;
text-align: center;
}
.text1 {
font-size: 20px;
text-align: center;
}
.carousel-control {
width: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="collaborators">
<h2>Collaborators</h2>
<p class="text1">Based in the Ottawa/Gatineau area, Lead Action specializes primarily in Leadership Development.</p>
<div class="col-md-12 text-center">
</div>
<div class="col-md-6 col-md-offset-3">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-xs-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" class="img-responsive">
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</body>
</html>

Move to a Div/ID from Navbar Link

Ok, So I have a navbar that, when a link is clicked, I want it to move to a specific div (i.e. when clicking the "About" link, the page moves to the About section of the page).
A JSFiddle of the Code in question:
HTML in question:
<nav class="navbar navbar-toggleable-lg sticky-top navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">David Madrigal's Portfolio</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#About">About</a>
</li>
<li class="nav-item">
Projects
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
The plan is to add classes that would match the id names of the parts of the page I want to go to.
Here is the JS I have so far:
function main() {
$
$('.nav-item').on('click', function() {
$(this).toggleClass('active');
});
}
$(document).ready(main);
Note, I am using Bootstrap 4.0. Any help is much appreciated.Thanks in advance!

Here is a solution with smooth scrolling (the jquery slim libs does not support the animate property)
Snippet below
$('a[href^="#"]').on('click', function(event) {
var target = $(this.getAttribute('href'));
if (target.length) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
}
});
body {
background: #f5f5dc;
}
.jumbotron {
text-align: center;
background: url(imgs/los-angeles-skyline.jpg);
background-size: cover;
background-repeat: no-repeat;
color: white;
border-radius: 0;
}
#bootstrap-link {
text-decoration: none;
color: white;
}
#bootstrap-link:hover {
text-decoration: underline;
color: #014c8c;
}
#info-cards {
margin-bottom: 20px;
padding-bottom: 5px;
}
#card-blocks {
padding-bottom: 20px;
margin-bottom: 20px;
}
.card-button {
margin-left: 5px;
margin-right: 5px;
}
#form-container {
border: 5px solid rgba(220, 220, 220, 0.4);
margin-top: 10px;
padding: 30px;
padding-bottom: 25px;
background: #ffffff;
}
.form-button {
margin-top: 20px;
}
.footer {
text-align: center;
background-color: #292b2c !important;
padding-bottom: 5px;
padding-top: 20px;
margin-top: 5px;
margin-bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-toggleable-lg sticky-top navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">David Madrigal's Portfolio</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#About">About</a>
</li>
<li class="nav-item">
Projects
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-3">Welcome!</h1>
<p class="lead">This is a site to which I will be adding all of my website works.</p>
<hr class="my-4">
<p>This site uses Bootstrap 4 to make the site visually pleasing.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
<div class="container-fluid" id="About">
<div class="row">
<div class="col-sm-12 div.md-12" id="info-cards About">
<div class="card">
<h3 class="card-header">About the <strong>Developer</strong></h3>
<div class="card-block">
<div class="media">
<img class="d-flex mr-3" src="https://avatars1.githubusercontent.com/u/17634751?v=3&u=764e15995bb82b2f37a3bdb15ba59e11f038a2f1&s=400" alt="githubProfilePic">
<div class="media-body">
<h5 class="mt-0">Welcome to My Portfolio!</h5>
Hello there! This is a personal portfolio of all of my works will be open source and can be changed however you please. Just make sure to provide links to the frameworks used so others can create projects with them!
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid" id="card-blocks projects projects">
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="card">
<div class="card-header">
Block #1
</div>
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="card">
<div class="card-header">
Featured: "Just Random Musing..."
</div>
<div class="card-block">
<h4 class="card-title">My First Site W/ Bootstrap!</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
View the Site!
View Source!
</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="card">
<div class="card-header">
Block #2
</div>
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid" id="skillbars">
<div class="card">
<h3 class="card-header">Featured Skills</h3>
<div class="card-block">
<p class="card-text">HTML</p>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">95%</div>
</div>
<br>
<p class="card-text">CSS</p>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">85%</div>
</div>
<br>
<p class="card-text">JavaScript</p>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">65%</div>
</div>
</div>
</div>
</div>
<form class="container-fluid" id="contact">
<div id="form-container">
<div class="form-group row">
<label for="InputName" class="col-4 col-form-label">Full Name</label>
<div class="col-8">
<input type="name" class="form-control" id="InputName" aria-described-by="nameHelp" placeholder="Enter Name" />
<small id="nameHelp" class="form-text text-muted">Please enter your Full Name (First and Last)</small>
</div>
</div>
<div class="form-group row">
<label for="InputEmail" class="col-4 col-form-label">Email Address</label>
<div class="col-8">
<input type="email" class="form-control" id="InputEmail" aria-described-by="emailHelp" placeholder="Enter Email" />
<small id="emailHelp" class="form-text text-muted">We will never share your email with anyone else.</small>
</div>
</div>
<div class="form-group row">
<label for="exampleInputPassword1" class="col-4 col-form-label">Password</label>
<div class="col-8">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</div>
<button type="button" class="btn btn-primary form-button">Submit</button>
</div>
</form>
<footer class="footer text-muted">
<p>&copy 2017. David Madrigal-Hernandez.</p>
</footer>

You missed the Id, just add an Id in the section container, for your case:
<div class="container-fluid" id="About">
since in your anchor you are jumping to #About
<a class="nav-link" href="#About">About</a>

Using multiple (owl) carousel on a single page

I have been looking at ways on google to use multiple carousel on a single page and yet did not find any of the solutions working for me. Can anyone of you please help.
Here is the code:
HTML
<!-- Carousel 1 -->
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-demo" class="owl-carousel">
<div class="item">
<h1>1</h1>
</div>
<div class="item">
<h1>2</h1>
</div>
<div class="item">
<h1>3</h1>
</div>
<div class="item">
<h1>4</h1>
</div>
<div class="item">
<h1>5</h1>
</div>
<div class="item">
<h1>6</h1>
</div>
<div class="item">
<h1>7</h1>
</div>
<div class="item">
<h1>8</h1>
</div>
<div class="item">
<h1>9</h1>
</div>
<div class="item">
<h1>10</h1>
</div>
</div>
<div class="customNavigation"> <a class="btn prev">Previous</a> <a class="btn next">Next</a> </div>
</div>
</div>
</div>
</div>
<!-- Carousel 2 -->
<div id="demo1">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-demo-1" class="owl-carousel">
<div class="item">
<h1>1</h1>
</div>
<div class="item">
<h1>2</h1>
</div>
<div class="item">
<h1>3</h1>
</div>
<div class="item">
<h1>4</h1>
</div>
<div class="item">
<h1>5</h1>
</div>
<div class="item">
<h1>6</h1>
</div>
<div class="item">
<h1>7</h1>
</div>
<div class="item">
<h1>8</h1>
</div>
<div class="item">
<h1>9</h1>
</div>
<div class="item">
<h1>10</h1>
</div>
</div>
<div class="customNavigation"> <a class="btn prev">Previous</a> <a class="btn next">Next</a> </div>
</div>
</div>
</div>
</div>
I have named the carousel as as owl-demo and owl-demo-1
Javascript
$(document).ready(function() {
var owl = $("#owl-demo");
owl.owlCarousel({
items : 6, //10 items above 1000px browser width
itemsDesktop : [1000,6], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // 3 items betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0;
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
});
// Custom Navigation Events
$(".next").click(function(){owl.trigger('owl.next');})
$(".prev").click(function(){owl.trigger('owl.prev');})
});
On JsFiddle

Updated code should look like this: https://jsfiddle.net/wtg76spd/1/
JavaScript:
$(document).ready(function() {
$("#owl-demo, #owl-demo-1").each(function() {
$(this).owlCarousel({
items : 6, //10 items above 1000px browser width
itemsDesktop : [1000,6], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // 3 items betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0;
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
});
});
// Custom Navigation Events
$(".next").click(function(){$(this).closest('.span12').find('.owl-carousel').trigger('owl.next');})
$(".prev").click(function(){$(this).closest('.span12').find('.owl-carousel').trigger('owl.prev');})
});
CSS (just first line changed):
//before
#owl-demo .item{
//after
#owl-demo .item, #owl-demo-1 .item{
//class "owl-demo" would do better in this case
1) Use .each() instead of copying code.
2) It'd be better to use class instead of #owl-demo and #owl-demo-1 - let's say you had not 2 but 100 sliders. Would you still give them IDs? However I didn't change it in example.
3) I used closest() and find() methods for next/prev buttons. This way I have 2 callback functions instead of 4.

$(document).ready(function(){
$('.course-carousel').owlCarousel({
items:3,
loop:true,
margin:10,
nav:true,
autoplay:true,
autoplayTimeout:3000,
autoplayHoverPause:true,
// responsive:{
// 0:{
// items:1
// },
// 600:{
// items:3
// },
// 1000:{
// items:5
// }
// }
})
$('.video-carousel').owlCarousel({
items:1,
loop:true,
margin:10,
nav:true,
autoplay:true,
autoplayTimeout:3000,
autoplayHoverPause:true,
// responsive:{
// 0:{
// items:1
// },
// 600:{
// items:3
// },
// 1000:{
// items:5
// }
// }
})
});
body {
color: #828bb2;
font-family: "Roboto",sans-serif;
font-size: 14px;
font-weight: 300;
line-height: 1.625em;
position: relative;
}
h1,h2,h3,h4,h5,h6{
font-family: "Playfair Display",serif;
color: #222;
line-height: 1.2em;
margin-bottom: 0;
margin-top: 0;
font-weight: 900;
}
.home-banner-area {
background: url('../images/home-banner.png') no-repeat;
background-size: cover;
background-position: center center;
max-height: 1200px;
}
.container{
max-width:1140px;
}
.default-header {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 9;
}
.col-link{
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
font-size: 12px;
font-weight: 500;
color: #fff;
padding: 20px;
}
.banner-lt-content {
font-family: 'Playfair Display', serif;
font-size: 48px;
line-height: 1em;
font-weight: 900;
}
.feature-area .container-fluid {
padding-left: 50px;
}
.feature-area{
margin-top:-110px;
}
.mt-20{
margin-top:20px;
}
.mb-40{
margin-bottom:40px;
}
.mb-20{
margin-bottom:20px;
}
.mt-30{
margin-top:30px;
}
.ml-20{
margin-left:20px;
}
.feature-item {
margin: 30px 0;
border-right: 1px solid rgba(130,139,178,.2);
padding-right: 20px;
}
.fa-book,.fa-trophy,.fa-desktop{
font-size:30px;
}
.feature-item h4 {
font-size: 18px;
margin-bottom: 20px;
}
.section-gap {
padding: 120px 0;
}
.section-title p {
margin-bottom: 0;
max-width: 620px;
}
.section-title h2 {
font-size: 42px;
color: #222;
margin-bottom: 20px;
}
.popular-course-area .container-fluid {
max-width: 1140px;
padding-left: 15px;
}
.owl-carousel .owl-item{
padding:10px !important;
}
.course-heading{
font-family: 'Playfair Display', serif;
width:100%;
color:#000;
text-align:justify;
margin:15px 0px;
font-size:21px;
}
.owl-carousel .owl-item:hover .course-heading{
color:#7c32ff;
}
.video-area{
background: url('../images/video-area-bg.webp') no-repeat;
background-position-x: center;
}
.section-gap-bottom{
padding-bottom:120px;
}
.section-title p{
margin-bottom:0;
max-width:620px;
}
.video-area .video-left {
padding-bottom: 151px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>College theme</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght#0,400;0,500;0,600;0,700;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="css/all.min.css">
<link rel="stylesheet" href="css/fontawesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header class="default-header">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Eclipse</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end align-items-center" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link col-link" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link col-link" href="#">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link col-link" href="#">COURSES</a>
</li>
<li class="nav-item">
<a class="nav-link col-link" href="#">FACULTY</a>
</li>
<li class="nav-item">
<a class="nav-link col-link" href="#">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link col-link" href="#">CONTACT US</a>
</li>
<!-- <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li> -->
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</header>
<section class="home-banner-area">
<div class="container">
<div class="row justify-content-center fullscreen align-items-center" style="height:820px;">
<div class="col-lg-5 col-md-8 home-banner-left">
<h1 class="text-white banner-lt-content">Take the first step to learn with us</h1>
<p class="mx-auto text-white mt-20 mb-40">
In the history of modern astronomy, there is probably no one
greater leap forward than the building and launch of the space
telescope known as the Hubble.</p>
</div>
<div class="offset-lg-2 col-lg-5 col-md-12 home-banner-right">
<img src="images/banner-image.webp" alt="" class="img-fluid">
</div>
</div>
</div>
</section>
<section class="feature-area">
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 col-md-6">
<div class="feature-item d-flex">
<i class="fa-solid fa-book"></i>
<div class="ml-20">
<h4>New Classes</h4>
<p>
In the history of modern astronomy, there is probably no one greater leap forward.</p>
</div>
</div>
</div>
<div class="col-lg-2 col-md-6">
<div class="feature-item d-flex">
<i class="fa-solid fa-trophy"></i>
<div class="ml-20">
<h4>Top Courses</h4>
<p>
In the history of modern astronomy, there is probably no one greater leap forward.</p>
</div>
</div>
</div>
<div class="col-lg-2 col-md-6">
<div class="feature-item d-flex">
<i class="fa-solid fa-desktop"></i>
<div class="ml-20">
<h4>Full E-Books</h4>
<p>
In the history of modern astronomy, there is probably no one greater leap forward.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="popular-course-area section-gap">
<div class="container-fluid">
<div class="row justify-content-center section-title">
<div class="col-lg-12">
<h2>Popular Courses<br/> Available Right Now</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="owl-carousel course-carousel owl-theme">
<div class="item"><img src="https://preview.colorlib.com/theme/eclipse/img/popular-course/xp4.jpg.pagespeed.ic.mfBvHveSmO.webp">
<div class="details">
<div class="d-flex justify-content-between mb-20 text-center">
<h4 class="course-heading">B.Tech in Computer Science</h4>
</div>
</div>
</div>
<div class="item"><img src="https://preview.colorlib.com/theme/eclipse/img/popular-course/xp4.jpg.pagespeed.ic.mfBvHveSmO.webp">
<div class="details">
<div class="d-flex justify-content-between mb-20 text-center">
<h4 class="course-heading">B.Tech in Computer Science</h4>
</div>
</div>
</div>
<div class="item"><img src="https://preview.colorlib.com/theme/eclipse/img/popular-course/xp4.jpg.pagespeed.ic.mfBvHveSmO.webp">
<div class="details">
<div class="d-flex justify-content-between mb-20 text-center">
<h4 class="course-heading">B.Tech in Computer Science</h4>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="video-area section-gap-bottom">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-5">
<div class="section-title text-white">
<h2 class="text-white">
Watch Our Teacher<br/>in Live Action
</h2>
<p>
In the history of modern astronomy, there is probably no one greater leap forward than the building and
launch of the space telescope known as the Hubble.
</p>
</div>
</div>
<div class="offset-lg-1 col-md-6 video-left">
<div class="owl-carousel video-carousel owl-theme">
<div class="single-video">
<div class="video-part">
<img src="images/video-overlay-image.webp">
</div>
<h4 class="text-white mb-20 mt-30">Learn Angular js Course for Legendary Persons</h4>
<p class="text-white mb-20">
In the history of modern astronomy, there is probably no one greater leap forward than the building and
launch of the space telescope known as the Hubble.
</p>
</div>
<div class="single-video">
<div class="video-part">
<img src="https://preview.colorlib.com/theme/eclipse/img/xvideo-img.jpg.pagespeed.ic.WgYvcPV4nx.webp">
</div>
<h4 class="text-white mb-20 mt-30">Learn Angular js Course for Legendary Persons</h4>
<p class="text-white mb-20">
In the history of modern astronomy, there is probably no one greater leap forward than the building and
launch of the space telescope known as the Hubble.
</p>
</div>
<div class="single-video">
<div class="video-part">
<img src="https://preview.colorlib.com/theme/eclipse/img/xvideo-img.jpg.pagespeed.ic.WgYvcPV4nx.webp">
</div>
<h4 class="text-white mb-20 mt-30">Learn Angular js Course for Legendary Persons</h4>
<p class="text-white mb-20">
In the history of modern astronomy, there is probably no one greater leap forward than the building and
launch of the space telescope known as the Hubble.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script> -->
<script src="js/all.min.js"></script>
<script src="js/fontawesome.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="js/main.js"></script>
</body>
</html>

jQuery remove & add class on click

So I have this jQuery which allows me to click on a element and it will extended something that is hidden. But you can click on multiple elements and they will all be extended. I only want one to be extended at any one point... Could someone help me out?
if( $(window).width() >= 991 ) {
$('.brands-supply .single').click(function() {
$id = $(this).attr('href');
$($id).stop().slideDown('fast');
}, function() {
$($id).stop().slideUp('fast');
});
}
HTML
<div class="brands-supply hidden-sm hidden-xs">
<h2> Our Consultancy Services </h2>
<div class="container">
<div class="row">
<a class="col-md-3 single collapsed" data-toggle="collapse" href="#collapseExample0" style="background: #464648;" aria-expanded="false">
<img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/cookies.png">
</a>
<a class="col-md-3 single collapsed" data-toggle="collapse" href="#collapseExample1" style="background: #5e5e5e;" aria-expanded="false">
<img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/Brian.jpg">
</a>
<a class="col-md-3 single" data-toggle="collapse" href="#collapseExample2" style="background: #9a9a9a;">
<img src="http://localhost:8888/eclectic/wp-content/uploads/2015/11/Executive_proection_services.jpg">
</a>
<a class="col-md-3 single" data-toggle="collapse" href="#collapseExample3" style="background: #cccccc;">
<img src="">
</a>
</div>
<div class="row">
<div class="col-md-12 collapse" id="collapseExample0" style="height: 0px; background: rgb(70, 70, 72);" aria-expanded="false">
<div class="text">
<div class="row">
<div class="col-md-4">
<img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/consultancy_icon.png">
</div>
<div class="col-md-7">
<p>Reviews</p>
<p> </p>
<p>This si a p tag</p>
</div>
</div>
</div>
</div>
<div class="col-md-12 collapse" id="collapseExample1" style="height: 0px; background: rgb(94, 94, 94);" aria-expanded="false">
<div class="text">
<div class="row">
<div class="col-md-4">
<img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/consultancy_icon.png">
</div>
<div class="col-md-7">
<p>Testing</p>
<p> </p>
<p>This is a ap tag</p>
</div>
</div>
</div>
</div>
<div class="col-md-12 collapse" id="collapseExample2" style="background: #9a9a9a;">
<div class="text">
<div class="row">
<div class="col-md-4">
<img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/consultancy_icon.png">
</div>
<div class="col-md-7">
<p>Projects</p>
<p> </p>
<p>This is a p tag</p>
</div>
</div>
</div>
</div>
<div class="col-md-12 collapse" id="collapseExample3" style="background: #cccccc;">
<div class="text">
<div class="row">
<div class="col-md-4">
<img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/consultancy_icon.png">
</div>
<div class="col-md-7">
<p>Services</p>
<p> </p>
<p>This is a Ptag</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Any help appreciated!

First click doesn't take two functions as parameters. You should use slideToggle.
if( $(window).width() >= 991 ) {
$('.brands-supply .single').click(
function() {
var id = $(this).attr('href');
$('.brands-supply .single').each(
function () {
var href = $(this).attr('href');
if (href == id) return;
$(href).slideUp('fast');
}
);
$(id).stop().slideToggle('fast');
}
);
}
So on click select all the elements you attached the click to and iterate over them sliding them up if they are not the current clicked href. Then just use slideToggle on the clicked one and it will slide it up or down based on how its currently displayed.
Fiddle: http://jsfiddle.net/AtheistP3ace/xkv31rop/
JS:
same as above
CSS:
div > div {
height: 100px;
width: 100%;
display: none;
}
#id1 {
background: red;
}
#id2 {
background: blue;
}
#id3 {
background: orange;
}
HTML:
<div class="brands-supply">
<a class="single" href="#id1">id1</a>
<a class="single" href="#id2">id2</a>
<a class="single" href="#id3">id3</a>
<div id="id1"></div>
<div id="id2"></div>
<div id="id3"></div>
</div>

Categories