How to add a Delay on Bootstrap Dropdown Hover - javascript

I'm trying to add a delay for the bootstrap dropdown.
I have already added css to make the dropdown show on hover.
You can test it here http://www.bootply.com/YcVBzvXqrR
Here is my HTML:
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="category-box">
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-bullhorn fa-3x"></i>
<h5>CATEGORY 1</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 1
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-car fa-3x"></i>
<h5>CATEGORY 2</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 2
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-file-text fa-3x"></i>
<h5>CATEGORY 3</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 3
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-home fa-3x" style="margin-bottom: -20px; margin-top: -11px; font-size: 4em;"></i>
<h5>CATEGORY 4</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 4
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-cogs fa-3x"></i>
<h5>CATEGORY 5</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 5
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-users fa-3x"></i>
<h5>CATEGORY 6</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 6
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-heart fa-3x"></i>
<h5>CATEGORY 7</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 7
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-briefcase fa-3x"></i>
<h5>CATEGORY 8</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 8
</div>
</div>
</div>
</div>
</div>
</div>
And here is my CSS:
.dropdown:hover .dropdown-menu {
display: block;
}
.category-overlay{
width:1190px;
height:90px;
background:#ddd;
margin-top:30px;
}
I need to know how to make the dropdown appear with after a small delay.


