Tuesday, October 23, 2007

I need one menu with horizontal accordion, but the plugins that I have looked doesn't like me, too much requirements or code, really I need something more simple, so in few minutes I write a simple plugin.

v0.1

It is very simple, with a few parameters: speed set the velocity of the animation, headerclass set another classname for header divs (by default "header"), contentclass set another classname for content divs (by default "content"), contentwidth is the final with of each content panel.

HTHML Sample:



.haccordion .header, .haccordion .content{
float: left;
height: 250px;
}

.haccordion .header{
width: 20px;
background: #ccc;
color: #fff;
cursor: pointer;
}

.haccordion .content{
display: none;
width: 0px;
overflow: auto;
}

.haccordion .content p{
margin: 5px;
}


*1

This is a sample of content for Content1 with a large text, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing


*2

This is a sample of content for Content2 with a large text, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing


*3

This is a sample of content for Content3 with a large text, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing




JavaScript Sample code:

  $(function(){
$(".haccordion").haccordion();
});

Demo:

Technorati Tags: , ,

Download jquery.haccordion.js code.

Labels: , ,

51 comments, Post a CommentPosted by posted by SeViR @ 12:44 PM
51 Comments
Oct 23, 2007 4:39:00 PM, Anonymous funbytebitstop said:
This is sooo cool! I just picked up jQuery a week ago and I'm looking at all of the sweet things that are capable. You rock! Great post.  
Nov 5, 2007 7:24:00 PM, Anonymous felix said:
wow really nice! Is there a way to have one content div opened by default?  
Nov 8, 2007 9:55:00 PM, Anonymous Anonymous said:
Great script! Is there anyway to use your script for vertical accordions? Keep up the good work  
Nov 9, 2007 11:07:00 AM, Blogger SeViR said:
@felix:
simply modify the code, I made an alternative version, I set with the class "visible" for an opened div.
this.opened = jQ("."+params.contentclass,this).filter(".visible").prev();

@anonymous:
for vertical accordions you have an accodion plugin for jQuery  
Nov 13, 2007 6:31:00 PM, Anonymous Alex said:
That's script I looking for!
Nice job! Just wrote little more documentattion and please update code where to insert code to start with opened (class "visible")  
Nov 17, 2007 11:26:00 AM, Anonymous Anders said:
Sweet, just what i was looking for, and easy to customize to my needs!

Thanks!  
Nov 21, 2007 5:06:00 PM, Blogger conica said:
Great code. Thank you. I was looking for this for some time now.
I would also need a bit more help where to insert the code to start with one div open at page load.

Thanks  
Nov 21, 2007 9:57:00 PM, Blogger SeViR said:
A real implementation of haccordion with one visible div by default:

REAL EXAMPLE

the changes of the code of the plugin are the minimal that I wrote in another comment. You can check here:

HERE

The visible content is marked with div class = "content visible" <- the photo.  
Nov 22, 2007 2:42:00 PM, Anonymous marco said:
Thank you sevir, nice script. I needed the ability to close an open element though, so I modified it this way:

if (p.opened!=this) {
p.opened = this;
jQ(this).next("div."+params.contentclass).animate({
width: params.contentwidth + "px"
}, params.speed);
} else {
p.opened = "undefined";
}
 
Dec 6, 2007 5:56:00 PM, Blogger Sherman said:
Thanks for the nice menu.

Is there a way for the "contentwidth" to be variable?

contentwidth: 500

The reason is that each content area is different width.  
Jan 9, 2008 10:24:00 PM, Anonymous Mike said:
Sorry about being dense, but I also would like to open one content div by default.

I added ".visible" to one "content" class item
and
this.opened = jQ("."+params.contentclass,this).filter(".visible").prev();
right after "return this.each(function(){"

But it doesn't open by default.

Any tips?

Thanks!  
Jan 9, 2008 11:56:00 PM, Blogger SeViR said:
@sherman:
you can set some alternative attribute for each content width and change a bit the code:

div contentwidth="200px" ....

in the code, the line:
width: params.contentwidth + "px"
is changed by:
width: jQ(this).attr("contentwidth")

