Exactly How to Create a Custom jQuery Accordion

• 8 Comments

1. • lisa
   • 1.21.2009 at 4:48 pm
   • #
   • Reply »

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

2. • Adrian Turner
   • 1.21.2009 at 8:05 pm
   • #
   • Reply »

   Congrats!

   AEA 2010!

3. • ThaClown
   • 1.22.2009 at 4:09 am
   • #
   • Reply »

   Fantastic, very usefull

4. • Cam
   • 1.25.2009 at 1:33 pm
   • #
   • Reply »

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

5. • Trevor
   • 1.25.2009 at 4:35 pm
   • #
   • Reply »

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

6. • cosinus
   • 2.8.2009 at 6:54 pm
   • #
   • Reply »

   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 ?

7. • Trevor
   • 2.9.2009 at 11:59 am
   • #
   • Reply »

   @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?

8. • cosinus
   • 2.10.2009 at 7:46 am
   • #
   • Reply »

   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

Speak Your Mind