I have created an accordion it works fine, the only thing which I would like is to close an already open accordion if another accordion is clicked on. Currently, the accordion open and close separately but if another is open I want the current one to collapse
HTML CODE
<ul class="accordion">
<li>Home</li>
<li>
Products
<div class="slide">
<ul>
<li>Product 1</li>
</ul>
</div>
</li>
<li>
Сlients
<div class="slide">
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
</ul>
</div>
</li>
<li>
About
<div class="slide">
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
</ul>
</div>
</li>
<li>Contact</li>
</ul>
CSS CODE
.accordion,
.accordion li .slide ul{
margin:0;
padding:0;
list-style:none;
overflow:hidden;
}
.accordion li{
overflow:hidden;
}
.accordion li .slide{
overflow:hidden;
height:0;
}
.accordion li.open .slide{
height:70px;
}
.accordion li .slide ul{
padding:0 0 0 20px;
}
JQUERY CODE
$(document).ready(function(e) {
$('.head').on('click', function(){
//checking if the parent has a class open assigned to it
if($(this).closest('li').hasClass('open')){
///TO CLOSE THE SLIDE//
$(this).closest('li').find('.slide').animate({'height':0}, 500);
$(this).closest('li').removeClass('open');
}
else{
///TO OPEN THE SLIDE////
//for dynamic height we ind the ul inside the sliding div and target its height
var autoHeight = $(this).closest('li').find('.slide ul').height();
//finding the closest slide in the DOM Tree, so that only that slide will open not all of them
$(this).closest('li').find('.slide').animate({'height':autoHeight}, 500);
//finding the closest parent of the clicked item so that only that parent will have the class assigned to it
$(this).closest('li').addClass('open');
}
});
});
I have added comments in the jquery code to make it easy to understand
Try this : You can animate and set height of all slide to 0 except the clicked one. see below code
$(document).ready(function(e) {
$('.head').on('click', function(){
//variable to store clicked slide
var $slide;
var $parentLi = $(this).closest('li');
//checking if the parent has a class open assigned to it
if($parentLi.hasClass('open')){
///TO CLOSE THE SLIDE//
$slide = $parentLi.find('.slide');
$slide.animate({'height':0}, 500);
$parentLi.removeClass('open');
}
else{
///TO OPEN THE SLIDE////
//for dynamic height we ind the ul inside the sliding div and target its height
var autoHeight = $parentLi.find('.slide ul').height();
//finding the closest slide in the DOM Tree, so that only that slide will open not all of them
$slide = $parentLi.find('.slide');
$slide.animate({'height':autoHeight}, 500);
//finding the closest parent of the clicked item so that only that parent will have the class assigned to it
$parentLi.addClass('open');
}
//close all slides except the clicked one
$('.slide').not($slide).animate({'height':0}, 500);
$('.head').closest('li').not($parentLi).removeClass('open');
});
});
JSFiddle Demo
Before this comment:
///TO OPEN THE SLIDE////
Just add this code:
$("li.open .head").trigger("click");
Then the .open li will close.
Along with Guedes fix, you can even use jquery slideUp and slideDown to avoid getting height dynamically and remove some css code too to make code more simpler.
JS
$(document).ready(function(e) {
$('.head').on('click', function(){
//checking if the parent has a class open assigned to it
if($(this).closest('li').hasClass('open')){
///TO CLOSE THE SLIDE//
$(this).closest('li').find('.slide').slideUp();
$(this).closest('li').removeClass('open');
}
else{
$(this).closest('ul').find("li.open .head").trigger("click");
///TO OPEN THE SLIDE////
//finding the closest slide in the DOM Tree, so that only that slide will open not all of them
$(this).closest('li').find('.slide').slideDown();
//finding the closest parent of the clicked item so that only that parent will have the class assigned to it
$(this).closest('li').addClass('open');
}
});
});
CSS
.accordion,
.accordion li .slide ul{
margin:0;
padding:0;
list-style:none;
overflow:hidden;
}
.accordion li{
overflow:hidden;
}
.accordion li .slide{
display: none;
}
.accordion li .slide ul{
padding:0 0 0 20px;
}
Related
I want to find a general rule that will help me navigate in menus, using tab. I know how to catch the tab event but there are several problems:
There are drop-down menus that i can't accese only be pressing tab key.
The structure of the drop-down menus is not standard. i.e. the hidden ul elements may be inside other elements (e.g div) or may be nested drop-down menus inside other drop-down menus
The events that make the hidden menus to be visible/invisible vary. Click and hover events are the most popular.
Can someone help me?
You can use the tabindex attribute on the list item that triggers the showing of your dropdown. This wil make the parent li focusable by pressing tab. You can then, with some CSS and Javascript, apply rules to children to make them visible.
About the fiddle:
Note that I use the opacity and pointer-events properties in CSS to switch states of the dropdown. When an element has visibility: hidden or display: none applied, it will not be focusable at all. Since the tab key by default brings focus to the next focusable element, your target element should not have either of those properties set to the shown values at the point the tab key is being pressed.
Also, you'll have to accurately keep track of the tabindexes throughout your navigation. First is the first main anchor, then the enclosing list-item, to make the dropdown visible. Then come the anchors inside that. (this is the point where JS has to take over from CSS) This brings us at tabindex 5 when the 3 subItems inside are assigned a tabindex, so we'll continue counting from 6 for the next main item's direct <a> child, and so forth.
You'll have to figure out the way to make your multi-level dropdowns work as expected yourself, but this is a starting point. You could additionally check in your script for arrow key presses, and give another element focus in response.
Fiddle:
$(function() {
$('nav').on('focus', '.dropdown a', function() {
$(this).closest('.mainItem').addClass('focus');
}).on('blur', '.dropdown a', function() {
$(this).closest('.mainItem').removeClass('focus');
});
});
nav > ul {
display: flex;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav .mainItem {
position: relative;
margin: 0 5px;
padding: 0.5rem;
background-color: #eee;
}
nav .dropdown {
position: absolute;
width: 100%;
left: 0;
top: 100%;
opacity: 0;
pointer-events: none;
}
nav .mainItem:hover .dropdown,
nav .mainItem:focus .dropdown,
nav .mainItem.focus .dropdown,
nav .mainItem > a:hover .dropdown,
nav .mainItem > a:focus .dropdown
nav .mainItem.focus .dropdown {
opacity: 1;
pointer-events: all;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li class="mainItem" tabindex="2">Parent 1
<ul class="dropdown">
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
</ul>
</li>
<li class="mainItem" tabindex="7">Parent 2
<ul class="dropdown">
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
</ul>
</li>
</ul>
</nav>
I am relatively new to jquery and I am seeking help. The aim is to click on a list item attached to a ul and have it appear whilst any other list items disappear. Only the active one is viewable
The Issue I am having is that when I click on another list item the active one disappears (as intended), but it doesn't reveal the other one, it remains hidden. I am looking for a way to reveal the list, while hiding the ones that are in-active.
I have uploaded my problem: http://jsfiddle.net/CbU4d/
html:
<div id="secondary-nav"><!--secondary-nav-->
<ul>
<li>Current Article
<ul>
<li>Example 1</li>
</ul>
</li>
<li class="active">Past Articles
<ul>
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
</ul>
</li>
</ul>
</div><!--/secondary-nav-->
css:
#secondary-nav {
float:left;
height:auto;
width:23%; /*210px*/
border-right:2px solid #000;
position:relative;
}
/*heading styles*/
#secondary-nav ul li {
padding: 0 10px;
list-style-type: none;
}
#secondary-nav ul li a {
font-family:TrajanPro;
font-size:1em;
line-height: 32px;
color:#000;
}
/*links*/
#secondary-nav ul ul li a {
display: block;
font-family:TrajanPro;
font-size:0.9em;
line-height: 27px;
text-decoration: none;
color:#000;
transition: all 0.15s;
}
#secondary-nav ul li a:hover {
display:block;
color:#af2931;
text-decoration:underline;
}
#secondary-nav ul ul {
display: none;
}
#secondary-nav li.active ul {
display: block;
}
/css
jquery using 1.7.1
$(document).ready(function(){
$("#secondary-nav ul").click(function(){
//slide up all the link lists
$("#secondary-nav ul ul").slideUp();
//slide down the link list below the h3 clicked - only if its closed
if(!$(this).next().is(":visible"))
{
$(this).next().slideDown();
}
})
})
Try with
$("#secondary-nav ul ul").slideToggle();
Demo
I got it to work (I think) by making two changes:
Change the selector on line 2 to this:
"#secondary-nav ul li"
This means the event will be attached to the list item you click, not the entire list.
Remove the if statement on line 6. Since we're hiding all of the second level uls in the previous line, we don't need to check if it's visible; we know it isn't.
Change line 6 to this:
$(this).children('ul').slideDown();
This is because the ul you want to unfold is a child of the li you're clicking, not a sibling.
Here's my fixed jsFiddle.
Edit: If you want to stop it from hiding and re-showing when you click the one that's already expanded, just chuck this at the top of the handler:
if ($(this).children('ul').is(':visible')){
return
}
I want to make a menu (with submenu and div containing link for every submenu on hover).
Something like this:
AAAA | BBBB
| bbb1
| bbb2 HERE IS MOUSE (bbb2 LINK)
| bbb3
It is possible to keep listing submenus when you try to open link? If you move mouse from "bbb2" link disappear.
what I have now:
http://i.imgur.com/vhFtaQc.png
and what I want:
http://i.imgur.com/BOQNMat.png
Here is JSFiddle: http://jsfiddle.net/zu8Eu/
Hope you understand. Thanks!
As is noted you may need to nested the <div> inside the li elements. But additional to keep the hover() you can use padding to set the white space:
HTML
<li id="submenu1">
aaaa1
<div class="one">
Link for aaa1
</div>
</li>
CSS
.one {
display: none;
position: absolute;
top: 0px;
left:100%;
}
The demo http://jsfiddle.net/zu8Eu/27/
I'm sure the are jQuery plugins that will provide you with what you want to achieve, but I'd say restructure you HTML and nest the elements properly.
<ul>
<li>Menu 1
<ul>
<li>
Submenu 1
<ul>
<li>
Subsub menu
</li>
</ul>
</li>
</ul>
</li>
</ul>
This way, you can use CSS to achieve what you want:
ul li ul{
display: none;
}
ul li:hover > ul{
display: block;
}
ul li ul li:hover > ul{
display: block;
}
Once you hover on the first li, it will show the direct child ul, if you hover on that ul, it will still count as a hover on the first li, meaning it'll still be visible.
Fiddle: http://jsfiddle.net/x54gZ/
I have a menu with four options which I need to sit below an image like so:
----------------------------------------------------------------
| This is an image |
----------------------------------------------------------------
Menu 1 Menu 2 Menu 3 Menu4
These size is responsive, so I'm positioning the menu items dynamically. My problem is how to calculate the menu widths so that the spacing is equal as well as Menu1 and Menu4 meeting the edge of the image.
Will you ever have any more than 4 menu items at a given time? If not you can easily just wrap the links within an unorded and assign the <li> widths to 25% each. See the below example:
HTML
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
CSS
ul {
list-style: none;
margin: 0;
overflow: hidden;
}
li {
float: left;
width: 25%;
}
If you have a fixed number of items, you can work out the percentage each one needs to be (like #Chris has shown).
If the amount of menu items can vary, you can use jQuery to determine the widths:
var imgWidth = $(".img").width();
var itemWidth = imgWidth / $("ul.menu li").length;
$("ul.menu li").width(itemWidth);
Here I'm getting the image's width, then dividing the width by the number of li elements, then applying this value as the width for each li element.
See Demo: http://jsfiddle.net/rwvhG/
In terms of the alignment, this can be done with CSS:
ul li
{
float:left;
text-align:center;
}
ul li:first-child
{
text-align:left;
}
ul li:last-child
{
text-align:right;
}
See Demo: http://jsfiddle.net/rwvhG/1/
You can do it entirely in CSS
Check this demo: http://jsfiddle.net/Gv7fZ/
HTML:
<div class="outer">
<img src="<put-image-url-here>">
<div class="menu">
<div class="menuitem">Menu 1</div>
<div class="menuitem">Menu 2</div>
<div class="menuitem">Menu 3</div>
<div class="menuitem">Menu 4</div>
</div>
</div>
CSS:
.outer {
margin: auto;
display: table-cell;
}
.menuitem {
float: left;
text-align: center;
width: 33%;
}
.menuitem:first-child {
text-align: left;
width: 16%;
}
.menuitem:last-child {
float: right;
text-align: right;
width: 16%;
}
Although you can use css to set 25% width this will not work so well if the menu items text width is very different. If you want it to be really exact then try the following:
HTML
<ul class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
JavaScript
$(document).ready( function( ) {
var widths = 0;
var items = $(".menu > li");
var menu_width = items.eq(0).parent().width();
// total width of all existing li
items.each( function( ) {
widths += $(this).width( );
});
var gap = parseInt( ( menu_width - widths ) / ( items.length - 1 ) );
// set widths of list items except for last one. Last li gets pushed to edge
items.slice( 0, -1 ).each( function( ) {
$(this).width( $(this).width() + gap );
});
});
Fiddle here
However, if the width of your menu items is pretty much the same you will probably be better off using CSS.
If your layout is responsive then set your menu items to be 25% width each and then set the last child to be text-align:right so that it lines up with the right margin.
#Menu ul li {text-align:left;display:inline-block;width:25%}
#Menu ul li:last-child {text-align:right}
I am looking for a click based single select list. Instead of the normal drop down list, I want an overlay menu (similar to how we see on facebook when we change privacy settings, the single select list that appears). Is that CSS based or any code examples to creating a similar list? All the lists i found of the net are hover lists not same as we see on f/b.
Thanks.
Something like this:
It is just a menu that pops up where use can pick an option.
If you were using jQuery it would be something like this plug-in
http://plugins.jquery.com/project/selectbox
I can't find a non JS-solution (and for JS I'm using jQuery to assign focus to an arbitrary element that would keep the sub-menu open (on the plus side, I'm pretty darn sure that Facebook will be using JavaScript, of some sort, to achieve their implementation too).
However, I've put together a couple of examples, these are, much like Facebook, simply dropdown lists, with a JavaScript handler to assign focus to the clicked element (to keep the sub-menu open regardless of mouse position on the page, until the user clicks elsewhere).
With that in mind, I've used the standard css dropdown-style mark-up:
<ul>
<li>Symbol
<ul>
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
</ul>
</li>
<li>Symbol
<ul>
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
</ul>
</li>
<li>Symbol
<ul>
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
</ul>
</li>
</ul>
With the css:
ul {
list-style-type: none;
padding: 0;
margin: 0 auto;
}
ul li {
display: inline-block;
position: relative;
width: 100px;
border-bottom: 1px solid #ccc;
}
ul li ul {
display: none;
width: 100%;
position: absolute;
top: 1em;
left: 0;
}
ul li a:hover + ul,
ul li a:active + ul,
ul li a:focus + ul {
display: block;
}
ul li ul li {
border: 0 none transparent;
}
And the jQuery:
$(document).ready(
function() {
$('li a').click(
function(){
$(this).focus();
});
}
);
Demo at JS Bin
Notice that I've used a elements, since focus is more easily assigned to anchors than plain, in this case, li elements. However a second version, with the same end result is achieved with the following jQuery:
$(document).ready(
function() {
$('li').click(
function(){
$('li').not(this).removeAttr('tabindex');
$(this).attr('tabindex','-1').focus();
});
}
);
Demo at JS Bin.
Addenda
Stu Nicholls, of CSS Play seems to have achieved a pure-css solution for this (with a gallery), but I haven't worked my way through his CSS to see how he did it.