I have a page where I let the user search for information, and it displays an alert at the top stating that he is searching. He is then shown a filtered result. If he clicks the alert dismiss button, the main page is to be reloaded.
However I find that the dismissed event closed.bs.alert is never fired.
My javascript code:
$("document").ready(function () {
$('body').on('click', '#mainsearch', function (event) {
url = window.location.href;
console.log('Clicked');
SearchPatients();
});
$('body').on('closed.bs.alert', "#srpatalert", function () {
console.log('Closed alert');
window.location.href = "/appointments/patients";
});
$(function () {
$('#srpatalert').on('closed.bs.alert', function () {
console.log('Closed alert');
window.location.href = "/appointments/patients";
});
});
});
function SearchPatients() {
var srmsgpre = `
<div id="srpatalert" class="mr-3 alert alert-info alert-dismissible fade show" role="alert">
<strong>Searching For`;
var srmcl = ' </strong>';
var srmsgpost = `
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
`;
var breadcrumb = `
<li class="breadcrumb-item">
Home
</li>
<li class="breadcrumb-item">
Patients
</li>
<li class="breadcrumb-item active" aria-current="page">Search results</li>`;
var srstr = $("#searchterm").val();
sralmsg = srmsgpre + 'Patients:' + srmcl + srstr + srmsgpost;
$('#presearch').html(sralmsg);
return true;
}
My html code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>Show Patients</title>
</head>
<body>
<div id="navbar">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
Patients
</a>
<button class="navbar-toggler" 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>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/appointments">Home
<!-- <span class="sr-only">(current)</span> -->
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Doctor
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/appointments/doctors">View Doctors</a>
<a class="dropdown-item" href="/appointments/createdoctor">Add Doctor</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Patients
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/appointments/patients">View Patients</a>
<a class="dropdown-item" href="/appointments/createpatient">Add Patient</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/appointments/getappointment">Appointments
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Welcome, joel
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/accounts/logout/?next=/appointments/patients">Logout</a>
<a class="dropdown-item" href="#">My Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/appointments/myappointments">My Appointments</a>
</div>
</li>
<!-- <li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li> -->
</ul>
<!-- <form class="form-inline my-2 my-lg-0"> -->
<div class="form-inline my-2 my-lg-0">
<div id="presearch"></div>
<input id="searchterm" class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button id="mainsearch" type="button" class="btn btn-success">Search</button>
</div>
<!-- </form> -->
</div>
</nav>
</div>
<nav aria-label="breadcrumb">
<ol id="breadcrumb" class="breadcrumb">
<li class="breadcrumb-item">
Home
</li>
<li class="breadcrumb-item">
Patients
</li>
<li class="breadcrumb-item active" aria-current="page">Show Patients</li>
</ol>
</nav>
<div id="containerblock" class="container-fluid">
<div class="row">
<div class="col-sm-3 card-deck">
<div class="card mb-3 mr-3 ml-3 shadow bg-white rounded" style="width: 18rem;">
<div class="card-body">
<div id="id" style="display: none;">13 </div>
<h2 class="card-title">
Epra Peter
</a>
</h2>
<h6 class="card-subtitle mb-2 text-muted">Age 45</h6>
<p class="card-text">Mobile 0000</p>
<p class="card-text">Place </p>
<div id="docbtngp" class="d-flex flex-row">
<a href="/appointments/patient/edit/13" class="btn btn-primary mr-1">
<i class="fas fa-user-edit"></i>
</a>
<a href="/appointments/patient/calendar/13" class="btn btn-primary mr-1">
<i class="fas fa-calendar"></i>
</a>
<a href="/appointments/patient/appointment/add/13" class="btn btn-primary mr-1">
<i class="fas fa-calendar-plus"></i>
</a>
<a href="/appointments/patient/remove/13" class="btn btn-danger mr-1">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3 card-deck">
<div class="card mb-3 mr-3 ml-3 shadow bg-white rounded" style="width: 18rem;">
<div class="card-body">
<div id="id" style="display: none;">11 </div>
<h2 class="card-title">
Jeffy Kelly
</a>
</h2>
<h6 class="card-subtitle mb-2 text-muted">Age 5</h6>
<p class="card-text">Mobile 0000</p>
<p class="card-text">Place </p>
<div id="docbtngp" class="d-flex flex-row">
<a href="/appointments/patient/edit/11" class="btn btn-primary mr-1">
<i class="fas fa-user-edit"></i>
</a>
<a href="/appointments/patient/calendar/11" class="btn btn-primary mr-1">
<i class="fas fa-calendar"></i>
</a>
<a href="/appointments/patient/appointment/add/11" class="btn btn-primary mr-1">
<i class="fas fa-calendar-plus"></i>
</a>
<a href="/appointments/patient/remove/11" class="btn btn-danger mr-1">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3 card-deck">
<div class="card mb-3 mr-3 ml-3 shadow bg-white rounded" style="width: 18rem;">
<div class="card-body">
<div id="id" style="display: none;">15 </div>
<h2 class="card-title">
Ramu Pillai
</a>
</h2>
<h6 class="card-subtitle mb-2 text-muted">Age 50</h6>
<p class="card-text">Mobile 0000</p>
<p class="card-text">Place </p>
<div id="docbtngp" class="d-flex flex-row">
<a href="/appointments/patient/edit/15" class="btn btn-primary mr-1">
<i class="fas fa-user-edit"></i>
</a>
<a href="/appointments/patient/calendar/15" class="btn btn-primary mr-1">
<i class="fas fa-calendar"></i>
</a>
<a href="/appointments/patient/appointment/add/15" class="btn btn-primary mr-1">
<i class="fas fa-calendar-plus"></i>
</a>
<a href="/appointments/patient/remove/15" class="btn btn-danger mr-1">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="menu pmd-floating-action pmd-lg" role="navigation">
<a href="/appointments/patient/add" class="pmd-floating-action-btn btn btn-sm pmd-btn-fab pmd-btn-raised pmd-ripple-effect btn-default pmd-lg"
data-title="Add a new patient">
<span class="pmd-floating-hidden"></span>
<i class="material-icons">add</i>
</a>
</div>
<div id="messages">
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</body>
</html>
JSFiddle: JSFiddle
As you can see above, I tried two different approaches. I'm not able to get the closed.bs.alert event to fire.
Replace
$(function () {
$('#srpatalert').on('closed.bs.alert', function () {
console.log('Closed alert');
window.location.href = "/appointments/patients";
});
});
with
$('#navbar').on('close.bs.alert', '#srpatalert', function () {
console.log('Closed alert');
window.location.href = "/appointments/patients";
});
Notice that, besides delegating the event to #navbar, I also changed the event itself (from closed.bs.alert to close.bs.alert) as closed.bs.alert doesn't seem to fire in this example - I don't know why and, since it's working with close.bs.alert, I didn't investigate further.
Here's a working example:
$("document").ready(function() {
$('body').on('click', '#mainsearch', function(event) {
url = window.location.href;
console.log('Clicked');
SearchPatients();
});
$('#navbar').on('close.bs.alert', "#srpatalert", function() {
console.log('Closed alert');
});
// don't mind next line, it's just for SO:
$(document).on('click', 'a', e => e.preventDefault())
});
function makeAlert(category, term) {
return $('<div />', {
id:'srpatalert',
class:'mr-3 alert alert-info alert-dismissible fade show',
role: 'alert'
}).append($('<strong />',{text:'Searching For ' + category + ': '}))
.append($('<span />', {text: term}))
.append($('<button />', {
type:'button',
class:'close',
'data-dismiss':'alert',
'aria-label':'Close',
html: $('<span />',{
'aria-hidden':true,
html:'×'
})
}))
}
function SearchPatients() {
sralmsg = makeAlert('Patients', $("#searchterm").val());
$('#presearch').html(sralmsg);
return true;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div id="navbar">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
Patients
</a>
<button class="navbar-toggler" 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>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/appointments">Home
<!-- <span class="sr-only">(current)</span> -->
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Doctor
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/appointments/doctors">View Doctors</a>
<a class="dropdown-item" href="/appointments/createdoctor">Add Doctor</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Patients
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/appointments/patients">View Patients</a>
<a class="dropdown-item" href="/appointments/createpatient">Add Patient</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/appointments/getappointment">Appointments
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Welcome, joel
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/accounts/logout/?next=/appointments/patients">Logout</a>
<a class="dropdown-item" href="#">My Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/appointments/myappointments">My Appointments</a>
</div>
</li>
<!-- <li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li> -->
</ul>
<!-- <form class="form-inline my-2 my-lg-0"> -->
<div class="form-inline my-2 my-lg-0">
<div id="presearch"></div>
<input id="searchterm" class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button id="mainsearch" type="button" class="btn btn-success">Search</button>
</div>
<!-- </form> -->
</div>
</nav>
</div>
<nav aria-label="breadcrumb">
<ol id="breadcrumb" class="breadcrumb">
<li class="breadcrumb-item">
Home
</li>
<li class="breadcrumb-item">
Patients
</li>
<li class="breadcrumb-item active" aria-current="page">Show Patients</li>
</ol>
</nav>
<div id="containerblock" class="container-fluid">
<div class="row">
<div class="col-sm-3 card-deck">
<div class="card mb-3 mr-3 ml-3 shadow bg-white rounded" style="width: 18rem;">
<div class="card-body">
<div id="id" style="display: none;">13 </div>
<h2 class="card-title">
Epra Peter
</h2>
<h6 class="card-subtitle mb-2 text-muted">Age 45</h6>
<p class="card-text">Mobile 0000</p>
<p class="card-text">Place </p>
<div id="docbtngp" class="d-flex flex-row">
<a href="/appointments/patient/edit/13" class="btn btn-primary mr-1">
<i class="fas fa-user-edit"></i>
</a>
<a href="/appointments/patient/calendar/13" class="btn btn-primary mr-1">
<i class="fas fa-calendar"></i>
</a>
<a href="/appointments/patient/appointment/add/13" class="btn btn-primary mr-1">
<i class="fas fa-calendar-plus"></i>
</a>
<a href="/appointments/patient/remove/13" class="btn btn-danger mr-1">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3 card-deck">
<div class="card mb-3 mr-3 ml-3 shadow bg-white rounded" style="width: 18rem;">
<div class="card-body">
<div id="id" style="display: none;">11 </div>
<h2 class="card-title">
Jeffy Kelly
</h2>
<h6 class="card-subtitle mb-2 text-muted">Age 5</h6>
<p class="card-text">Mobile 0000</p>
<p class="card-text">Place </p>
<div id="docbtngp" class="d-flex flex-row">
<a href="/appointments/patient/edit/11" class="btn btn-primary mr-1">
<i class="fas fa-user-edit"></i>
</a>
<a href="/appointments/patient/calendar/11" class="btn btn-primary mr-1">
<i class="fas fa-calendar"></i>
</a>
<a href="/appointments/patient/appointment/add/11" class="btn btn-primary mr-1">
<i class="fas fa-calendar-plus"></i>
</a>
<a href="/appointments/patient/remove/11" class="btn btn-danger mr-1">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3 card-deck">
<div class="card mb-3 mr-3 ml-3 shadow bg-white rounded" style="width: 18rem;">
<div class="card-body">
<div id="id" style="display: none;">15 </div>
<h2 class="card-title">
Ramu Pillai
</h2>
<h6 class="card-subtitle mb-2 text-muted">Age 50</h6>
<p class="card-text">Mobile 0000</p>
<p class="card-text">Place </p>
<div id="docbtngp" class="d-flex flex-row">
<a href="/appointments/patient/edit/15" class="btn btn-primary mr-1">
<i class="fas fa-user-edit"></i>
</a>
<a href="/appointments/patient/calendar/15" class="btn btn-primary mr-1">
<i class="fas fa-calendar"></i>
</a>
<a href="/appointments/patient/appointment/add/15" class="btn btn-primary mr-1">
<i class="fas fa-calendar-plus"></i>
</a>
<a href="/appointments/patient/remove/15" class="btn btn-danger mr-1">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</div>
</div>
</div>
<div class="menu pmd-floating-action pmd-lg" role="navigation">
<a href="/appointments/patient/add" class="pmd-floating-action-btn btn btn-sm pmd-btn-fab pmd-btn-raised pmd-ripple-effect btn-default pmd-lg" data-title="Add a new patient">
<span class="pmd-floating-hidden"></span>
<i class="material-icons">add</i>
</a>
</div>
<div id="messages">
</div>
</div>
As discussed in comments on the accepted answer above, the closed event does not properly bubble even if you use a delegated event and attach the handler to parent. A bit of discussion on this here.
Also, it's important to note that there is a distinct difference between close and closed, which is that the latter fires after the alert has been removed. In some applications this difference may be significant, such as when you need to resize other elements based on changes to the dom.
With that in mind, if you absolutely need to use the closed event, you must dynamically add your handler anytime the alert is created. This could be done in your example code immediately after:
$('#presearch').html(sralmsg);
You could add your handler so it would look like this:
$('#presearch').html(sralmsg);
$('#srpatalert').off().on('closed.bs.alert', function () {
console.log('Closed alert');
window.location.href = "/appointments/patients";
});
Related
I am trying to create a navbar with Serch option along with Login options. I want to make the Search option right-aligned just before the Signup option. I need some help on this.
Thanks in advance.
Below is my code.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container">
<i class="fa fa-camera-retro"></i> Photo Galary
<button class="navbar-toggler" 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>
<form class="form-inline my-2 my-lg-0">
<div class="input-group">
<input type="text" class="form-control border border-right-0" placeholder="Search...">
<span class="input-group-append">
<button class="btn btn-outline-light border border-left-0" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item ">
<a class="nav-link" href="#">Sign Up <i class="fa fa-user-plus"></i></a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">Login <i class="fa fa-user"></i></a>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container">
<i class="fa fa-camera-retro"></i> Photo Galary
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<button class="navbar-toggler" 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>
<form class="form-inline my-2 my-lg-0">
<div class="input-group">
<input type="text" class="form-control border border-right-0" placeholder="Search...">
<span class="input-group-append">
<button class="btn btn-outline-light border border-left-0" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
<li class="nav-item ">
<a class="nav-link" href="#">Sign Up <i class="fa fa-user-plus"></i></a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">Login <i class="fa fa-user"></i></a>
</li>
</ul>
</div>
</div> </nav>
In Bootstrap-4 float-right won't work because Bootstrap is now a flexBox. You can use ml-auto.
I've a template that has tabbed navigation with a nested dropdown menu. The previous and next buttons should provide secondary navigation through each of the tabs. The buttons work until they need to go through the pages in the dropdown navigation. If you use the Next button to advance to a lecture, all of the pages/lectures in the dropdown will be displayed below the buttons.
I'm not sure of the best way to approach writing out the if/else piece in the js. Not sure if it's better to look at if/else based on what I have so far or start from scratch. I need help with figuring out how to get the script to go forwards and backwards through the entire list used for navigation.
$('.btnNext').click(function () {
$('.nav-tabs > .nav-item > .active').parent().next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function () {
$('.nav-tabs > .nav-item > .active').parent().prev('li').find('a').trigger('click');
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<body>
<nav role="navigation">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="tab1" data-toggle="tab" href="#page1" role="tab" >Welcome</a></li>
<li class="nav-item">
Activities</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Lectures</a>
<div class="dropdown-menu">
<a class="dropdown-item" data-toggle="tab" role="tab" id="tab3" href="#page3">Lecture 1</a>
<a class="dropdown-item" data-toggle="tab" role="tab" id="tab4" href="#page4">Lecture 2</a>
<a class="dropdown-item" data-toggle="tab" role="tab" id="tab5" href="#page5">Lecture 3</a>
</div>
</li>
</ul>
</nav>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="page1" role="tabpanel" aria-labelledby="overview-tab">
<h2>Overview</h2>
<p>Page 1. </p>
<div>
<a type="button" class="btn btn-primary btnNext nextRight">Next <em class="fas fa-chevron-right"></em></a>
</div>
</div>
<div class="tab-pane fade" id="page2" role="tabpanel" aria-labelledby="activities-tab">
<h2>Activities</h2>
Page 2.
<div class="alert alert-info fade in">
×
<p class="text-center">If you have questions regarding any of these activities, make sure to post those questions in the <strong>Open Forum</strong>.</p>
</div>
<div>
<a type="button" class="btn btn-primary btnNext nextRight">Next <em class="fas fa-chevron-right"></em></a>
<a type="button" class="btn btn-primary btnPrevious"> <em class="fas fa-chevron-left"></em> Previous</a>
</div>
</div>
<div class="tab-pane fade" id="page3" role="tabpanel" aria-labelledby="page3-tab">
<h2>Lecture 1</h2>
<p>Page 3.</p>
<div>
<a type="button" class="btn btn-primary btnNext nextRight">Next <em class="fas fa-chevron-right"></em></a>
<a type="button" class="btn btn-primary btnPrevious"> <em class="fas fa-chevron-left"></em> Previous</a>
</div>
</div>
<div class="tab-pane fade" id="page4" role="tabpanel" aria-labelledby="page4-tab">
<h2>Lecture 2</h2>
<p>Page 4. </p>
<div>
<a type="button" class="btn btn-primary btnNext nextRight">Next <em class="fas fa-chevron-right"></em></a>
<a type="button" class="btn btn-primary btnPrevious"> <em class="fas fa-chevron-left"></em> Previous</a>
</div>
</div>
<div class="tab-pane fade" id="page5" role="tabpanel" aria-labelledby="page5-tab">
<h2>Lecture 3</h2>
<p>Page 5. </p>
<div>
<a type="button" class="btn btn-primary btnPrevious"><em class="fas fa-chevron-left"></em> Previous</a>
</div>
</div>
</div>
</body>
Here is a working demo using tab('show') instead of trigger('click')
$('.btnNext').click(function() {
if (!$('[data-toggle="tab"].active').next('[data-toggle="tab"]').first().tab('show').length)
$('[data-toggle="tab"].active').parents('li').nextAll().find('[data-toggle="tab"]').first().tab('show')
});
$('.btnPrevious').click(function() {
if (!$('[data-toggle="tab"].active').prev('[data-toggle="tab"]').first().tab('show').length)
$('[data-toggle="tab"].active').parents('li').prevAll().find('[data-toggle="tab"]').last().tab('show')
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<nav role="navigation">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="tab1" data-toggle="tab" href="#page1" role="tab">Welcome</a></li>
<li class="nav-item">
Activities</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Lectures</a>
<div class="dropdown-menu">
<a class="dropdown-item" data-toggle="tab" role="tab" id="tab3" href="#page3">Lecture 1</a>
<a class="dropdown-item" data-toggle="tab" role="tab" id="tab4" href="#page4">Lecture 2</a>
<a class="dropdown-item" data-toggle="tab" role="tab" id="tab5" href="#page5">Lecture 3</a>
</div>
</li>
</ul>
</nav>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="page1" role="tabpanel" aria-labelledby="overview-tab">
<h2>Overview</h2>
<p>Page 1. </p>
<div>
<a type="button" class="btn btn-primary btnNext nextRight">Next <em class="fas fa-chevron-right"></em></a>
</div>
</div>
<div class="tab-pane fade" id="page2" role="tabpanel" aria-labelledby="activities-tab">
<h2>Activities</h2>
Page 2.
<div class="alert alert-info fade in">
×
</div>
<div>
<a type="button" class="btn btn-primary btnNext nextRight">Next <em class="fas fa-chevron-right"></em></a>
<a type="button" class="btn btn-primary btnPrevious"> <em class="fas fa-chevron-left"></em> Previous</a>
</div>
</div>
<div class="tab-pane fade" id="page3" role="tabpanel" aria-labelledby="page3-tab">
<h2>Lecture 1</h2>
<p>Page 3.</p>
<div>
<a type="button" class="btn btn-primary btnNext nextRight">Next <em class="fas fa-chevron-right"></em></a>
<a type="button" class="btn btn-primary btnPrevious"> <em class="fas fa-chevron-left"></em> Previous</a>
</div>
</div>
<div class="tab-pane fade" id="page4" role="tabpanel" aria-labelledby="page4-tab">
<h2>Lecture 2</h2>
<p>Page 4. </p>
<div>
<a type="button" class="btn btn-primary btnNext nextRight">Next <em class="fas fa-chevron-right"></em></a>
<a type="button" class="btn btn-primary btnPrevious"> <em class="fas fa-chevron-left"></em> Previous</a>
</div>
</div>
<div class="tab-pane fade" id="page5" role="tabpanel" aria-labelledby="page5-tab">
<h2>Lecture 3</h2>
<p>Page 5. </p>
<div>
<a type="button" class="btn btn-primary btnPrevious"><em class="fas fa-chevron-left"></em> Previous</a>
</div>
</div>
</div>
Hi am using bootstrap 4 and designed menu bar with caret. In that i am facing two issues.
1) when i click the button (eg LAPTOP,MObile) dropdown appears but the caret not changed. when i click the caret dropdown appears and caret changed .
2) once i click the menu dropdown appears the arrow changed but when i click another menu from the same menubar
Use this code... I have udpate this without js or jquery.
/* Type 3 */
.nav-link-type-three {
padding-right: 2.5rem !important;
padding-left: 1.5rem !important;
color: white !important;
text-decoration: none;
}
.nav-link-type-three:hover{
text-decoration: none;
}
.nav-link-type-three::after, li.show .nav-link-type-three::after{
right: -7px;
color: #fff;
font-size: 17px;
top: 1px;
font-family: FontAwesome;
content: "\f0d7";
position: relative;
}
.nav-link-type-three::after, li.show .nav-link-type-three::after{
content: "\f0d7";
}
li.show .nav-link-type-three::after{
content: "\f0d8";
color: #232323;
}
.navbar-dark .navbar-nav .show>.nav-link-type-three {
color: #232323 !important;
text-decoration: none
}
.bg-dark-type-three {
background-color: #29a4d0 !important;
}
/* Default image size */
img {
max-width: 40px;
min-height: 40px;
}
/* images space */
.col-md-2 {
margin-left: 2%;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark-type-three">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown nav-org">
<a class="nav-link-type-three nav-org " type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
LAPTOP
</a>
<div class="dropdown-menu dropdown-menu-one" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://ssl-product-images.www8-hp.com/digmedialib/prodimg/lowres/c05962448.png" alt="">
</div>
<h6> lg </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://images.idgesg.net/images/article/2017/11/bestbuylenovolaptop-100742402-large.jpg"
alt="">
</div>
<h6> sony </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://www.lenovo.com/medias/lenovo-laptop-legion-y520-15-front.png?context=bWFzdGVyfGltYWdlc3wyNzI1M3xpbWFnZS9wbmd8aW1hZ2VzL2hiMS9oMDQvOTQxMjY3NTUwMjExMC5wbmd8YjYxMzUxYzUwZDcyNmEyYjJmN2Y1MmQyZTAxYmI4NmY5Yjg4N2Y0ZjIxMWI0YzYyMTM3YTBiZmMyYjZjZGY4Ng"
alt="">
</div>
<h6> acer</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src=" https://brain-images-ssl.cdn.dixons.com/6/4/10180946/u_10180946.jpg" alt="">
</div>
<h6> dell</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE2ygZJ?ver=948e&q=90&m=6&h=623&w=767&b=%23FFFFFFFF&l=f&f=jpg&o=t&aim=true"
alt="">
</div>
<h6> HP </h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three " type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
SPEAKERS
</a>
<div class="dropdown-menu dropdown-menu-second" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6UE4aUUdaU7m5yO4lG6YvjbAcjRM0sCD5BmzP1PInJ3KcgWwB"
alt="">
</div>
<h6>Mono </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://images-na.ssl-images-amazon.com/images/I/71obbdaLHpL._SX425_.jpg" alt="">
</div>
<h6>jass </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://images.philips.com/is/image/PhilipsConsumer/SPA25A_94-_FP-global-001?$jpglarge$&wid=1250"
alt="">
</div>
<h6>iBall </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="http://www.litheaudio.com/user/products/large/Lithe%20Audio/Bluetooth%20ceiling%20speakers/Bluetooth%20speaker%20images_0034_01565_Lithe%20Audio%20Bluetooth%20IP%20Rated%20Bathroom%20Ceiling%20speaker_Cutout[1].jpg"
alt="">
</div>
<h6>Zebronics </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://n3.sdlcdn.com/imgs/e/b/6/QHM602_USB_Mini_Speaker_03332-5c47e.jpg" alt="">
</div>
<h6>Senizer </h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
MOBILES
</a>
<div class="dropdown-menu dropdown-menu-third " aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://www.91-img.com/pictures/97744-v1-apple-iphone-7-mobile-phone-large-1.jpg" alt="">
</div>
<h6> iphone 7</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center ">
<div>
<img src="https://www.gofordigitalindia.com/components/com_djclassifieds/images/item/5/5167_mobile_thb.jpg"
alt="">
</div>
<h6>samsung </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://static.toiimg.com/photo/64792032/Motorola-One.jpg" alt="">
</div>
<h6> Motorola </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://www.emibaba.com/wp-content/uploads/2017/09/Apple-iPhone-8-64gb-Red.png" alt="">
</div>
<h6> iphone 6s</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="http://www.infocusindia.co.in/mobile-phones/img/turbo5.png" alt="">
</div>
<h6>redmi </h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
CAMARA
</a>
<div class="dropdown-menu dropdown-menu-four" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
DESKTOP
</a>
<div class="dropdown-menu dropdown-menu-five" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
REFURBISHED
</a>
<div class="dropdown-menu dropdown-menu-six" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
ACCESSORIES
</a>
<div class="dropdown-menu dropdown-menu-seven" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
MOTHERBOARD
</a>
<div class="dropdown-menu dropdown-menu-eight" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
You were close. You have to point to the proper class, and then find the caret-icon elements to switch the caret.
$(document).ready(function () {
$('.nav-link-type-three').on('click', function () {
if ($(this).find('.caret-icon').hasClass('fa-caret-down')) {
$(this).find('.caret-icon').removeClass('fa-caret-down').addClass('fa-caret-up');
} else {
$(this).find('.caret-icon').removeClass('fa-caret-up').addClass('fa-caret-down');
}
});
});
/* Type 3 */
.nav-link-type-three {
padding-right: 2.5rem !important;
padding-left: 1.5rem !important;
color: white !important;
text-decoration: none
}
.navbar-dark .navbar-nav .show>.nav-link-type-three {
color: #232323 !important;
text-decoration: none
}
.bg-dark-type-three {
background-color: #29a4d0 !important;
}
/* Default image size */
img {
max-width: 40px;
min-height: 40px;
}
/* images space */
.col-md-2 {
margin-left: 2%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark-type-three">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown nav-org">
<a class="nav-link-type-three nav-org " type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
LAPTOP <i class="caret-icon fa fa-caret-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-one" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://ssl-product-images.www8-hp.com/digmedialib/prodimg/lowres/c05962448.png" alt="">
</div>
<h6> lg </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://images.idgesg.net/images/article/2017/11/bestbuylenovolaptop-100742402-large.jpg"
alt="">
</div>
<h6> sony </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://www.lenovo.com/medias/lenovo-laptop-legion-y520-15-front.png?context=bWFzdGVyfGltYWdlc3wyNzI1M3xpbWFnZS9wbmd8aW1hZ2VzL2hiMS9oMDQvOTQxMjY3NTUwMjExMC5wbmd8YjYxMzUxYzUwZDcyNmEyYjJmN2Y1MmQyZTAxYmI4NmY5Yjg4N2Y0ZjIxMWI0YzYyMTM3YTBiZmMyYjZjZGY4Ng"
alt="">
</div>
<h6> acer</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src=" https://brain-images-ssl.cdn.dixons.com/6/4/10180946/u_10180946.jpg" alt="">
</div>
<h6> dell</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE2ygZJ?ver=948e&q=90&m=6&h=623&w=767&b=%23FFFFFFFF&l=f&f=jpg&o=t&aim=true"
alt="">
</div>
<h6> HP </h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three " type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
SPEAKERS <i class="caret-icon fa fa-caret-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-second" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6UE4aUUdaU7m5yO4lG6YvjbAcjRM0sCD5BmzP1PInJ3KcgWwB"
alt="">
</div>
<h6>Mono </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://images-na.ssl-images-amazon.com/images/I/71obbdaLHpL._SX425_.jpg" alt="">
</div>
<h6>jass </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://images.philips.com/is/image/PhilipsConsumer/SPA25A_94-_FP-global-001?$jpglarge$&wid=1250"
alt="">
</div>
<h6>iBall </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="http://www.litheaudio.com/user/products/large/Lithe%20Audio/Bluetooth%20ceiling%20speakers/Bluetooth%20speaker%20images_0034_01565_Lithe%20Audio%20Bluetooth%20IP%20Rated%20Bathroom%20Ceiling%20speaker_Cutout[1].jpg"
alt="">
</div>
<h6>Zebronics </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://n3.sdlcdn.com/imgs/e/b/6/QHM602_USB_Mini_Speaker_03332-5c47e.jpg" alt="">
</div>
<h6>Senizer </h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
MOBILES <i class="caret-icon fa fa-caret-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-third " aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://www.91-img.com/pictures/97744-v1-apple-iphone-7-mobile-phone-large-1.jpg" alt="">
</div>
<h6> iphone 7</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center ">
<div>
<img src="https://www.gofordigitalindia.com/components/com_djclassifieds/images/item/5/5167_mobile_thb.jpg"
alt="">
</div>
<h6>samsung </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://static.toiimg.com/photo/64792032/Motorola-One.jpg" alt="">
</div>
<h6> Motorola </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://www.emibaba.com/wp-content/uploads/2017/09/Apple-iPhone-8-64gb-Red.png" alt="">
</div>
<h6> iphone 6s</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="http://www.infocusindia.co.in/mobile-phones/img/turbo5.png" alt="">
</div>
<h6>redmi </h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
CAMARA <i class="caret-icon fa fa-caret-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-four" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
DESKTOP <i class="caret-icon fa fa-caret-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-five" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
REFURBISHED <i class="caret-icon fa fa-caret-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-six" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
ACCESSORIES <i class="caret-icon fa fa-caret-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-seven" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
MOTHERBOARD <i class="caret-icon fa fa-caret-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-eight" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
The problem is in the second row of your jQuery.
$('.fa-caret-down').on('click', function () {}
Instead of targeting .fa-caret-down which is a class used by icon you should target the entire button.
$('button').on('click', function () {}
NOTE: I wrote button but you need to target specific tag nav-link in your case.
I'm trying to add a hover effect for my sidebar. When the user hovers on the sidebar it should call the onmouseover function and when the user hovers out of the sidebar it should call the onmouseout function.
However, I noticed that both functions are being called at the same time. Even if the user is hovering over the sidebar and clicks on the dropdown and scrolls through the individual list items within the sidebar, the onmouseout function is being called and the onmouseover.
How do I only call the onmouseover function when it is inside the sidebar only ?
https://jsfiddle.net/bc6m3Lte/
<body>
<ul id="sidebar" class="nav flex-column" onmouseover="HoverOpenSideBar()" onmouseout="HoverCloseSideBar()">
<div id="TitleSidebar" class="pt-2 pb-3 px-1 d-flex" >
<span id="sidelogo" class="mr-auto p-2">Logo</span>
<button type="button" class="btn btn-default" href="#" onclick="OpenCloseSideBar()" >
<span class="fas fa-align-justify" aria-hidden="true"></span>
</button>
</div>
<li id="list1" class="nav-item ">
<a id="toggleDropDown" class="nav-link active px-0 " data-toggle="collapse" href="#submenu1" aria-expanded="false">
<div id="list2" class=" d-flex align-items-center ">
<span id="list3" class=" pl-3 fas fa-comment-dots"></span>
<span class="list4 ml-3 text-nowrap">Dashboard one</span>
<span class="fas fa-angle-right ml-3"></span>
</div>
</a>
</li>
<!-- Submenu content -->
<div id='submenu1' class="collapse" >
<a href="#" class="list-group-item list-group-item-action py-1">
<div id="abcd" class="d-flex align-items-center pl-2 " >
<span class="fas fa-circle"></span>
<span class="menu-collapsed ml-2">Charts</span>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action py-1">
<div id="abcd" class="d-flex align-items-center pl-2 " >
<span class="fas fa-circle"></span>
<span class="menu-collapsed ml-2">Charts</span>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action py-1">
<div id="abcd" class="d-flex align-items-center pl-2 " >
<span class="fas fa-circle"></span>
<span class="menu-collapsed ml-2">Charts</span>
</div>
</a>
</div>
</ul>
<nav id="topbar" class="navbar navbar-dark bg-dark Max-width 100%">
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
</div>
</div>
</body>
Javascript
function HoverOpenSideBar() {
console.log("In Hover OPEN sidebar");
}
function HoverCloseSideBar() {
console.log("In Hover OUT sidebar");
}
Use onmouseenter and onmouseleave instead of onmouseover and onmouseout.
<ul id="sidebar" class="nav flex-column" onmouseenter="HoverOpenSideBar()" onmouseleave="HoverCloseSideBar()">
I'm creating a 2 different dropdown, however, they're opening the same dropdown menu.
My code;
<div class="d-flex">
<button class="btn btn-icon btn-group-nav shadow-sm btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-offset="0 8" aria-haspopup="true" aria-expanded="false">
<span class="btn-inner--icon"><i class="far fa-sliders-h"></i></span>
<span class="btn-inner--text d-none d-md-inline-block">Sort by</span>
</button>
<div class="dropdown-menu dropdown-menu-left dropdown-menu-arrow">
<a class="dropdown-item" href="">Price</a>
<a class="dropdown-item" href="">Amount</a>
<a class="dropdown-item" href="">Number</a>
</div>
<button class="btn btn-icon btn-group-nav shadow-sm btn-secondary ml-auto dropdown-toggle" type="button" data-toggle="dropdown" data-offset="0 8" aria-haspopup="true" aria-expanded="false">
<span class="btn-inner--icon"><i class="far fa-user"></i></span>
<span class="btn-inner--text d-none d-md-inline-block">User</span>
</button>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="account-settings.html">Settings</a>
<a class="dropdown-item" href="account-billing.html">Billing</a>
<a class="dropdown-item" href="account-notifications.html">Notifications</a>
</div>
</div>
How can I fix this?
As the documentation states and shows you:
Wrap the dropdown’s toggle (your button or link) and the dropdown menu
within .dropdown
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex">
<div class="dropdown">
<button class="btn btn-icon btn-group-nav shadow-sm btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-offset="0 8" aria-haspopup="true" aria-expanded="false">
<span class="btn-inner--icon"><i class="far fa-sliders-h"></i></span>
<span class="btn-inner--text d-none d-md-inline-block">Sort by</span>
</button>
<div class="dropdown-menu dropdown-menu-left dropdown-menu-arrow">
<a class="dropdown-item" href="">Price</a>
<a class="dropdown-item" href="">Amount</a>
<a class="dropdown-item" href="">Number</a>
</div>
</div>
<div class="dropdown">
<button class="btn btn-icon btn-group-nav shadow-sm btn-secondary ml-auto dropdown-toggle" type="button" data-toggle="dropdown" data-offset="0 8" aria-haspopup="true" aria-expanded="false">
<span class="btn-inner--icon"><i class="far fa-user"></i></span>
<span class="btn-inner--text d-none d-md-inline-block">User</span>
</button>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="account-settings.html">Settings</a>
<a class="dropdown-item" href="account-billing.html">Billing</a>
<a class="dropdown-item" href="account-notifications.html">Notifications</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>