Develop Reference

Opening an accordion and collapsing an existing one

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

How to know when ul too small for li

I am trying to make a responsive template like bootstrap, and i am trying to find a way to know if the ul is getting too small for the li elements.
I have a ul like this:
<ul>
<li>Element one</li>
<li>Element two</li>
<li>Element three</li>
<li>Element four</li>
</ul>
As you can see in the picture below, the ul(red line) is taking the whole page width:
And i want to do something if the ul's width equals that of the li elements.
Sorry, if this post is not the most easy to understand one.

You can pre-calculate the minimal width (the width that the li elements require in order not to break), and simply set the min-width to the ul:
ul {
min-width: 800px;
}
If you want to do something more when it reaches that size, you can use JavaScript to set a window resize listener in which you'd check the width of your ul element, and take appropriate measures based on its width.
See this simple example:
var ul = document.getElementById('d');
var lis = ul.getElementsByTagName('li')
var requiredWidth = 0;
var padding = 100;
for(var i = 0; i < lis.length; i++){
requiredWidth += lis[i].offsetWidth;
}
// make the ul red if it's not as wide as the width of lis plus the padding
function handleSize() {
if (ul.offsetWidth < requiredWidth + padding) {
ul.style.background = 'red';
} else {
ul.style.background = "";
}
};
window.onresize = handleSize;
handleSize();
#d {background: #eee}
#d li {
border: 1px solid;
display: inline-block;
min-width: 200px;
height: 50px;
background: green
}
<ul id="d">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<p>Go "Full Page" and then try shrinking the window size to below ~908 pixels</p>

ul is a block element that takes full width if no style is given. But if you want to limit the ul width's to it's li elements, you can simply make the ul element an inline element using display property.
<ul class="navigation">
<li>Element one</li>
<li>Element two</li>
<li>Element three</li>
<li>Element four</li>
</ul>
// Style
.navigation{
display: inline;
}

Jquery - dropdown menu on click

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
}

javascript css positioning

Hi all...
i have a problem with my fixed header.
when i zoom in or resize the browser, some menu in my header losts/hidden i don't know where..
so this is my code :
<div id="header">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</div>
css :
body{
min-height:1000px;
}
#header{
position: fixed;
margin:30px;
}
#header ul{
display:block;
}
#header ul li{
float:left;
list-style-type:none;
width:110px;
text-align:center;
line-height:30px;
padding-bottom:3px;
background: #ccc;
}
demo : http://jsfiddle.net/YgvND/1/
I need javascript program to controls css position. My purpose when at zoom in, zoom out or resize the browser so css header position will change into "ABSOLUTE".
sorry on my language. x)
Anyone can help me....
thx..

i recommend you to use jquery. a good approach to check for resulution changes is described in here

I'm not totally sure I'm understanding your question, but I'll give it a go. It seems to me like you want to position the #header div as absolute when the page is resized. So, use jQuery to look for window resize.
This might be overkill in your situation. This will bind whatever css changes to the #header div as soon as the page is done being resized.
$(window).resize(function() {
if (this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 500);
});
$(window).bind('resizeEnd', function() {
var header = $("#header");
header.css({
position: "absolute",
top: "0px",
left: "0px"
});
});
Here's a demo.

CSS single select list example

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.