I'm trying to make this bootstrap collapsible sidebar template work, but can't. It looks like it's supposed to look, but doesn't react on button presses, even though I've downloaded the "Compiled CSS and Js" from https://getbootstrap.com/docs/4.1/getting-started/download/ and jquery and included it like this:
<html>
<head>
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap-4.1.3/css/bootstrap.css">
<script src="${pageContext.request.contextPath}/bootstrap-4.1.3/js/bootstrap.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap-4.1.3/js/jquery-3.3.1.min.js"></script>
<style>style from template</style>
<script>script from template</script>
</head>
<body>
body from template
</body>
</html>
When I click on collapse or on any position on the menu it doesn' react at all, as opposed to the correct reaction one can see in template.
Why does this happend and how to fix it?
EDIT: Real link: https://www.codeply.com/go/3e0RAjccRO/bootstrap-4-collapsing-sidebar-menu
Although your provided link (5th word in question) doesn't point to any starter template. If you're talking about collapsible sidebar as shown in screenshot below:
Then its working for me. All I've done is added missing link for font-awesome css. See the complete code snippet below:
#sidebar .list-group-item {
border-radius: 0;
background-color: #333;
color: #ccc;
border-left: 0;
border-right: 0;
border-color: #2c2c2c;
white-space: nowrap;
}
/* highlight active menu */
#sidebar .list-group-item:not(.collapsed) {
background-color: #222;
}
/* closed state */
#sidebar .list-group .list-group-item[aria-expanded="false"]::after {
content: " \f0d7";
font-family: FontAwesome;
display: inline;
text-align: right;
padding-left: 5px;
}
/* open state */
#sidebar .list-group .list-group-item[aria-expanded="true"] {
background-color: #222;
}
#sidebar .list-group .list-group-item[aria-expanded="true"]::after {
content: " \f0da";
font-family: FontAwesome;
display: inline;
text-align: right;
padding-left: 5px;
}
/* level 1*/
#sidebar .list-group .collapse .list-group-item {
padding-left: 20px;
}
/* level 2*/
#sidebar .list-group .collapse > .collapse .list-group-item {
padding-left: 30px;
}
/* level 3*/
#sidebar .list-group .collapse > .collapse > .collapse .list-group-item {
padding-left: 40px;
}
#media (max-width:48em) {
/* overlay sub levels on small screens */
#sidebar .list-group .collapse.in, #sidebar .list-group .collapsing {
position: absolute;
z-index: 1;
width: 190px;
}
#sidebar .list-group > .list-group-item {
text-align: center;
padding: .75rem .5rem;
}
/* hide caret icons of top level when collapsed */
#sidebar .list-group > .list-group-item[aria-expanded="true"]::after,
#sidebar .list-group > .list-group-item[aria-expanded="false"]::after {
display:none;
}
}
/* change transition animation to width when entire sidebar is toggled */
#sidebar.collapse {
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
-webkit-transition-duration: .2s;
-o-transition-duration: .2s;
transition-duration: .2s;
}
#sidebar.collapsing {
opacity: 0.8;
width: 0;
-webkit-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
transition-timing-function: ease-in;
-webkit-transition-property: width;
-o-transition-property: width;
transition-property: width;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-1 pl-0 pr-0 collapse fade show" id="sidebar">
<div class="list-group panel">
<i class="fa fa-dashboard fa-fw"></i> <span class="ml-1 hidden-sm-down"> Item 1</span>
<div class="collapse" id="menu1">
Subitem 1
<div class="collapse" id="menu1sub1">
Subitem 1 a
Subitem 2 b
Subitem 3 c
<div class="collapse" id="menu1sub1sub1">
Subitem 3 c.1
Subitem 3 c.2
</div>
Subitem 4 d
Subitem 5 e
<div class="collapse" id="menu1sub1sub2">
Subitem 5 e.1
Subitem 5 e.2
</div>
</div>
Subitem 2
Subitem 3
</div>
<i class="fa fa-film fa-fw"></i> <span class="ml-1 hidden-sm-down"> Item 2</span>
<i class="fa fa-book fa-fw"></i> <span class="ml-1 hidden-sm-down"> Item 3 </span>
<div class="collapse" id="menu3">
3.1
3.2
<div class="collapse" id="menu3sub2">
3.2 a
3.2 b
3.2 c
</div>
3.3
</div>
<i class="fa fa-heart fa-fw"></i> <span class="ml-1 hidden-sm-down">Item 4</span>
<i class="fa fa-list fa-fw"></i> <span class="ml-1 hidden-sm-down">Item 5</span>
<i class="fa fa-clock-o fa-fw"></i> <span class="ml-1 hidden-sm-down">Link</span>
<i class="fa fa-th fa-fw"></i> <span class="ml-1 hidden-sm-down">Link</span>
<i class="fa fa-gear fa-fw"></i> <span class="ml-1 hidden-sm-down">Link</span>
<i class="fa fa-calendar fa-fw"></i> <span class="ml-1 hidden-sm-down">Link</span>
<i class="fa fa-envelope fa-fw"></i> <span class="ml-1 hidden-sm-down">Link</span>
<i class="fa fa-bar-chart-o fa-fw"></i> <span class="ml-1 hidden-sm-down">Link</span>
<i class="fa fa-star fa-fw"></i> <span class="ml-1 hidden-sm-down">Link</span>
</div>
</div>
<main class="col-md-9 col-11 pl-2 pt-2">
<i class="fa fa-navicon fa-2x text-muted"></i>
<div class="page-header">
<h1>Bootstrap 4 Sidebar Menu</h1>
</div>
<p class="lead">A responsive, multi-level vertical accordion.</p>
</main>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
Related
Precondition
I have a tab bar on my application, each tab labels include icons and text.
Users can navigate between tabs by tapping a tab. Once an edge tab has been fired, other tabs should shift left or right.
Expected Result
I want it to work like Web Material Component's Scrolling tabs.
Problem
I not sure how to shift the tabs by using pure JavaScript when edge tab has been pressed. Can anyone else give some tips for me?
See the code snippet below:
function clickHandler(e) {
let target = e.srcElement || e.target;
console.log(target);
}
.flex-container {
width: 100%;
min-width: 50rem;
height: 7rem;
display: flex;
align-items: center;
justify-content: flex-start;
background: black;
overflow: hidden;
}
.sub-menu {
display: flex;
flex-direction: column;
align-items: center;
width: 7rem;
color: white;
flex-grow: 1;
min-width: 22%;
}
.sub-menu:active {
color: gray;
}
.menu-icon {
width: 3.2rem;
height: 3.2rem;
text-align: center;
}
.menu-title {
height: 1.7rem;
width: 7rem;
font-size: 1.2rem;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="flex-container" onclick="clickHandler(event)">
<div class="sub-menu">
<div class="menu-icon"><i class="fa fa-behance fa-3x"></i></div>
<span class="menu-title">Action 1</span>
</div>
<div class="sub-menu">
<div class="menu-icon"><i class="fa fa-codepen fa-3x"></i></div>
<span class="menu-title">Action 2</span>
</div>
<div class="sub-menu">
<div class="menu-icon"><i class="fa fa-eercast fa-3x"></i></div>
<span class="menu-title">Action 3</span>
</div>
<div class="sub-menu">
<div class="menu-icon"><i class="fa fa-fort-awesome fa-3x"></i></div>
<span class="menu-title">Action 4</span>
</div>
<div class="sub-menu">
<div class="menu-icon"><i class="fa fa-flickr fa-3x"></i></div>
<span class="menu-title">Action 5</span>
</div>
<div class="sub-menu">
<div class="menu-icon"><i class="fa fa-skype fa-3x"></i></div>
<span class="menu-title">Action 6</span>
</div>
<div class="sub-menu">
<div class="menu-icon"><i class="fa fa-vimeo fa-3x"></i></div>
<span class="menu-title">Action 7</span>
</div>
<div class="sub-menu">
<div class="menu-icon"><i class="fa fa-tumblr fa-3x"></i></div>
<span class="menu-title">Action 8</span>
</div>
<div class="sub-menu">
<div class="menu-icon"><i class="fa fa-twitter fa-3x"></i></div>
<span class="menu-title">Action 9</span>
</div>
<div class="sub-menu">
<div class="menu-icon"><i class="fa fa-trello fa-3x"></i></div>
<span class="menu-title">Action 10</span>
</div>
</div>
You can try my code:
function clickHandler(el) {
const rect = el.getBoundingClientRect()
const winWidth = window.innerWidth || document.documentElement.clientWidth
const widthScroll = winWidth * 33 / 100
if (rect.left <= 0 + 10)
{
document.getElementById('main-menu').scrollLeft -= widthScroll ;
}
if (rect.right >= winWidth - 10)
{
document.getElementById('main-menu').scrollLeft += widthScroll ;
}
}
This is demo link https://codepen.io/phuongnm153/pen/BeagOo
You can add more animation for effect when scroll
I am trying to toggle the arrows when a div is expanded see
$(document).ready(function() {
$('.expandableCollapsibleDiv').click(function() {
var showElementDescription = $(this).find('ul');
// var showElementDescription = $(this).parents('.expandableCollapsibleDiv').find('ul');
if ($(showElementDescription).is(':visible')) {
showElementDescription.hide("fast", "swing");
$(this).find($('.fa')).removeClass('fa-angle-down').addClass('fa-angle-up');
} else {
showElementDescription.show("fast", "swing");
$(this).find($('.fa')).removeClass('fa-angle-up').addClass('fa-angle-down');
}
});
});
.expandableCollapsibleDiv i {
cursor: pointer;
margin-right: 10px;
margin-top: 5px;
padding-left: 10px;
float: right;
}
.expandableCollapsibleDiv ul {
border-bottom: 1px solid white;
clear: both;
list-style: outside none none;
margin: 0;
padding-bottom: 10px;
display: none;
/* visibility: hidden;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="mainDiv">
<div class="expandableCollapsibleDiv">
<i class="fa fa-2x fa-angle-down"></i>
<h3><a>NEW YORK</a></h3>
<ul>
<li><a>Albany</a></li>
<li><a>Buffalo</a></li>
<li><a>Kingston</a></li>
<li><a>Tonawanda</a></li>
<li><a>Sherrill</a></li>
<li><a>Sherrill</a></li>
<li><a>Oneida</a></li>
</ul>
</div>
<div class="expandableCollapsibleDiv">
<i class="fa fa-2x fa-angle-down"></i>
<h3><a>CALIFORNIA</a></h3>
<ul>
<li><a>Alameda</a></li>
<li><a>Bell</a></li>
<li><a>Banning</a></li>
<li><a>Campbell</a></li>
<li><a>Fresno</a></li>
<li><a>Galt</a></li>
<li><a>Jackson</a></li>
</ul>
</div>
<div class="expandableCollapsibleDiv">
<i class="fa fa-2x fa-angle-down"></i>
<h3><a>WASHINGTON</a></h3>
<ul>
<li><a>Asotin</a></li>
<li><a>Bellingham</a></li>
<li><a>Bothell</a></li>
<li><a>Camas</a></li>
<li><a>Clarkston</a></li>
<li><a>Cheney</a></li>
<li><a>Newport</a></li>
</ul>
</div>
</div>
The problem, on page load the div is set to display:none and not set with css visible. The arrow doesn't react as it should. I like the arrow to point down when the div is not expanded (hidden) and to point up if the div is expanded (visible).
Using visible:hidden didn't solve my problem as the div are using the space on the page.
How can i fix this?
You had used .find() incorrectly. Also JQuery library was not included in the JSFiddle, so I included that!.
Note: Initially the arrow should be fa-angle-up instead of fa-angle-down.
Before:
$(this).find($('.fa')).removeClass('fa-angle-down').addClass('fa-angle-up');
After:
$(this).find('.fa').removeClass('fa-angle-down').addClass('fa-angle-up');
JSFiddle Demo
$(document).ready(function() {
$('.expandableCollapsibleDiv').click(function() {
var showElementDescription = $(this).find('ul');
// var showElementDescription = $(this).parents('.expandableCollapsibleDiv').find('ul');
if ($(showElementDescription).is(':visible')) {
showElementDescription.hide("fast", "swing");
$(this).find($('.fa')).removeClass('fa-angle-down').addClass('fa-angle-up');
} else {
showElementDescription.show("fast", "swing");
$(this).find($('.fa')).removeClass('fa-angle-up').addClass('fa-angle-down');
}
});
});
.expandableCollapsibleDiv i {
cursor: pointer;
margin-right: 10px;
margin-top: 5px;
padding-left: 10px;
float: right;
}
.expandableCollapsibleDiv ul {
border-bottom: 1px solid white;
clear: both;
list-style: outside none none;
margin: 0;
padding-bottom: 10px;
display: none;
/* visibility: hidden;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="mainDiv">
<div class="expandableCollapsibleDiv">
<i class="fa fa-2x fa-angle-down"></i>
<h3><a>NEW YORK</a></h3>
<ul>
<li><a>Albany</a></li>
<li><a>Buffalo</a></li>
<li><a>Kingston</a></li>
<li><a>Tonawanda</a></li>
<li><a>Sherrill</a></li>
<li><a>Sherrill</a></li>
<li><a>Oneida</a></li>
</ul>
</div>
<div class="expandableCollapsibleDiv">
<i class="fa fa-2x fa-angle-down"></i>
<h3><a>CALIFORNIA</a></h3>
<ul>
<li><a>Alameda</a></li>
<li><a>Bell</a></li>
<li><a>Banning</a></li>
<li><a>Campbell</a></li>
<li><a>Fresno</a></li>
<li><a>Galt</a></li>
<li><a>Jackson</a></li>
</ul>
</div>
<div class="expandableCollapsibleDiv">
<i class="fa fa-2x fa-angle-down"></i>
<h3><a>WASHINGTON</a></h3>
<ul>
<li><a>Asotin</a></li>
<li><a>Bellingham</a></li>
<li><a>Bothell</a></li>
<li><a>Camas</a></li>
<li><a>Clarkston</a></li>
<li><a>Cheney</a></li>
<li><a>Newport</a></li>
</ul>
</div>
</div>
I am coding a side menu with Bootstrap and I am already on quite a good stage. The submenus are opening.
My problem: If I click on one submenu it shows the sub links but when opening a second one it doesn't open that links. So I searched for a solution and found this one: Stackoverflow Answer. I adjusted the code and the javascript file to the changes. Now when opening the menu on my localhost installation, it lags a bit when opening or closing but it is closing all others which are opened. So I thought of asking if anyone here has a better solution or an idea why it lags that much. The code is very long so I will just post a JSfiddle: klick here.
From jQuery doc:
.slideToggle(): default duration 400 milliseconds
.toggle(): default duration 400 milliseconds
Those are your issues. In any case you can always use boostrap collapse methods.
//
// for each collapseable element, except the first, collapse (hide)
//
$('#side-menu ul.collapseable:visible:not(:first)').collapse('hide');
//
// clicking on the collapse anchor:
// get the css selector for the collapsible element
// collapse to hide all except the current one
// collapse to show the current one
//
$('#side-menu a[data-toggle="collapse"]').on('click', function (e) {
var ulId = this.getAttribute('href');
$('#side-menu ul.collapseable').not(ulId).collapse('hide');
$(ulId).collapse('show');
});
html, body {
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #eaeaea;
color: #5e6062;
height: 100%;
}
/*-------------*/
/*Sidebar Menue*/
/*-------------*/
#side-menu {
background-color: #323232;
padding: 0px;
}
#side-menu h1 {
color: #fff;
text-align: center;
margin: 10px 0px;
font-size: 25px;
}
#side-menu ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#side-menu a {
padding: 12px 20px;
text-decoration: none;
color: #fff;
font-weight: bold;
font-size: 13px;
display: block;
}
#side-menu a:hover {
background-color: #474747;
display: block;
color: #fff;
}
#side-menu .active a {
color: #fff;
background-color: #474747;
}
#side-menu .settings-btn {
background-color: #778b1c;
}
#side-menu .settings-btn a {
color: #fff;
}
#side-menu .settings-btn a:hover {
background-color: #778b1c;
}
#side-menu .collapseable li {
padding: 2px 0px 2px 12px;
}
#side-menu .collapseable a {
color: #fff;
font-size: 12px;
padding: 0px 10px 0px 5px;
text-decoration: none;
display: block
}
#side-menu .collapseable a:hover {
color: #fff;
}
/*ALTIS Side-Menü linker Rand*/
#side-menu .collapseable-ALTIS {
border-left: 4px solid #ffb700;
}
#side-menu .collapseable-ALTIS .active {
background-color: #474747;
}
#side-menu .collapseable-ALTIS .link:hover {
background-color: #474747;
}
/*---------------------------*/
/*TANOA Side-Menü linker Rand*/
#side-menu .collapseable-TANOA {
border-left: 4px solid #00aa1a;
}
#side-menu .collapseable-TANOA .active {
background-color: #474747;
}
#side-menu .collapseable-TANOA .link:hover {
background-color: #474747;
}
/*---------------------------*/
/*--------------------*/
/*Main Content Bereich*/
/*--------------------*/
.display-table {
display: table;
padding: 0px;
height: 100%;
width: 100%;
}
.display-table-row {
display: table-row;
height: 100%;
}
.display-table-cell {
display: table-cell;
float: none;
height: 100%;
}
/*----------------*/
/*Top Menue Leiste*/
/*----------------*/
#nav-header {
background-color: #fff;
border-bottom: 1px solid #e7eaec;
}
#nav-header ul {
margin: 0px;
padding: 0px;
list-style: none;
color: #676a6c;
}
#nav-header ul li {
float: left;
margin-left: 15px;
padding: 17px 0px;
}
#nav-header ul a {
text-decoration: none;
}
#nav-header .logout {
color: #676a6c;
}
#nav-header .logout:hover {
color: #676a6c;
}
#nav-header #welcome {
margin-right: 20px;
}
/*-----------------------*/
/*Mobile Menu Toggle Icon*/
/*-----------------------*/
.navbar-default .navbar-toggle {
border-color: #778b1c;
background-color: #778b1c;
}
.navbar-default .navbar-toggle:hover {
background-color: #778b1c;
}
.navbar-default .navbar-toggle:focus {
background-color: #778b1c;
}
.navbar-default .icon-bar {
border: 1px white solid;
}
/*------*/
/*Inhalt*/
/*------*/
#content header {
border-bottom: 1px #f3f3f4 solid;
padding: 10px 0px;
}
#content {
margin: 20px 0px 50px 0px;
background-color: #fff;
border-top: 4px #778b1c solid;
}
.content-ALTIS {
border-top: 4px #ffb700 solid !important;
}
.page_title {
font-size: 14px;
font-weight: bold;
margin: 0px 20px;
}
.content-inner {
padding: 20px;
}
.content-inner a {
text-decoration: underline;
color: #2b5f8b;
}
.valign-top {
vertical-align: top;
}
.valign-center {
vertical-align: middle;
}
.horizontal-middle {
margin: 0px auto;
display: block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<main class="container-fluid display-table">
<!-- Menu -->
<div class="col-lg-2 c display-table-cell valign-top" id="side-menu">
<!-- Logo -->
<ul>
<!-- Startseite -->
<li class="link active">
<a href="#">
<i class="fa fa-fw fa-home" aria-hidden="true"></i>
Text 1
</a>
</li>
<!-- ALTIS Dropdown Menu -->
<li class="link">
<a href="#collapse-ALTIS" data-toggle="collapse" aria-controls="collapse-ALTIS" id="ALTIS"
href="#collapse-ALTIS" aria-expanded="true">
Text 2
</a>
<ul class="collapseable collapseable-ALTIS collapse in" id="collapse-ALTIS" aria-expanded="true">
<li class="link">
<a href="#">
<i class="fa fa-fw fa-users hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-sign-in hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-exclamation-triangle hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-bar-chart hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
</ul>
</li>
<!-- TANOA Dropdown Menu -->
<li class="link">
<a href="#collapse-TANOA" data-toggle="collapse" aria-controls="collapse-TANOA" id="TANOA">
Text 3
</a>
<ul class="collapse collapseable collapseable-TANOA" id="collapse-TANOA">
<li class="link">
<a href="#">
<i class="fa fa-fw fa-users hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-sign-in hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-exclamation-triangle hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-bar-chart hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
</ul>
</li>
<!-- KOTH Dropdown Menu -->
<li class="link">
<a href="#collapse-KOTH" data-toggle="collapse" aria-controls="collapse-KOTH" id="KOTH">
Text 4
</a>
<ul class="collapse collapseable collapseable-KOTH" id="collapse-KOTH">
<li class="link">
<a href="#">
<i class="fa fa-fw fa-users hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-sign-in hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-exclamation-triangle hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-bar-chart hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
</ul>
</li>
<!-- TOOLS Dropdown Menu -->
<li class="link">
<a href="#collapse-TOOLS" data-toggle="collapse" aria-controls="collapse-TOOLS" ID="TOOLS">
Text 5
</a>
<ul class="collapse collapseable collapseable-TOOLS" id="collapse-TOOLS">
<li class="link">
<a href="#">
<i class="fa fa-fw fa-search hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-refresh hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
</ul>
</li>
<!-- FILTER Dropdown Menu -->
<li class="link">
<a href="#collapse-FILTER" data-toggle="collapse" aria-controls="collapse-FILTER" id="FILTER">
Text 6
</a>
<ul class="collapse collapseable collapseable-FILTER" id="collapse-FILTER">
<li class="link">
<a href="#">
<i class="fa fa-fw fa-globe hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-shield hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-eye hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-address-book hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-database hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
</ul>
</li>
<!-- Einstellungen -->
<li class="link settings-btn">
<a href="#">
<i class="fa fa-fw fa-cog hidden-xs" aria-hidden="true"></i>
Text 7
</a>
</li>
</ul>
</div>
<section class="col-md-10 col-sm-11 display-table-cell valign-top">
<!-- vertikales Menu -->
<aside class="row">
<header id="nav-header" class="clearfix">
<div class="col-md-7">
<nav class="navbar-default pull-left">
<button type="button" class="navbar-toggle collapsed" data-toggle="offcanvas"
data-target="#side-menu">
<span class="sr-only">Navigation aufklappen und zuklappen</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</nav>
</div>
<!-- Menu oben rechts -->
<div class="col-md-5">
<ul class="pull-right">
<li id="welcome" class="hidden-xs">Welcome</li>
<li>
<a href="#" class="logout">
<i class="fa fa-fw fa-sign-out hidden-xs" aria-hidden="true"></i> Logout
</a>
</li>
</ul>
</div>
</header>
</aside>
<!-- Seiteninhalt -->
<div id="content">
<header>
<h2 class="page_title">Title</h2>
</header>
<div class="content-inner">
Content
</div>
</div>
</section>
</main>
$(document).ready(function($) {
$('#accordion').find('.accordion-toggle').addClass('icon-rotate');
$('#accordion').find('.accordion-content.default').prev('h4').removeClass('icon-rotate');
$('#accordion').find('.accordion-toggle').click(function(e) {
$(this).next().slideToggle().addClass('expanded').prev('h4').removeClass('icon-rotate');
$(".accordion-content").not($(this).next()).slideUp().removeClass('expanded').prev('h4').addClass('icon-rotate');
});
});
/* Accordion - Left Panel */
/* line 4, ../sass/my-request.scss */
.filter-panel .accordion-header {
background: #506070;
color: #FFF;
font-size: 16px;
padding: 15px;
font-weight: 600;
}
/* line 11, ../sass/my-request.scss */
.filter-panel .accordion-toggle-first {
cursor: pointer;
margin: 0;
font-size: 14px;
color: #333;
background: #F6F6F6;
padding: 15px 20px;
font-weight: 600;
border: 1px solid #DEDEDE;
border-top: 0;
}
/* line 22, ../sass/my-request.scss */
.filter-panel .accordion-toggle {
cursor: pointer;
margin: 0;
font-size: 14px;
color: #333;
background: #F6F6F6;
padding: 11px 20px;
font-weight: 600;
border: 1px solid #DEDEDE;
border-top: 0;
}
/* line 33, ../sass/my-request.scss */
.filter-panel .accordion-content {
display: none;
font-weight: 600;
border: 1px solid #DEDEDE;
border-top: 0;
}
/* line 39, ../sass/my-request.scss */
.filter-panel .accordion-content ul li {
padding: 10px 30px;
}
/* line 42, ../sass/my-request.scss */
.filter-panel .accordion-content.default {
display: block;
}
/* line 45, ../sass/my-request.scss */
.icon-rotate span {
transform: rotate(90deg);
transition: .25s;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="accordion" class="filter-panel">
<div class="accordion-header">Refine by:</div>
<div class="accordion-toggle-first">All</div>
<h4 class="accordion-toggle">Active <span class="align-right fa fa-angle-down fa-lg" aria-hidden="true"></span></h4>
<div class="accordion-content default">
<ul>
<li>
<div class="align-left">Pending DSL (12)</div>
<div class="align-right"><span class="text-right"><input type="checkbox" value=""></span></div>
<div class="clear"></div>
</li>
<li>
<div class="align-left">Pending ECR (21)</div>
<div class="align-right"><span class="text-right"><input type="checkbox" value=""></span></div>
<div class="clear"></div>
</li>
<li>
<div class="align-left">Pending OSI (10)</div>
<div class="align-right"><span class="text-right"><input type="checkbox" value=""></span></div>
<div class="clear"></div>
</li>
<li>
<div class="align-left">Pending OWS (6)</div>
<div class="align-right"><span class="text-right"><input type="checkbox" value=""></span></div>
<div class="clear"></div>
</li>
<li>
<div class="align-left">Pending Requestor (10)</div>
<div class="align-right"><span class="text-right"><input type="checkbox" value=""></span></div>
<div class="clear"></div>
</li>
</ul>
</div>
<h4 class="accordion-toggle">Closed <span class="align-right fa fa-angle-down fa-lg" aria-hidden="true"></span></h4>
<div class="accordion-content">
<ul>
<li>Cancelled (21)</li>
<li>Rejected (14)</li>
<li>Completed (21)</li>
</ul>
</div>
<h4 class="accordion-toggle">Type <span class="align-right fa fa-angle-down fa-lg" aria-hidden="true"></span></h4>
<div class="accordion-content">
<ul>
<li>Alias (13)</li>
<li>Sites (15)</li>
<li>Domain (19)</li>
<li>Social Media (9)</li>
<li>Archive/Back-up (21)</li>
<li>Mobile App (6)</li>
</ul>
</div>
<h4 class="accordion-toggle">VPU <span class="align-right fa fa-angle-down fa-lg" aria-hidden="true"></span></h4>
<div class="accordion-content">
<ul>
<li>Africa (23)</li>
<li>East Asia Pacific (15)</li>
<li>South Asia (19)</li>
<li>Latin America (9)</li>
</ul>
</div>
<h4 class="accordion-toggle">Date <span class="align-right fa fa-angle-down fa-lg" aria-hidden="true"></span></h4>
<div class="accordion-content">
</div>
</div>
I am using the following script
http://uniondesign.ca/wp-content/uploads/2012/09/accordion-demo.html
and adding arrow icon if any accordion is open n changing based on accordion open n close but I am stuck once all the accordion is closed my icon is not rotating.
Also attached the screenshot for more details
Error Screenshot
I think you could use toggleClass in this situation. Here is what I changed to get the demo to work.
$(document).ready(function($) {
$('#accordion').find('.accordion-toggle').addClass('icon-rotate');
$('#accordion').find('.accordion-content.default').prev('h4').removeClass('icon-rotate');
$('#accordion').find('.accordion-toggle').click(function(e) {
$(this).toggleClass('icon-rotate').next().slideToggle().addClass('expanded');
$(".accordion-content").not($(this).next()).slideUp().removeClass('expanded').prev('h4').addClass('icon-rotate');
});
});
Fiddle
I took code for a dashboard we're building here; it's a free bootstrap dashboard template:
http://ironsummitmedia.github.io/startbootstrap-sb-admin-2/pages/index.html
We like it a lot as it's simple and displays the kind of layout we need. Here's what I've done to edit the above so far, to suit our needs:
http://tumolo.co.uk/smartcm/pages/index.html
If you resize your browser, so that you're reducing the width, with the original template, once it gets to (I assume) xs or sm size, the sidebar menu neatly hides and the 3line button in the top right displays. You can tell I'm new to bootstrap!
If you resize my version, once it gets to (I assume) xs or sm size, the sidbar menu displays instead of hides, like it should in original template.
IF it helps, I noticed that as I was editing from template to my version, when I started removing containers from original template, the menu stopped hiding when resizing browser window.
As we want to use this dashboard on mobile phones, it's important for me to understand how to make this menu hidden, as soon as you browse to it, from a mobile device... hope you can help, thanks.
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i> Overview
</li>
<li>
<i class="fa fa-external-link-square fa-fw"></i> Allocation
</li>
<li>
<i class="fa fa-table fa-fw"></i> Events & Stages
</li>
<li>
<i class="fa fa-comment fa-fw"></i>Correspondence Log
</li>
<li>
<i class="fa fa-folder-open fa-fw"></i>Resources
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
You are missing <div class="collapse navbar-collapse" ></div>which surrounds the ul class.
Refer to the docs here > Bootstrap Navbar
/*!
* Start Bootstrap - SB Admin 2 Bootstrap Admin Theme (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
body {
background-color: #f8f8f8;
}
#wrapper {
width: 100%;
}
#page-wrapper {
padding: 0 15px;
min-height: 568px;
background-color: #fff;
}
#media(min-width:768px) {
#page-wrapper {
position: inherit;
margin: 0 0 0 250px;
padding: 0 30px;
border-left: 1px solid #e7e7e7;
background-color: #fff;
}
}
.navbar-static-top {
margin-right: 0;
background-color: #fff;
}
.navbar-top-links {
margin-right: 0;
background-color: #fff;
}
.navbar-top-links li {
display: inline-block;
}
.navbar-top-links li:last-child {
margin-right: 15px;
}
.navbar-top-links li a {
padding: 15px;
min-height: 50px;
}
.navbar-top-links .dropdown-menu li {
display: block;
}
.navbar-top-links .dropdown-menu li:last-child {
margin-right: 0;
}
.navbar-top-links .dropdown-menu li a {
padding: 3px 20px;
min-height: 0;
}
.navbar-top-links .dropdown-menu li a div {
white-space: normal;
}
.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
width: 310px;
min-width: 0;
}
.navbar-top-links .dropdown-messages {
margin-left: 5px;
}
.navbar-top-links .dropdown-tasks {
margin-left: -59px;
}
.navbar-top-links .dropdown-alerts {
margin-left: -123px;
}
.navbar-top-links .dropdown-user {
right: 0;
left: auto;
}
.sidebar .sidebar-nav.navbar-collapse {
padding-right: 0;
padding-left: 0;
}
.sidebar .sidebar-search {
padding: 15px;
}
.sidebar ul li {
border-bottom: 1px solid #e7e7e7;
}
.sidebar ul li a.active {
background-color: #eee;
}
.sidebar .arrow {
float: right;
}
.sidebar .fa.arrow:before {
content: "\f104";
}
.sidebar .active>a>.fa.arrow:before {
content: "\f107";
}
.sidebar .nav-second-level li,
.sidebar .nav-third-level li {
border-bottom: 0!important;
}
.sidebar .nav-second-level li a {
padding-left: 37px;
}
.sidebar .nav-third-level li a {
padding-left: 52px;
}
#media(min-width:768px) {
.sidebar {
z-index: 1;
position: absolute;
width: 250px;
margin-top: 51px;
}
.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
margin-left: auto;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<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>
<a class="navbar-brand" href="index.html">
<img class="img-responsive" src="img/loginlogo.png">
</a>
</div>
<!-- /.navbar-header -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-top-links navbar-right">
<!-- /.dropdown -->
<li class="dropdown pull-right">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><i class="fa fa-user fa-fw"></i> User Profile
</li>
<li><i class="fa fa-gear fa-fw"></i> Settings
</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i> Logout
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search..."> <span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li> <i class="fa fa-dashboard fa-fw"></i> Overview
</li>
<li> <i class="fa fa-external-link-square fa-fw"></i> Allocation
</li>
<li> <i class="fa fa-table fa-fw"></i> Events & Stages
</li>
<li> <i class="fa fa-comment fa-fw"></i>Correspondence Log
</li>
<li> <i class="fa fa-folder-open fa-fw"></i>Resources
</li>
</ul>
</div>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
</div>