Two changes I would recommend
Add the below Jquery code to add delay:
jQuery('div.dropdown').hover(function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
Remove the css
/.dropdown:hover .dropdown-menu {
display: block;
}/
This is the fiddle I have modified
http://www.bootply.com/YcVBzvXqrR#

Related

Keep List in the sidebar on same line after collapse

I recently used an open-source code for creating Sidebar to implement to my Website.
I'm trying to do 2 things mainly to it. The first thing I wanted to be "collapsed onLoad", I tried doing it myself but the content of it stayed out of the sidebar. The second problem I'm facing is "Keeping the icons on the same line of the content", I want the icons when the sidebar is collapsed to be on the same line of the list when it's open.
$(document).ready(function() {
// Hide submenus
$('#body-row .collapse').collapse('hide');
// Collapse/Expand icon
$('#collapse-icon').addClass('fa-angle-double-left');
// Collapse click
$('[data-toggle=sidebar-colapse]').click(function() {
SidebarCollapse();
});
function SidebarCollapse() {
$('.menu-collapsed').toggleClass('d-none');
$('.sidebar-submenu').toggleClass('d-none');
$('.submenu-icon').toggleClass('d-none');
$('#sidebar-container').toggleClass('sidebar-expanded sidebar-collapsed');
// Treating d-flex/d-none on separators with title
var SeparatorTitle = $('.sidebar-separator-title');
if (SeparatorTitle.hasClass('d-flex')) {
SeparatorTitle.removeClass('d-flex');
} else {
SeparatorTitle.addClass('d-flex');
}
// Collapse/Expand icon
$('#collapse-icon').toggleClass('fa-angle-double-left fa-angle-double-right');
}
});
#body-row {
margin-left: 0;
margin-right: 0;
}
#sidebar-container {
min-height: 100vh;
background-color: #333;
padding: 0;
}
/* Sidebar sizes when expanded and expanded */
.sidebar-expanded {
width: 230px;
}
.sidebar-collapsed {
width: 60px;
}
/* Menu item*/
#sidebar-container .list-group a {
height: 50px;
color: white;
}
/* Submenu item*/
#sidebar-container .list-group .sidebar-submenu a {
height: 45px;
padding-left: 30px;
}
.sidebar-submenu {
font-size: 0.9rem;
}
/* Separators */
.sidebar-separator-title {
background-color: #333;
height: 35px;
}
.sidebar-separator {
background-color: #333;
height: 25px;
}
.logo-separator {
background-color: #333;
height: 60px;
}
/* Closed submenu icon */
#sidebar-container .list-group .list-group-item[aria-expanded="false"] .submenu-icon::after {
content: " \f0d7";
font-family: FontAwesome;
display: inline;
text-align: right;
padding-left: 10px;
}
/* Opened submenu icon */
#sidebar-container .list-group .list-group-item[aria-expanded="true"] .submenu-icon::after {
content: " \f0da";
font-family: FontAwesome;
display: inline;
text-align: right;
padding-left: 10px;
}
#push-medown {
margin-top: 90px
}
<script src="https://kit.fontawesome.com/ddcb362732.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- Bootstrap row -->
<div class="row" id="body-row">
<!-- Sidebar -->
<div id="sidebar-container" class="sidebar-expanded d-none d-md-block">
<!-- d-* hiddens the Sidebar in smaller devices. Its itens can be kept on the Navbar 'Menu' -->
<!-- Bootstrap List Group -->
<ul class="list-group">
<a href="#" data-toggle="sidebar-colapse" class="bg-dark list-group-item list-group-item-action d-flex align-items-center">
<div class="d-flex w-100 justify-content-start align-items-center">
<span id="collapse-icon" class="fas fa-bars mr-3 "></span>
</div>
</a>
<!-- Separator with title -->
<li class="list-group-item sidebar-separator-title text-muted d-flex align-items-center menu-collapsed" id="push-medown">
<large>STUDENT</large>
</li>
<!-- /END Separator -->
<!-- Menu with submenu -->
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fab fa-microsoft fa-fw mr-3"></span>
<span class="menu-collapsed">Dashboard</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-list-alt fa-fw mr-3"></span>
<span class="menu-collapsed">Homework</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-chalkboard-teacher fa-fw mr-3"></span>
<span class="menu-collapsed">Classes</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fa fa-tasks fa-fw mr-3"></span>
<span class="menu-collapsed">Grades</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-hourglass-start fa-fw mr-3"></span>
<span class="menu-collapsed">Quizes</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fa fa-tasks fa-fw mr-3"></span>
<span class="menu-collapsed">Agenda</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="far fa-calendar-alt fa-fw mr-3"></span>
<span class="menu-collapsed">Calendar</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-volume-up fa-fw mr-3"></span>
<span class="menu-collapsed">Events</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-sign-out-alt fa-fw mr-3"></span>
<span class="menu-collapsed">Logout</span>
</div>
</a>
</ul>
<!-- List Group END-->
</div>
<!-- sidebar-container END -->
<!-- MAIN -->
<div class="col">
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<button class="navbar-toggler navbar-toggler-right" 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>
<a class="navbar-brand" href="#">
<img src="https://v4-alpha.getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
<span class="menu-collapsed">My Bar</span>
</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<!-- This menu is hidden in bigger devices with d-sm-none.
The sidebar isn't proper for smaller screens imo, so this dropdown menu can keep all the useful sidebar itens exclusively for smaller screens -->
<li class="nav-item dropdown d-sm-block d-md-none">
<a class="nav-link dropdown-toggle" href="#" id="smallerscreenmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu
</a>
<div class="dropdown-menu" aria-labelledby="smallerscreenmenu">
<a class="dropdown-item" href="#">Dashboard</a>
<a class="dropdown-item" href="#">Profile</a>
<a class="dropdown-item" href="#">Tasks</a>
<a class="dropdown-item" href="#">Etc ...</a>
</div>
</li>
<!-- Smaller devices menu END -->
</ul>
</div>
</nav>
<!-- NavBar END -->
</div>
<!-- Main Col END -->
</div>
<!-- body-row END -->
<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