@mike:
You can use this code modified  
Jan 11, 2008 10:34:00 PM, Anonymous praxi said:
the open content div by default doesn't work . do you have a idea?

Thanks!  
Jan 11, 2008 11:08:00 PM, Blogger SeViR said:
@praxy:

Please, I don't know any problem of this plugin, but if you simply say me that not work I can't know more about that, please use Firebug for debugging (maybe your code is wrong) or send me any online example of your code ;-)  
Jan 12, 2008 9:26:00 AM, Anonymous praxi said:
Maybe is my mystake!
You can look this code simple accordion - Work

Open div opened by default - doesn't Work

Thank's  
Jan 12, 2008 10:05:00 PM, Blogger SeViR said:
@praxi:

wops!! you are right :-P I forgot to say that in the opened real example I changed same things for usability improvement. The headers contents now a direct link to each page, because I needed get support for no js actived browsers.

Also you need to add, a little css code for visible content, unabling the display:none of the content class.

This is your example modified correctly :-)  
Jan 29, 2008 1:44:00 PM, Blogger JaL said:
Hi ! I'm using your script. It so cool. Thanks ! But I still have a question : How could I link to a tab ?
Sorry for my bad English :P  
Feb 6, 2008 12:26:00 AM, Anonymous mike said:
Very nice. I have a development page here: http://www.wiredprojects.com/LBRE/home1.html. I'd like to be able to open a given panel when the user clicks on a specific link in the header bar. Right now the header menu is just a graphic, but will be replaced with links.

My JS and jQuery skills are weak so far. Is there a simple way to tell a specific panel to open on click of a link in the header menu?

Many Thanks,

Mike  
Feb 21, 2008 12:45:00 AM, Anonymous Jason V. said:
This script is very helpful! After spending days trying to implement another script, this one took me less then a few hours to get everything working the way I want.

