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:
Download jquery.haccordion.js code.
Labels: javascript, jquery, programming
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
Nice job! Just wrote little more documentattion and please update code where to insert code to start with opened (class "visible")
Thanks!
I would also need a bit more help where to insert the code to start with one div open at page load.
Thanks
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.
if (p.opened!=this) {
p.opened = this;
jQ(this).next("div."+params.contentclass).animate({
width: params.contentwidth + "px"
}, params.speed);
} else {
p.opened = "undefined";
}
Is there a way for the "contentwidth" to be variable?
contentwidth: 500
The reason is that each content area is different width.
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!
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
Thanks!
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 ;-)
You can look this code simple accordion - Work
Open div opened by default - doesn't Work
Thank's
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 :-)
Sorry for my bad English :P
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
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?
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...
Also, when I try and put flash in the content divs, you can see it slide across the screen - any way around this?
Thanks!
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.
modify the haccordion.js as follows:
look for:
jQ("."+params.headerclass,this).click(function(){
change:
.click(function()
to
.mouseover(function()
That's it.
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