Exactly How to Create a Custom jQuery Accordion

Yesterday, I saw that NETTUTS was looking for another staff writer. I figured that I would give it a shot and write a tutorial about creating a custom jQuery accordion (just like the one on the sidebar of my website). Well what do you know, they published it.

Categories

Recent Articles

February 2012

S M T W T F S
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29      

8 Comments

lisa

01.21.2009

congratulations! i’m totally saving the article for future use.

Adrian Turner

01.21.2009

Congrats!

AEA 2010!

ThaClown

01.22.2009

Fantastic, very usefull

Cam

01.25.2009

Dope article, your version is lighter and will definitely get integrated into my bog redesign.

Trevor

01.25.2009

@ThaClown & Cam-
Awesome, glad you guys enjoyed it.

cosinus

02.08.2009

I tried to modify your script to have a multi-level Jquery Accordion menu (3 levels) and keep my window active when I click on the link like this example
http://berndmatzner.de/jquery/hoveraccordion/
but I fail. Any help ?

Trevor

02.09.2009

@cosinus-
What wasn’t working? You will definitely have to modify the code some. Do you have an example that shows how far you got?

cosinus

02.10.2009

Collapsible Message Panels

$(document).ready(function(){ 
 last=null;
 $(".msg_body").hide();
 $(".sub_msg_body").hide();
 
 $(".msg_head").click(function(){
  $(this).next(".msg_body").slideToggle(600).siblings(".msg_body:visible").slideUp("600");         
  $(this).toggleClass("active");
     $(this).siblings(".msg_head").removeClass("active");  
 });
 
 $(".sub_head").click(function(){
  $(this).next(".sub_msg_body").slideToggle(600);
  if ( $(this).filter(':contains(Sub-Header-1)') )
   window.open ("http://www.google.com"); 
 }); 
 
 $(".msg_body .link,.sub_msg_body .link").click(function(){
     $(last).css({'background-color':'#CDC8B1', 'border-left': '5px solid #ccc'});
  $(this).css({'background-color':'#ffe', 'border-left': '5px solid #ccc'});
  last=this;
 }); 
 
 
}); 
body {
 margin: 10px auto;
 width: 570px;
 font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
}
.msg_list {
 margin: 0px;
 padding: 0px;
 width: 383px;
}
p {
 padding: 0 0 1em;
}
.msg_head {
 padding: 5px 10px;
 cursor: pointer;
 position: relative;
 background-color:#FFCCCC;
 margin:1px;
}
.msg_body {
 padding: 5px 10px 15px;
 background-color:#F4F4F8;
}
.sub_head {
 padding: 5px 10px;
 cursor: pointer; 
 background-color:#7AC5CD; 
}
.sub_msg_body {
 padding: 5px 10px 15px;
 background-color:#F4F4F8;
}
.msg_body .link{          
 padding: 5px 10px;
 cursor: pointer; 
 background-color:#7AC5CD;   
}
.sub_msg_body .link{      
 padding: 5px 10px;
 cursor: pointer; 
 background-color:#CDC8B1;   
}
a {text-decoration:none; }
.active {background-color:#A2B5CD;} 

Click on the each news head to toggle

 


Header-1
link-1
  Sub-Header-1
  link-1
  link-2   
  link-2
 
Header-2
 
  link-1     
  link-2
——-

Too late, comments are closed!

Don’t worry, you can email me or contact me on Twitter.