I have made the necessary changes.
$(document).ready(function() {
// Hide submenus
$("#body-row .collapse").collapse("hide");
// Collapse/Expand icon
$("#collapse-icon").addClass("fa-angle-double-left");
// Collapse click
$("[data-toggle=sidebar-colapse]").click(function() {
SidebarCollapse();
});
function SidebarCollapse() {
$(".menu-collapsed").toggleClass("d-none");
$(".sidebar-submenu").toggleClass("d-none");
$(".submenu-icon").toggleClass("d-none");
$("#sidebar-container").toggleClass("sidebar-expanded sidebar-collapsed");
$("#push-medown").toggleClass("open");
// Collapse/Expand icon
$("#collapse-icon").toggleClass("fa-angle-double-left fa-angle-double-right");
}
});
#body-row {
margin-left: 0;
margin-right: 0;
}
#sidebar-container {
min-height: 100vh;
background-color: #333;
padding: 0;
}
/* Sidebar sizes when expanded and expanded */
.sidebar-expanded {
width: 230px;
}
.sidebar-collapsed {
width: 60px;
}
/* Menu item*/
#sidebar-container .list-group a {
height: 50px;
color: white;
}
/* Submenu item*/
#sidebar-container .list-group .sidebar-submenu a {
height: 45px;
padding-left: 30px;
}
.sidebar-submenu {
font-size: 0.9rem;
}
/* Separators */
.sidebar-separator-title {
background-color: #333;
height: 35px;
}
.sidebar-separator {
background-color: #333;
height: 25px;
}
.logo-separator {
background-color: #333;
height: 60px;
}
/* Closed submenu icon */
#sidebar-container .list-group .list-group-item[aria-expanded="false"] .submenu-icon::after {
content: " \f0d7";
font-family: FontAwesome;
display: inline;
text-align: right;
padding-left: 10px;
}
/* Opened submenu icon */
#sidebar-container .list-group .list-group-item[aria-expanded="true"] .submenu-icon::after {
content: " \f0da";
font-family: FontAwesome;
display: inline;
text-align: right;
padding-left: 10px;
}
#push-medown {
margin-top: 90px;
opacity: 0;
}
#push-medown.open {
opacity: 1;
}
<script src="https://kit.fontawesome.com/ddcb362732.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- Bootstrap row -->
<div class="row" id="body-row">
<!-- Sidebar -->
<div id="sidebar-container" class="sidebar-collapsed d-none d-md-block">
<!-- d-* hiddens the Sidebar in smaller devices. Its itens can be kept on the Navbar 'Menu' -->
<!-- Bootstrap List Group-->
<ul class="list-group">
<a href="#" data-toggle="sidebar-colapse" class="bg-dark list-group-item list-group-item-action d-flex align-items-center">
<div class=" w-100 justify-content-start align-items-center">
<span id="collapse-icon" class="fas fa-bars mr-3 "></span>
</div>
</a>
<!-- Separator with title -->
<li class="list-group-item sidebar-separator-title text-muted align-items-center d-flex" id="push-medown">
<large>STUDENT</large>
</li>
<!-- /END Separator -->
<!-- Menu with submenu -->
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fab fa-microsoft fa-fw mr-3"></span>
<span class="menu-collapsed d-none">Dashboard</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-list-alt fa-fw mr-3"></span>
<span class="menu-collapsed d-none">Homework</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-chalkboard-teacher fa-fw mr-3"></span>
<span class="menu-collapsed d-none">Classes</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fa fa-tasks fa-fw mr-3"></span>
<span class="menu-collapsed d-none">Grades</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-hourglass-start fa-fw mr-3"></span>
<span class="menu-collapsed d-none">Quizes</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fa fa-tasks fa-fw mr-3"></span>
<span class="menu-collapsed d-none">Agenda</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="far fa-calendar-alt fa-fw mr-3"></span>
<span class="menu-collapsed d-none">Calendar</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-volume-up fa-fw mr-3"></span>
<span class="menu-collapsed d-none">Events</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-sign-out-alt fa-fw mr-3"></span>
<span class="menu-collapsed d-none">Logout</span>
</div>
</a>
</ul>
<!-- List Group END-->
</div>
<!-- sidebar-container END -->
<!-- MAIN -->
<div class="col">
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<button class="navbar-toggler navbar-toggler-right" 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>
<a class="navbar-brand" href="#">
<img src="https://v4-alpha.getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
<span class="menu-collapsed">My Bar</span>
</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<!-- This menu is hidden in bigger devices with d-sm-none.
The sidebar isn't proper for smaller screens imo, so this dropdown menu can keep all the useful sidebar itens exclusively for smaller screens -->
<li class="nav-item dropdown d-sm-block d-md-none">
<a class="nav-link dropdown-toggle" href="#" id="smallerscreenmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu
</a>
<div class="dropdown-menu" aria-labelledby="smallerscreenmenu">
<a class="dropdown-item" href="#">Dashboard</a>
<a class="dropdown-item" href="#">Profile</a>
<a class="dropdown-item" href="#">Tasks</a>
<a class="dropdown-item" href="#">Etc ...</a>
</div>
</li>
<!-- Smaller devices menu END -->
</ul>
</div>
</nav>
<!-- NavBar END -->
</div>
<!-- Main Col END -->
</div>
<!-- body-row END -->
<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
👉 Check it in action on codepen