I have question though, is there any way to have the 'visible' div perform the scroll action on load. This way users will realize that the content is interactive?  
Mar 8, 2008 2:26:00 PM, Anonymous Temirlan said:
cool, thanks
i have a question,
is it possible to place content class in a header class? if no how can i do that?
i am new to js and jquery...  
Mar 8, 2008 5:32:00 PM, Blogger AKP said:
Very cool, but although I can get your basic example to work, when I try to have one div opened by default (using the code you've linked to here in the comments) it simply doesn't do anything! It seems to break the whole thing, clicking on headers does nothing.

Also, when I try and put flash in the content divs, you can see it slide across the screen - any way around this?

Thanks!  
Mar 16, 2008 5:54:00 PM, Blogger MP3WizarD said:
That's cool script!

But I use your last script example (show one content when open page) in this site http://www.zeddigitalthailand.com/diorsnow/
and change something (remove link in class header for work)

I want to change event "click" to on mouseover, when on mouseover my content is display. please help me to edit your script

Thank you so much.  
May 5, 2008 1:46:00 PM, Blogger Dips said:
To change event 'click' to on 'mouseover'

modify the haccordion.js as follows:

look for:
jQ("."+params.headerclass,this).click(function(){

change:
.click(function()
to
.mouseover(function()

That's it.  
May 5, 2008 3:37:00 PM, Anonymous Jordao said:
This script is very cool.

Is there a way to block the active content so if the user clicks on it, it won't close and open again?

Sorry for my English  
May 8, 2008 1:40:00 AM, OpenID ETChevalier said:
I've tried inserting an iframe into one of the content fields but it ends up making all of the other tabs after that one disappear. Any ideas how to fix this? I'll admit that I'm still quite new to using jquery but I imagine there must be a way to make this work.  
Jun 20, 2008 2:19:00 AM, Anonymous Anonymous said:
I just wanted to know if it was possible to open a section and highlight that header section in some way to denote that it is the one you are on, with either a new color or an alternate image or something. Love the script, you have done what adobelabs seems unable to do for whatever reason.  
Jul 3, 2008 7:00:00 PM, Anonymous monica said:
help please! I am getting a "jQuery is not defined" error.

jquery.haccordion.js
Line 3  
Jul 3, 2008 7:21:00 PM, Anonymous Monica said:
Sorry ignore my last comment please. This works for me beautifully in IE but it's not in Firefox :( Firebug shows an error of $(".test") is null

main.js
Line 2

I am sorry I am a newbie at this.  
Jul 11, 2008 9:29:00 AM, Anonymous Sirius said:
Hola,

Lo primero: como he visto que eres español, te preguntaré en este idioma. Espero que no te importe. ;)

Tengo una duda muy simple: ¿hay alguna manera de hacer que el "header" de la pestaña abierta tenga un fondo diferente?

He intentado modificar el .js para incluir esta opción sin éxito, espero que puedas ayudarme.

Un saludo y muchas gracias.  
Jul 11, 2008 9:58:00 AM, Blogger SeViR said:
@sirius te contesto también en castellano ;).

Puedes hacer lo siguiente:
* después de la línea:
if (p.opened != "undefined"){
añade
$(p.opened).removeClass("active");

* después de la línea:
p.opened = this;
añade
$(this).addClass("active");

La clase active ahora será la clase CSS que tendrá otro aspecto para la pestaña activa ;)  
Jul 11, 2008 3:31:00 PM, Anonymous Sirius said:
Hola de nuevo,

Muchas gracias por contestar tan rápido, no me lo esperaba, jeje. :D

Acabo de hacer eso que me has dicho y me aplica la clase perfectamente, pero no me la elimina una vez que he cambiado de pestaña.

Si la incrusto en el HTML sí que la quita con éxito (es decir, vuelve al estado "off"), cosa que no pasa cuando es agregada a través de JS (con el "addClass").

Gracias de nuevo, de verdad. :D  
Jul 22, 2008 8:12:00 PM, Blogger erty said:
Hi,
in order to make one of the slides open initially one can make the modifications indicated by bold face:
jQuery.fn.extend({
haccordion: function(params){
var jQ = jQuery;
var params = jQ.extend({
speed: 500,
headerclass: "handle",
contentclass: "hicerik",
contentwidth: 370,
openone:0
},params);
return this.each(function(index){
jQ("."+params.headerclass,this).each(function(index){
if(index == params.openone){
var p = jQ(this).parent()[0];
p.opened = this;
jQ(this).next("div."+params.contentclass).animate({
width: params.contentwidth + "px"
}, params.speed);
}
})
.click(function(){
var p = jQ(this).parent()[0];
if (p.opened != "undefined"){
jQ(p.opened).next("div."+params.contentclass).animate({
width: "0px"
},params.speed);
}
p.opened = this;
jQ(this).next("div."+params.contentclass).animate({
width: params.contentwidth + "px"
}, params.speed);
});
});
}
});  
Aug 7, 2008 11:27:00 PM, Anonymous Josh Read said:
Great script, works perfectly. I am trying to get it to not "bounce" when you click on one of the accordion keys. Have you seen that or fixed it? I'm using Firefox 2.x on windows XP.
http://www.museumofglass.org/beta.php  
Aug 15, 2008 12:14:00 AM, Anonymous Anonymous said:
Hey, good job on that! I wanted to use yours but was missing the ability to rotate text by 90 degrees. I then wrote one myself here.  
Aug 18, 2008 12:26:00 PM, Anonymous Guillaume said:
Hey, your little app is perfect, thanks for that neat thingy!
One thing however: i'd like to have "next" and "previous" buttons in order to navigate between the panels.. how would you do that?
(so that, while in panel1, if you click a "next" link in the content div, it opens the next panel)
thanx if you can help me!  
Aug 30, 2008 3:48:00 PM, Anonymous Steen Clausen said:
Supercool espacially when text reformats while choosing the levels of the accordian... At Verinet we have n new tree for scrolling our Server Hosting Colocation products, and the entries will be with this. Thanks from Copenhagen Denmark.  
Sep 1, 2008 7:11:00 PM, Anonymous SeGo said:
He insertado tu acordeón horizontal dentro de un acordeón vertical y en Firefox funciona correctamente pero en Internet Explorer no funciona.

¿Sabes a qué se puede deber?

Te dejo el enlace para que le eches un vistazo:

http://dreisarquitectos.com/web/

Muchas gracias.  
Sep 2, 2008 11:40:00 PM, Blogger Thé said:
Is it possible to center the whole accordion? That is to place the accordion in the center of the page.  
Oct 6, 2008 7:22:00 PM, Blogger 14all said:
Thank You, Thank You, Thank you. It is now my 2nd day with jQuery and this script is exactly what I needed. Please see it in action at http://testing.northcoastcomputerservices.com

I tried for hours to get this script to work with easing.js - so that the accordion will "bounce" in and out - but I just can't figure out how to do that :(

Can anyone please help me to add the easing.js effects to Sevir's great script here - to the page above?

Thank You.  
Oct 10, 2008 7:28:00 PM, Anonymous Josh said:
This script is great! However, I am having a problem in Safari. After applying the open/close hack by marco, whenever I close the submenu the entire menu jumps to the left to where the menu had expanded to. I figured out that if you change width: "0px" to anything above 0 like width: ".1em" the menu will stay in place, but there will be a tiny space in the menu. Any ideas on how I can have width: ".1em" in just Safari?  
Jan 20, 2009 12:15:00 PM, Blogger Ben said:
this doesn't work with IE6x !!  
Feb 12, 2009 1:47:00 PM, Anonymous codeNinja said:
It works slightly better when you change the last 2 css values as follows:

.haccordion .content{
display: none;
width: 0px;
overflow: hidden;
}

.haccordion .content p {
margin: 0;
padding: 5px;
width: 240px;
}



enjoy! :)  
Feb 16, 2009 4:17:00 PM, Blogger Relic said:
Is there a way to open the accordion without the content resizing? I'd like the content to simply stay static if possible. Thanks.  
Apr 2, 2009 1:43:00 PM, Anonymous Ben said:
great script, thanks.

is there an easy way to make the header element change bg colour/bg img etc when it is selected?  
Apr 8, 2009 12:52:00 PM, Anonymous Acmeous said:
Hey SeViR,

Thanks a lot for sharing this nice script. its really good and very light.
But I was wondering if there can be an easy way to make this sliding automatic too. I mean what every general haccordion have is to slide over on mouseover or click. But can we also make the sliding automatic so even if the user don't click the sliding is carried on.
Is this possible with this script, & if possible then how can we do this?

Thanks in advance for your help.  
Apr 17, 2009 2:52:00 PM, Anonymous hdesignro said:
hello,
please how much I can do that when opened is "1" to say and when push again to "1" to automatically shut(closed)  
May 12, 2009 12:19:00 AM, Anonymous Clem said:
Hi SeViR :)

I used your plugin on a personal project and added some comments/options

Just check this out : hAccordionI know it's not as simple and compressed as start, but these evolutions could help you in 0.2 version ;)

So, I'm waiting for some new posts on your blog ;)

Clem  
Jun 22, 2009 9:49:00 PM, Blogger zack said:
Great accordian script! I am using the modified version which has an opened div visible http://projects.sevir.org/storage/haccordion/, but whenever I add another vertical bar into the html it stops working. Is it limited to three bars or is there a way to add more headers and content? Any help would be greatly appreciated. Thanks!!  
Jul 9, 2009 2:51:00 PM, Anonymous Anonymous said:
Hello ,

I m a newbie !! where I have to put javascript code on blogger and can we use your great plugin for only post tabbs if yes what I must write ?.

Best,

Alex  
Jul 10, 2009 1:34:00 PM, Blogger Frönmark said:
This post has been removed by the author.  
Jul 10, 2009 1:37:00 PM, Blogger Frönmark said:
To make links within the slider work...
I changed the expanding parts from a tags to divs and then put the triggering a:s within that div. The triggering a:s are of the same class. Modified the jQuery script so it would work like that instead. Put numbers for a names so I know which one to change. Was tricky and I wouldn't exactly call it orthodox, but it works. :-)  
Links to this post
This design is under copyright of SeViR CW © 2007