After our tutorial last month showing how to create a vertical accordion menu using jQuery we have had a couple of requests asking how to make a horizontal accordion.
So we have decided to provide the following post, which shows very easily how to use the power of jQuery to create a rather nice horizontal accordion effect.
1. The HTML
First we create an unordered HTML list with id=”accordion” and include some content in each of the li tags – since the accordion is horizontal we have decided to use images to create the section labels:
<ul id="accordion">
<li>
<img src="images/section_1.png" />
<strong>Section 1 Header</strong><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
</li>
<li>
<img src="images/section_2.png" />
<strong>Section 2 Header</strong><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
</li>
<li>
<img src="images/section_3.png" />
<strong>Section 3 Header</strong><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
</li>
<li>
<img src="images/section_4.png" />
<strong>Section 4 Header</strong><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
</li>
</ul>
2. Style The Accordion
Next we add a few CSS rules, which will help style the accordion and its content:
#accordion {
list-style: none;
margin: 30px 0;
padding: 0;
height: 200px;
overflow: hidden;
background: #7d8d96;}
#accordion li {
float: left;
border-left:
display: block;
height: 170px;
width: 50px;
padding: 15px 0;
overflow: hidden;
color: #fff;
text-decoration: none;
font-size: 16px;
line-height: 1.5em;
border-left: 1px solid #fff;}
#accordion li img {
border: none;
border-right: 1px solid #fff;
float: left;
margin: -15px 15px 0 0;
}
#accordion li.active {
width: 450px;
}
The main items to take note of here are the widths of the li elements, which need to be the same as the min-width setting in our jQuery below and the width of the “active” tag, which should equal the max-width of the accordion section.
The “#accordion li.active” is also required to ensure that the default section is open when the page loads.
The rest is mainly styling of the background, text and positioning of the section header images.
3. The jQuery Code
Finally the jQuery to create the horizontal accordion effect – in this example we have used the “hover” event to trigger the animation:
$(document).ready(function(){
activeItem = $("#accordion li:first");
$(activeItem).addClass('active');
$("#accordion li").hover(function(){
$(activeItem).animate({width: "50px"}, {duration:300, queue:false});
$(this).animate({width: "450px"}, {duration:300, queue:false});
activeItem = this;
});
});
You can change which is the default open section upon page load by changing the “activeItem” variable – in our example we have used “#accordion li:first” to select the first list item.
Other options that can be changed include the min-width (in this case 50px) and the max-width, which we have set to 445px – the values in these lines must match the values given in the CSS rules above.
The duration setting controls the time in milliseconds for the accordion to animate from minimum to maximum width – again these can be set according to your preference.
The queue:false is required to stop the accordion capturing every hover event and continuing to animate after the mouse has left the hover area.
This is not displaying correctly for me. Do I need a jquery file other than the code that goes in the head? The color and text are visible, but I don’t have the image and it is not working with the mouseover effect. I hope I can get it working because I love the way it looks!
Hi
Make sure that you also include the jQuery library before you add the jquery code. Apart from that the code in the tutorial is all that is required to create the demo horizontal accordion
I’m having an issue with the sliders first active item. I want it to automatically display information on page load, but it keeps making me hover over it first before it will show the first active item… is there a way around this?
Hi,
Make sure that you have the first 2 lines of jQuery:
activeItem = $("#h-accordion li:first"); $(activeItem).addClass('active');and the CSS rule:
#h-accordion li.active {
width: 450px;
}
If the above code is included then the accordion should automatically open the first panel on page load
hmm, that didnt work… maybe you can take a look at what I’m working with.
http://www.icodeinpink.com/valleyvision
Hi,
You need to change the selector to match your accordion.
Change:
activeItem = $("#h-accordion li:last");To:
activeItem = $("#accordion li:last");I guess I might just keep playing with it. I had it that way to begin with and just switched it back with no luck. It does its job at showing the item first, but its what surrounded by the tag that is not showing until it is clicked on (was hover, but just switched it up).
Thanks though!
Hi,
The current code is actually correct as the last li tag is the one showing by default. Didnt see it earlier but you need to change it to the following to get the first tag:
activeItem = $("#accordion li:first");OK … finally understand what you mean sorry … its late here!!!
Apologies you actually want the last one showing but the content doesnt – correct?
You need to set the active CSS to the same width as your animation:
#accordion li.active {
width: 810px;
}
by the li tag
Nice slider. Is there any way to have images on the panes instead of just text? I am working with similar code, and the img tag used in the css gets the panel/section labels confused with the pane images, and the whole thing acts strange.
Hi,
The accordion contents can be anything. If you want to identify the section labels separately you can either give them a class name and use this in the CSS or apply the labels as background images to the panels
I have mine built as described, but when I hover over the tabs and they slide, one of the tabs slides out of the slider (ie it disappears and never returns.) Has anyone had this happen to them? Why could it be occurring? Thanks for any insight you can provide…see the css/html below.
Here’s the css I’m using
#accordion {
list-style: none;
margin: 8px 0px 0px 8px;
padding: 0;
height: 334px;
width: 750px;
overflow: hidden;
background:#fff;}
#accordion li {
float: left;
border-left:
display: block;
height: 350px;
width: 43px;
padding: 0;
overflow: hidden;
color: #fff;
text-decoration: none;
font-size: 16px;
line-height: 1.5em;
border-left: 1px solid #fff;}
#accordion li img {
border: none;
border-right: 1px solid #fff;
float: left;
margin: 0px 0 0;
}
#accordion li.active {
width: 43px;
}
and the html
Section 1 Header
Job 1
Job 2
Job 3
Section 2 Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
Section 3 Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
Section 3 Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
Section 3 Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
Section 3 Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
Section 3 Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
Section 3 Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
Hi,
Its caused by having a fixed height combined with the overflow: hidden. I suggest trying to remove the overflow rule
Thanks for the quick response. Unfortunately, removing the overflow: hidden didn’t do the trick. What it did was just move the tab that was disappearing below the accordion (weird, huh?). I’m thinking that if I can control the width of the active tabs, then I might be able to create enough space so that the tab won’t be shoved so far that it disappears. How can I control the width of the section that is active (ie showing)?
Sorry I didnt read properly which post the comment referred to and thought it was the vertical accordion. Ignore my last reply!
This problem occurs if the widths of the horizontal accordion items are not set correctly.
In your CSS you need to set the width of the active item to be the full width of the horizontal accordion minus the total widths of the inactive items. So based on your example of total width 750px and 8 sections at 44px wide, the active section should be set to 442px.
#accordion li.active { width: 442px; }The jquery settings would then be:
$(activeItem).animate({width: "43px"}, {duration:300, queue:false}); $(this).animate({width: "442px"}, {duration:300, queue:false});Nevermind, I figured it out…I can change that by altering the number in the animate({width: “335px”}. See below…
Thanks!
$(“#accordion li”).hover(function(){
$(activeItem).animate({width: “50px”}, {duration:300, queue:false});
$(this).animate({width: “335px”}, {duration:300, queue:false});
activeItem = this;
});
The animate settings though should be the same as the CSS widths for active and inactive items
if two horizontal Accordion be on web page it dosen’t work correctly ……..
please check this and help me to solve this problem …..
make sure each accordion uses its own ID
hi, which jquery I need to put in mail html ?
thk’s
Hi,
Dont understand the question sorry.
Thank you very much for this. I was searching forever for a freakin’ simple horizontal accordian, and kept finding bloated garbage. This was exactly what I was looking for.
No problem. Thats why I decided to make my own in the first place since I didnt need one that slides, plays music and makes coffee while u wait like most of them!
Whoops, sorry
<li> <img src="sitegfx/tab_webdesign.png" width="50" height="300" class="tab" alt="Web Design" title="Web Design" border="0" /> <div class="thumbnail"><a href="http://x.com"><img src="x.jpg" width="50" height="50" border="1" ></a></div> </li>An example:
wrap the code sample with
so it will show. Thanks
Thanks for the quick reply! Unfortunately that’s still not working. When I enter a link in my first slider, the rest of the tabs disappear and the first slider goes blank. Here is my code with your mod:
$(document).ready(function () {
activeItem = $(“#accordion li:first”);
$(activeItem).addClass(‘active’);
$(“#accordion > li”).hover(function(){
$(activeItem).animate({width: “50px”}, {duration:500, queue:false});
$(this).animate({width: “594px”}, {duration:500, queue:false});
activeItem = this;
});
});
Hi – what does the HTML look like?
I love this accordion, it looks like it will do what I need it to do. I need the ability to add a set of links inside each window. Every time I do that now, all my content just disappears. Am I doing something “duh?”
Hi DC – the selector used in the demo would also include any other links that may be inside the accordion sections. You can change it so that it targets the accordion links only and it should then be OK. Change the code to the following:
$("#accordion > li").hover(function(){ $(activeItem).animate({width: "50px"}, {duration:300, queue:false}); $(this).animate({width: "450px"}, {duration:300, queue:false}); activeItem = this; });Thanks Lee,
I am really happy now with this accordion into my website. i was trying for it from long time. finally got it with simple explaination. i dont know how can i say you thanks.
Regards
Hi Lee,
I am sure, I want to use it for header but in your tutorial you not explain where exactly jquery code goes to. So please explain it to me.
The jQuery goes before the closing head tag. If you look at the source code for the horizontal accordion demo you will see where each part of the code should go – http://www.designchemical.com/lab/jquery/demo/jquery_simple_horizontal_accordion.htm
I am trying it for my website but i dont know where to put that code which you given for html, jquery and css. I am using wordpress. I am trying to put accordion into my website header. Please guide me in details.
Hi Ashwin – if you arent sure where the code needs to go and since you are using WordPress I would suggest maybe using a horizontal accordion plugin for WordPress
Hi,
Great script!
How can you have the slides collapsing automatically after a while or randomly without having a mouse over?
Hi,
I can look at adding some kind of delay to the auto-close
Hiya,
Thanks for the tutorial. But how do you collapse all slides?
Hi,
To start the accordion collapsed you can add padding-left: 400px to the accordion item and then change the jQuery to the following:
activeItem = $("#accordion li:first"); $("#accordion li").hover(function(){ $("#accordion").animate({"padding-left": "0"}, {duration:300, queue:false}); $(activeItem).animate({width: "50px"}, {duration:300, queue:false}); $(this).animate({width: "450px"}, {duration:300, queue:false}); activeItem = this; });See demo
thanx buddy it works thanx alot for ur help and quick replies
ok thanx i’m sending u my code
$(document).ready(function(){ activeItem = $("#accordion li: eq(1)"); $(activeItem).addClass('active'); $("#accordion li").hover(function(){ $(activeItem).animate({width: "38px"}, {duration:300, queue:false}); $(this).animate({width: "385px"}, {duration:300, queue:false}); activeItem = this; }); });hi,
Remove the space between the a: and the eq(1) so it becomes:
activeItem = $(“#accordion li:eq(1)”);
Thanx for quick reply but wasn’t available thats why can’t check ur answer. You got it right i want to do the same thing which you shown into demo. I’ve tried the way you wrote here in the example but it is not working with me, do i need to change anything else other than jQuery parameter ???
No, only the selector for the initial position. if you post your code will take a look
Hi, Kindly can you tell me how to active the second portion by jQuery bcoz when i m trying second instead of first it is not working properly. waiting for your reply and thanx in advance.
Hi,
If you mean having the 2nd section open when the page loads then you can use the :eq() selector.
Change:
activeItem = $(“#accordion li:first”);
To:
activeItem = $(“#accordion li:eq(1)”);
Since the index of items starts at zero then you need to use eq(1) to select the 2nd item.
See Demo
Thanks! Very easy to follow tutorial!
Gregg
[...] Here is the original post: A Simple Horizontal Accordion Tutorial Using jQuery « Design … [...]