Bootstrap closed.bs.alert doesnt fire when alert is being dynamically created

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";
});

How to stick the header area at the top of page?

This is my header area section of my template. i want to stick the menu bar and logo at the top. I tried a lot for all most 4 days.But i couldn't.I use sticky.js plugin.But it wouldn't happen.What's wrong with my code?I couldn't understand.I use parallax in the header section.Is that for the problem.
.parallax-window {
background: transparent;
}
.parallax_bg {
z-index: 2;
position: relative;
color: #FFFFFF;
}
<div class="top_area parallax-window" data-z-index="1" data-parallax="scroll" data-image-src="img/header_img/header_background.jpg">
<div class="parallax_bg">
<div class="top_area">
<div class="header_area">
<div class="container">
<div class="row" id="navbar-example">
<div class="col-md-2">
<div class="logo">
<img src="img/header_img/logo.png" alt="">
</div>
</div>
<div class="col-md-10">
<div class="main_menu">
<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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Igredients</li>
<li>Menu</li>
<li>Reviews</li>
<li>Reservations</li>
</ul>
</div>
<div class="social_links">
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-youtube" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="header_text_area">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="header_text">
<h2>the right ingredients <br /> for the right food</h2>
BOOK A TABLE
SEE THE MENU
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Try navbar-fixed-top in class of header.

Is this what you're trying to achieve?
.parallax-window {
position: fixed;
top: 0px;
left: 0px;
}
<div class="top_area parallax-window" data-z-index="1" data-parallax="scroll" data-image-src="img/header_img/header_background.jpg">
<div class="parallax_bg">
<div class="top_area">
<div class="header_area">
<div class="container">
<div class="row" id="navbar-example">
<div class="col-md-2">
<div class="logo">
<img src="img/header_img/logo.png" alt="">
</div>
</div>
<div class="col-md-10">
<div class="main_menu">
<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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Igredients</li>
<li>Menu</li>
<li>Reviews</li>
<li>Reservations</li>
</ul>
</div>
<div class="social_links">
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-youtube" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="header_text_area">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="header_text">
<h2>the right ingredients <br /> for the right food</h2>
BOOK A TABLE
SEE THE MENU
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

how to set footer at the bottom when there is no content

<footer>
<div class="container">
<div class="row container">
<div class="col-sm-6 col-md-6 col-lg-6 col-xs-12 no-padding">
<p>Designed by Wiredelta </p>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 col-xs-12 no-padding">
<div class="pull-right barMain">
<ul class="social-bar">
<li>
<a href="https://www.facebook.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa-facebook fa-stack-1x"></i></span>
</a>
</li>
<li>
<a href="https://twitter.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa fa-twitter fa-stack-1x"></i></span>
</a>
</li>
<li>
<a href="https://plus.google.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa-google-plus fa-stack-1x"></i></span>
</a>
</li>
<li>
<a href="https://www.instagram.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa-instagram fa-stack-1x"></i></span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
not getting footer at bottom of the page when there is no content is present in the body.so i need to fix footer at the bottom only, when i run the code the code.plzz give suggestion how to fix footer at the bottom exactly.

footer {
position: fixed;
bottom: 0;
}
just add this in your css.

