My problem is creating a method that (on clicking a element) collapse all other elements within the nestled list that are not the target element or associated parent containers. I have looked around but nothing works for my list.
Basically I'm trying to collapse all active list elements except the target one.
Using bootstrap to handle a lot of things.
I have a method that makes a list element active on click.
The alert seems to output the ids of elements that need to be affected, and nothing collapses. Suggestions?
List Structure:
- Building
- Floor
- Room
Code:
//JS - Attempt to collapse all elements not clicked:
$('.expandable-menu a').click(function(e) {
var parent = $("#" + e.target.id).attr('data-parent');
$(".expandable-menu a").each(function() {
//if 1. has class active 2.Not target event, 3.Not a parent of target
if ($(this).hasClass('active') && $(this).attr('id') !== (e.target.id) && $(this).attr('id') !== (parent)) {
// alert($(this).attr('id') );
$(this).removeClass('active').addClass('collapsed');
}
});
});
<!--HTML - Example chunk from list:-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<ul>
<li id="level1">
<a id="title-b0" href="#" data-toggle="collapse" data-parent="#title-loc" data-target="#content-b0" class="collapsed" aria-expanded="false">
<span class="glyphicon glyphicon-triangle-right"></span>
Biology
</a>
<ul id="content-b0" class="nav collapse" style="height: 0px;" aria-expanded="false">
<li id="level2">
<a id="title-b0f0" class="" href="#" data-toggle="collapse" data-parent="title-b0" data-target="#content-f0" aria-expanded="true">
<span class="glyphicon glyphicon-triangle-bottom"></span>
Floor 4
</a>
<ul id="content-f0" class="nav collapse in" style="" aria-expanded="true"></ul>
<a id="title-b0f1" class="" href="#" data-toggle="collapse" data-parent="title-b0" data-target="#content-f1" aria-expanded="true">
<span class="glyphicon glyphicon-triangle-bottom"></span>
Floor 3
</a>
<ul id="content-f1" class="nav collapse in" style="" aria-expanded="true">
<li>
<a id="room-select" href="#">
<span class="glyphicon glyphicon-unchecked"></span>
Room 112
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
This example may help you out
$(document).ready(function() {
$('.tree li').each(function() {
if ($(this).children('ul').length > 0) {
$(this).addClass('parent');
}
});
$('.tree li.parent > a').click(function() {
$(this).parent().toggleClass('active');
$(this).parent().children('ul').slideToggle('fast');
});
$('#all').click(function() {
$('.tree li').each(function() {
$(this).toggleClass('active');
$(this).children('ul').slideToggle('fast');
});
});
$('.tree li').each(function() {
$(this).toggleClass('active');
$(this).children('ul').slideToggle('fast');
});
});
a{
cursor:pointer;
}
.tree ul {
list-style: none outside none;
}
.tree li a {
line-height: 25px;
}
.tree > ul > li > a {
color: #3B4C56;
display: block;
font-weight: normal;
position: relative;
text-decoration: none;
}
.tree li.parent > a {
padding: 0 0 0 28px;
}
.tree li.parent > a:before {
background-position: 25px center;
content: "-";
display: block;
height: 21px;
left: 0;
position: absolute;
top: 2px;
vertical-align: middle;
width: 23px;
}
.tree ul li.active > a:before {
background-position: 0 center;
}
.tree ul li ul {
border-left: 1px solid #D9DADB;
display: none;
margin: 0 0 0 12px;
overflow: hidden;
padding: 0 0 0 25px;
}
.tree ul li ul li {
position: relative;
}
.tree ul li ul li:before {
border-bottom: 1px dashed #E2E2E3;
left: -20px;
position: absolute;
top: 12px;
width: 15px;
}
#wrapper {
margin: 0 auto;
width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="wrapper">
<div class="tree">
<button id="all">Toggle All</button>
<ul>
<li><a>First Level</a>
<ul>
<li><a>Second Level</a></li>
<li><a>Second Level</a></li>
<li><a>Second Level</a></li>
</ul>
</li>
<li><a>First Level</a>
<ul>
<li><a>Second Level</a>
<ul>
<li><a>Third Level</a></li>
<li><a>Third Level</a></li>
<li><a>Third Level</a>
<ul>
<li><a>Fourth Level</a></li>
<li><a>Fourth Level</a></li>
<li><a>Fourth Level</a>
<ul>
<li><a>Fifth Level</a></li>
<li><a>Fifth Level</a></li>
<li><a>Fifth Level</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a>Second Level</a></li>
</ul>
</li>
<li><a>First Level</a>
<ul>
<li><a>Second Level</a></li>
<li><a>Second Level</a></li>
</ul>
</li>
</ul>
</div>
</div>
Related
Im trying to change the source of an individual image on a div click. The problem is that I have many divs that have the same image, and images with the same id. Therefore, when I click the first, it changes, but when I click on the second, the first one changes.
I'm not yet very good at jquery, but I can imagine a "This" would help? Or do I need to give a different id to each img?
To see the problem heres a jsfiddle > https://jsfiddle.net/gfmyukaL/
I want each img to change individually based on its host div.
<script language="javascript">
function changeImage() {
if (document.getElementById("folder").src == "http://somethingsomething.online/folder.png")
{
document.getElementById("folder").src = "http://somethingsomething.online/folderopen.png";
}
else
{
document.getElementById("folder").src = "http://somethingsomething.online/folder.png";
}
}
</script>
<img style="position:absolute; bottom:2vh; width:100vw;" src="images/constuction_bar.gif" alt="under construction">
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" onclick="changeImage()" tabindex="-1" href="#"><div class="menu"><img id="folder" src="folder.png"> Parent Directory</div></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" onclick="changeImage()" tabindex="-1" href="#"><div class="menu"><img id="folder" src="folder.png"> Parent Directory</div></a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" onclick="changeImage()" tabindex="-1" href="#"><div class="menu"><img id="folder" src="folder.png"> Parent Directory</div></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" onclick="changeImage()" tabindex="-1" href="#"><div class="menu"><img id="folder" src="folder.png"> Parent Directory</div></a>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
<style>
.dropdown-submenu {
position: relative;
}
.menu:hover{
background-color:yellow;
}
*{
font-family:monospace;
}
.test{
border: red;
border-color: aquamarine;
border-width: 6px;
/* background-color: blue; */
border-style: dotted;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
li{
margin-left:5vw;
}
.dropdown-menu {
display:contents;
margin-left: 2vw;
}
.container{
margin:0px;
width:40vw;
padding:0px;
}
#folder{
filter: drop-shadow(1px 1px 1px red) drop-shadow(-1px -1px 1px green);
}
</style>
I have changed your code a bit, now check this. I have basically have all your folder close by CSS, you can open these if you want by CSS, tell me if you need it, modify CSS as per your need, The idea is to change the URL of image only, nothing else.
var closedFolder = "http://somethingsomething.online/folder.png"
var openFolder = "http://somethingsomething.online/folderopen.png"
$('.test').click(function(){
var nextMenu = $(this).next('.dropdown-menu');
nextMenu.toggle();
if($(nextMenu).is(':visible')){
$(this).find('img').attr('src', openFolder);
}else {
$(this).find('img').attr('src', closedFolder);
}
});
$(document).ready(function() {
var closedFolder = "http://somethingsomething.online/folder.png"
var openFolder = "http://somethingsomething.online/folderopen.png"
$('.test').click(function(){
var nextMenu = $(this).next('.dropdown-menu');
nextMenu.toggle();
if($(nextMenu).is(':visible')){
$(this).find('img').attr('src', openFolder);
}else {
$(this).find('img').attr('src', closedFolder);
}
});
});
.dropdown-submenu {
position: relative;
}
.menu:hover {
background-color: yellow;
}
* {
font-family: monospace;
}
.test {
border: red;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
li {
margin-left: 5vw;
}
.dropdown-menu {
display: contents;
margin-left: 2vw;
}
.container {
margin: 0px;
width: 40vw;
padding: 0px;
}
#folder {
filter: drop-shadow(1px 1px 1px red) drop-shadow(-1px -1px 1px green);
}
.dropdown-menu {
display: none;
}
#mainMenu > .dropdown-submenu, #mainMenu {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="dropdown">
<ul class="dropdown-menu" id="mainMenu">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">
<div class="menu"><img src="http://somethingsomething.online/folder.png"> Parent Directory</div>
</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">
<div class="menu"><img src="http://somethingsomething.online/folder.png"> Parent Directory</div>
</a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">
<div class="menu"><img src="http://somethingsomething.online/folder.png"> Parent Directory</div>
</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">
<div class="menu"><img src="http://somethingsomething.online/folder.png"> Parent Directory</div>
</a>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
. I hope this would help you.
I did the "expand/collapse all" function, everything is working well, except the arrow. It doesn't pointing to the correct direction. I'm not sure how to do that, so I leave it empty on my code. My issue is shown below.
(Red box represents the click action)
Click "View all", can see the expanders are opened. The arrows pointing down.
Click "A" to collapse the expander, and the arrow pointing up.
Click "Collapse all", the expanders are collpased. Now you can see my problem, "A" arrow is pointing up and the rest are pointing down.
Hoping that some of you could provide me with some advice. Thanks!
$(".aq_epdtitle").click(function() {
$('.aq_expandct').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".aq_epdtitle1").click(function() {
$('.aq_expandct1').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".aq_epdtitle2").click(function() {
$('.aq_expandct2').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".expandall").click(function() {
$('.aq_expandct').slideDown().toggleClass('active');
$('.aq_expandct1').slideDown().toggleClass('active');
$('.aq_expandct2').slideDown().toggleClass('active');
});
$(".collapseall").click(function() {
$('.aq_expandct').slideUp().removeClass('active');
$('.aq_expandct1').slideUp().removeClass('active');
$('.aq_expandct2').slideUp().removeClass('active');
});
ul { list-style-type: none; margin:0; padding: 0; }
.eservices_left ul li{display:inline;}
.aq_expandct, .aq_expandct1, .aq_expandct2 {
display: none;
padding : 5px;
}
.aq_epdtitle, .aq_epdtitle1, .aq_epdtitle2{
background:#ccc url('https://image.ibb.co/jUyN5Q/arrow_up_grey.png') no-repeat;
background-position:right 0px;
cursor:pointer;
padding: 0 10px;
margin: 10px 0;
}
.collapsed .aq_epdtitle, .collapsed .aq_epdtitle1, .collapsed .aq_epdtitle2{
background-image:url('https://image.ibb.co/d669kQ/arrow_down_grey.png');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="expandall">View all</div>
<div class="collapseall">Collapse all</div>
<ul>
<li class="mobexpand collapsed">
<div class="aq_epdtitle">A</div>
<ul class="aq_expandct">
<li>A1</li>
<li>A2</li>
</ul>
</li>
<li class="mobexpand collapsed">
<div class="aq_epdtitle1">B</div>
<ul class="aq_expandct1">
<li>B1</li>
<li>B2</li>
</ul>
</li>
<li class="mobexpand collapsed noborder">
<div class="aq_epdtitle2">C</div>
<ul class="aq_expandct2">
<li>C1</li>
<li>C2</li>
</ul>
</li>
</ul>
Just add $('.mobexpand').addClass('collapsed'); ($(".expandall").click) in show all function
and $('.mobexpand').removeClass('collapsed'); ($(".collapseall").click) and in collsapse all function as bellow
$(".aq_epdtitle").click(function() {
$('.aq_expandct').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".aq_epdtitle1").click(function() {
$('.aq_expandct1').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".aq_epdtitle2").click(function() {
$('.aq_expandct2').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".expandall").click(function() {
$('.aq_expandct').slideDown().toggleClass('active');
$('.aq_expandct1').slideDown().toggleClass('active');
$('.aq_expandct2').slideDown().toggleClass('active');
$('.mobexpand').removeClass('collapsed');
});
$(".collapseall").click(function() {
$('.aq_expandct').slideUp().removeClass('active');
$('.aq_expandct1').slideUp().removeClass('active');
$('.aq_expandct2').slideUp().removeClass('active');
$('.mobexpand').addClass('collapsed');
});
ul { list-style-type: none; margin:0; padding: 0; }
.eservices_left ul li{display:inline;}
.aq_expandct, .aq_expandct1, .aq_expandct2 {
display: none;
padding : 5px;
}
.aq_epdtitle, .aq_epdtitle1, .aq_epdtitle2{
background:#ccc url('https://image.ibb.co/jUyN5Q/arrow_up_grey.png') no-repeat;
background-position:right 0px;
cursor:pointer;
padding: 0 10px;
margin: 10px 0;
}
.collapsed .aq_epdtitle, .collapsed .aq_epdtitle1, .collapsed .aq_epdtitle2{
background-image:url('https://image.ibb.co/d669kQ/arrow_down_grey.png');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="expandall">View all</div>
<div class="collapseall">Collapse all</div>
<ul>
<li class="mobexpand collapsed">
<div class="aq_epdtitle">A</div>
<ul class="aq_expandct">
<li>A1</li>
<li>A2</li>
</ul>
</li>
<li class="mobexpand collapsed">
<div class="aq_epdtitle1">B</div>
<ul class="aq_expandct1">
<li>B1</li>
<li>B2</li>
</ul>
</li>
<li class="mobexpand collapsed noborder">
<div class="aq_epdtitle2">C</div>
<ul class="aq_expandct2">
<li>C1</li>
<li>C2</li>
</ul>
</li>
</ul>
I have two divs. When I click on 3 dots , then the div is appearing and on clicking the same 3 dots , same div is disappearing. But I want to hide the div, even if I click anywhere in the document.
There are two circles. When I click on one circle, then a div is shown and when I click on another circle, then the opened div is closing and related div is opening but when I click anywhere on the document, then none of the div are closing.
$("#discussion_declined , #discussion_pending").click(function() {
var relatedDiv = $(this).closest('.panel').find('.discussion_edit_div');
relatedDiv.toggle("fast");
$('.discussion_edit_div').not(relatedDiv).hide('fast');
});
.discussion_small_round_div {
width: 25px;
height: 25px;
border-radius: 50%;
position: relative;
background: #2d3446;
bottom: 9px;
left: 15px;
float: right;
}
.discussion_small_round_div:after {
content: '\2807';
font-size: 1.5em;
color: white;
position: absolute;
left: 9px;
top: 1px;
}
.discussion_edit_div {
background: #FFFFFF;
display: none;
position: absolute;
right: 35px;
border: thin #ced0d1 solid;
z-index: 1001;
width: 150px;
box-shadow: 0px 3px 3px #ccc;
}
ul li {
padding: 5px 15px;
list-style-type: none;
color: #838383;
}
ul li:hover {
background: #eeeded;
cursor: pointer;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="panel discussion_panel_div no_background no_box_shadow" style="position: relative;">
<div class="panel-heading no_border_radius bg-dark set_padding_0">
<div class="discussion_small_round_div pull-right cursor_pointer" id="discussion_declined"></div>
</div>
<div class="discussion_edit_div">
<ul>
<li> <span class="glyphicon glyphicon-trash"></span> Replicate</li>
<li><span class="glyphicon glyphicon-trash"></span> Delete</li>
<li><span class="glyphicon glyphicon-ban-circle"></span> Deactivate</li>
</ul>
</div>
</div>
<div class="panel discussion_panel_div no_background no_box_shadow" style="position: relative;">
<div class="panel-heading no_border_radius bg-dark set_padding_0">
<div class="discussion_small_round_div pull-right cursor_pointer" id="discussion_pending"></div>
</div>
<div class="discussion_edit_div">
<ul>
<li> <span class="glyphicon glyphicon-trash"></span> Replicate</li>
<li><span class="glyphicon glyphicon-trash"></span> Delete</li>
<li><span class="glyphicon glyphicon-ban-circle"></span> Deactivate</li>
</ul>
</div>
</div>
Praveen's answer is nice but you can also achieve the same without tweaking your HTML.
Just add this to your jQuery:
$(window).click(function() {
//Hide the menus if visible
$('.discussion_edit_div').hide('fast');
});
$("#discussion_declined , #discussion_pending").click(function(e) {
e.stopPropagation();
var relatedDiv = $(this).closest('.panel').find('.discussion_edit_div');
relatedDiv.toggle("fast");
$('.discussion_edit_div').not(relatedDiv).hide('fast');
});
And your are good to go.
This achieves one more thing which is that once you have opened one ul, then you can directly toggle to another ul by clicking once. In Praveen's answer you have to click twice in order to open the other ul.
Check the link:https://jsfiddle.net/zfqqqr1c/1/
How Bootstrap handles this is interesting. They have a mask, and the only thing you can click is the mask or the items in the menu.
$(function () {
$(".mask").hide();
$("nav > ul > li > a").click(function () {
$(this).closest("li").addClass("open");
$(".mask").show();
return false;
});
$(".mask").click(function () {
$(this).hide();
$(".open").removeClass("open");
});
});
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; line-height: 1; box-sizing: border-box;}
body {background-color: #f5f5f5;}
a {text-decoration: none; color: inherit;}
.mask {position: fixed; top: 0; bottom: 0; right: 0; left: 0; z-index: 8;}
nav > ul > li {display: inline-block; position: relative; width: 30%;}
nav > ul > li a {display: block; padding: 5px; border: 1px solid #ccc;}
nav > ul ul {position: absolute; left: 0; right: 0; z-index: 9; display: none;}
nav > ul > li.open > ul {display: block;}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div class="mask"></div>
<nav>
<ul>
<li>
Main Item 1
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
</ul>
</li>
<li>
Main Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
</ul>
</li>
<li>
Main Item 3
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
</ul>
</li>
</ul>
</nav>
When removing one element out of 3 from the panel of a tile, the 2 elements left are not fully aligned to the right - theres 1 space left.
Before:
before
<ul class="nav navbar-right panel_toolbox">
<li class="dropdown"><i class="fa fa-wrench"></i>
<ul class="dropdown-menu" role="menu">
<li>Settings 1</li>
<li>Settings 2</li>
</ul>
</li>
<li><a class="collapse-link"><i class="fa fa-chevron-up"> </i></a></li>
<li><a class="close-link"><i class="fa fa-close"></i></a></li>
</ul>
After:
after
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"> </i></a></li>
<li><a class="close-link"><i class="fa fa-close"></i></a></li>
</ul>
The CSS for panel_toolbox looks like that:
.panel_toolbox {
float: right;
min-width: 70px; }
.panel_toolbox > li {
float: left;
cursor: pointer; }
.panel_toolbox > li > a {
padding: 5px;
color: #C5C7CB;
font-size: 14px; }
.panel_toolbox > li > a:hover {
background: #F5F7FA; }
and the CSS for navbar-right:
.navbar-right {
margin-right: 0; }
Can it be fixed?
Rod, In the CSS, instead of:
.panel_toolbox > li {
float: left;
cursor: pointer; }
It should be:
.panel_toolbox > li {
float: right;
cursor: pointer; }
Why don't you add a "pull-right" class on each element?
<ul class"nav navbar-right panel_toolbox">
<li class="collapse-link pull-right"></li>
<li class="close-link pull-right"></li>
</ul>
It should helps you
Making an accordion menu its lost its slide down/up function what am I doing wrong?
Can someone check this code
Jquery
$(document).ready(function() {
$('.nav-pills ul li').on('click touchstart', function(e) {
e.preventDefault();
var checkElement = $(this).next();
$('.nav-pills li').removeClass('open');
$(this).closest('li').addClass('open');
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('open');
checkElement.slideUp(300);
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('nav-pills ul ul:visible').slideUp(300);
checkElement.slideDown(300);
}
if($(this).closest('li').find('ul').children().length == 0){
return true;
}
else {
return false;
}
});
});
HTML
<div class="nav-container">
<div class="nav nav-pills nav-stacked">
<ul class="nav nav-pills nav-stacked">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Is Landscape Architecture Right For Me?</a>
<ul class="dropdown-menu">
<li>What Is Landscape Architecture?</li>
<li>I Want to Be a Landscape Architect (Video)
<li>What Skills Do I Need?</li>
<li>Future Career Prospects (U.S. Labor Department)</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">What Does A Landscape Architects Do?</a>
<ul class="dropdown-menu">
<li>Interviews with Leading Landscape Architects</li>
<li>ASLA Professional Awards</li>
<li>ASLA Student Awards</li>
<li>Buy the Book: <em>Becoming A Landscape Architect</em></li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Why Is Their Work So Important?</a>
<ul class="dropdown-menu">
<li>Designing Our Future: Sustainable Landscapes</li>
<li>ASLA Animations</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Where Can I Study?</a>
<ul class="dropdown-menu">
<li>Picking A School</li>
<li>DesignIntelligence Rankings (2013)</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">How Do I Learn More?</a>
<ul class="dropdown-menu">
<li>Graduating Student Surveys</li>
<li>ACE Mentor Program</li>
<li>Find An ASLA Student Chapter</li>
<li>Learn New Software Programs</li>
<li>Local Parks / Conservation Programs</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Personal Stories</a>
<ul class="dropdown-menu">
<li>The Path</li>
<li>Obstacles</li>
<li>Aids</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">About Columbus Circle</a>
<ul class="dropdown-menu">
<li>Learn More About Columbus Circle</li>
<li>Before Photo</li>
</ul>
</ul>
</div>
</div>
</div>
CSS
.nav-pills > li > a {
border-radius: 0px;
line-height: 1.5;
}
.nav-container {
max-width: 26%;
width: 280px;
top: 90px;
left: 45px;
padding: 0;
background-color: #000000;
position: fixed;
z-index: 3;
cursor: pointer;
}
.nav .open>a,
.nav .open>a:hover,
.nav .open>a:focus {
background-color: #f26527;
color: #ffffff;
}
.dropdown > a {
color: #ffffff;
}
.dropdown-menu {
border-radius: 0px;
padding: 0px;
position: relative;
width: 345px;
z-index: 4;
}
.dropdown-menu > li > a {
line-height: 1.3;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #ffffff;
background-color: #f26527;
}
.dropdown-menu li {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica", "Ariel", "sans- serif";
font-weight: 300;
background: #ffffff;
line-height: 1.5;
}
The menu works like and accordion but again has lost its sliding function it just drops down
Thanks
I've encountered this too, and if you tried all the possible solutions here, the answer is that lists cant animate, that if youre trying to animate the list.
Best way is to wrap the lists in a div.