Let me have a blog

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

After of the plugin publication, I have had some request about how you alert the errors as "classic" YAV style or how you display all the errors inside a DIV.

In the first time, I question me, Why I want show all the errors inside a only layer?, focusing in accesibility it is better show the errors inside the label of the each field, but... Why not?. This is the idea:

I copy all the errors in the onError function, inside to a div, and remove the old.

	$(document).ready(function(){
		$("#form1").yav({
			onError: function(){
				$("#errorContainer").append($(".error"));
				$(".error").not($("#errorContainer .error")).remove();
				$("#errorContainer").show();
				
				return false;
			}
		});
		$("#errorContainer a.close").click(function(){
			$(".error").remove();
			$("#errorContainer").hide();
		})
	});

Run the example.

The second idea. Really I have deprecated "classic" YAV style (a simple alert) because this is not usable and with a minimal accesibility. But if you want.... you can get the messages in the old jsErrors variable of YAV, but the syntax of this errors have changed a bit in the plugin. An error message is an map object like {id:"the_related_id_field", msg:"the error message"} or the string representation of this object. So:

	$(document).ready(function(){
		$("#form1").yav({
			onError: function(){
				var errorList = "Please check the next errors: \n\n";
				for (var i=0; i					errorList += ((typeof jsErrors[i]=="object")?jsErrors[i].msg:(eval("("+jsErrors[i]+")").msg)) + "\n";
				}
				alert(errorList);
				
				return false;
			}
		});
	});

Run the example.

If you have another idea, please say it to me.

Labels: accessibility, javascript, jquery, programming