A) Footer is fixed:
footer {
background-color: skyblue;
position:fixed;
bottom: 0;
width: 100%;
}
footer {
background-color: skyblue;
position:fixed;
bottom: 0;
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<footer>
<div class="container">
<div class="row container">
<div class="col-sm-6 col-md-6 col-lg-6 col-xs-12 no-padding">
<p>Designed by Wiredelta </p>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 col-xs-12 no-padding">
<div class="pull-right barMain">
<ul class="social-bar">
<li>
<a href="https://www.facebook.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa-facebook fa-stack-1x"></i></span>
</a>
</li>
<li>
<a href="https://twitter.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa fa-twitter fa-stack-1x"></i></span>
</a>
</li>
<li>
<a href="https://plus.google.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa-google-plus fa-stack-1x"></i></span>
</a>
</li>
<li>
<a href="https://www.instagram.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa-instagram fa-stack-1x"></i></span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
B) Footer is not fixed:
body {
height: 1200px;
position: relative;
}
footer {
background-color: skyblue;
position:absolute;
bottom: 0;
width: 100%;
}
body {
height: 1200px;
position: relative;
}
footer {
background-color: skyblue;
position:absolute;
bottom: 0;
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<footer>
<div class="container">
<div class="row container">
<div class="col-sm-6 col-md-6 col-lg-6 col-xs-12 no-padding">
<p>Designed by Wiredelta </p>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 col-xs-12 no-padding">
<div class="pull-right barMain">
<ul class="social-bar">
<li>
<a href="https://www.facebook.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa-facebook fa-stack-1x"></i></span>
</a>
</li>
<li>
<a href="https://twitter.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa fa-twitter fa-stack-1x"></i></span>
</a>
</li>
<li>
<a href="https://plus.google.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa-google-plus fa-stack-1x"></i></span>
</a>
</li>
<li>
<a href="https://www.instagram.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa-instagram fa-stack-1x"></i></span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>

You have three options from which I would suggest using flex-box.
1. position: fixed
footer {
position: fixed;
left: 0;
bottom: 0;
right: 0;
}
2. Flex-box
HTML
<html>
<body>
<main></main>
<footer></footer>
</body>
</html>
CSS
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex-grow: 1;
}
Demo: https://codepen.io/marcobiedermann/pen/XpoarE
3. Table
HTML
<html>
<body>
<main></main>
<footer></footer>
</body>
</html>
CSS
html {
height: 100%;
}
body {
display: table;
min-height: 100vh;
}
main: {
height: 100%;
}
footer {
display: table-row;
height: 1px;
}
Demo: https://codepen.io/marcobiedermann/pen/jImsc

bootstrap nav bar toggling?

Below is my code for a nav-bar. Can someone please help me in activating the toggle button. It does not respond on click. I just want it to toggle the content of sidebar-wrapper. I want it to be completely visible and once I click on the button it should disappear and should come back once I hit the toggle button again. Am pretty new to this. Any help is appreciated.
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2" style="border:none;"><span class="fa-stack"> <i class="fa fa-bars fa-stack-2x "></i></span></button></li>
</ul>
<div style="text-align: center; font-size: 20px; padding-top: 7px;">
<img src="images/logo.png">
<p style="display: inline"><b>Congress API</b></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2" style="background-color: black">
<div id="sidebar-wrapper">
<ul class="sidebar-nav nav-stacked" id="menu">
<li class="active" onclick="showMainDivision('legislate','bills','committees','favourites')">
<a ng-click="getLegislators()"><span class="fa-stack fa-lg pull-left"><i class="fa fa-user fa-stack-1x "></i></span>Legislators</a>
</li>
<li onclick="showMainDivision('bills','legislate','committees','favourites')">
<a ng-click="getActiveBill()"> <span class="fa-stack fa-lg pull-left"><i class="fa fa-file-o fa-stack-1x "></i></span>Bills</a>
</li>
<li onclick="showMainDivision('committees','bills','legislate','favourites')">
<a ng-click="getCommittees()"><span class="fa-stack fa-lg pull-left"><i class="fa fa-sign-in fa-stack-1x "></i></span>Committees</a>
</li>
<li onclick="showMainDivision('favourites','committees','bills','legislate');">
<a ng-click="getFavourites()" id="fav_load"><span class="fa-stack fa-lg pull-left"><i class="fa fa-star-o fa-stack-1x "></i></span>Favourites</a>
</li>
</ul>
</div>
</div>
</div>
</div>

function toggleDIV(DIV)
{
if(document.getElementById(DIV).style.display=="none")
{
document.getElementById(DIV).style.display="block"
}
else
{
document.getElementById(DIV).style.display="none"
}
}
// use it like:
// onClick="toggleDIV('myDivName')";

Categories

Resources