Posted By

robertdotim on 02/14/11

Tagged

Versions (?)

Last Edited at 02/14/11 12:29pm

Statistics

Viewed 408 times

Favorited by 1 user(s)

Related snippets

jQuery Horizontal Accordion

/ Published in: HTML

This is a pretty simple accordion. Good for listing team members or something like that.

Highlighted TextExpand

<html>

<!----------------------------------------------------
Welcome to the jQuery accordion by Robert Picard.

Visit robert.im and follow me on Twitter @IAmRobertPicard
to see what I'm doing.

Seriously, follow me.
------------------------------------------------------>

$("#accordion_first").css("border-bottom-left-radius", "10px"); // For better cross-browser compatibility
	$("#accordion_first").css("border-top-left-radius", "10px");
	
	$("#accordion_last").css("border-bottom-right-radius", "10px");
	$("#accordion_last").css("border-top-right-radius", "10px");
				
	$('.accordion_box').click(function(){ // When the accordion box is clicked...
		if ($(this).width() == 100) // and the width of the clicked box is 100px...
		{
			$(this).animate({width:300}, "fast"); // open it to 300px...
			$(this).siblings().animate({width:100}, "fast"); // and close any other open boxes.
		}	
	});
	
	$('.accordion_box').dblclick(function() { // If the accordion box is double clicked...
		if ($(this).width() == 300) // and the clicked box is open...
		{
			$(this).animate({width:100}, "fast"); // close it.
		}
	});
});
		
		</script>
	</head>

<body>
	
	<div class="accordion_box" id="accordion_first"> 
		<img class="accordion_img" src="img/img.jpg" width="80" height="80" />
		<p><b>Robert</b><br />
		<br />
		Testing some text.</p>
	</div>
	
	<div class="accordion_box">
		<img class="accordion_img" src="img/img2.jpg" width="80" height="80" />
		<p><b>Robert</b><br />
		<br />
		Testing some text.</p>
	</div>
	
	<div class="accordion_box">
		<img class="accordion_img" src="img/img.jpg" width="80" height="80" />
		<p><b>Robert</b><br />
		<br />
		Testing some text.</p>
	</div>
	
	<div class="accordion_box">
		<img class="accordion_img" src="img/img2.jpg" width="80" height="80" />
		<p><b>Robert</b><br />
		<br />
		Testing some text.</p>
	</div>
	
	<div class="accordion_box" id="accordion_last"> 
		<img class="accordion_img" src="img/img.jpg" width="80" height="80" />
		<p><b>Robert</b><br />
		<br />
		Testing some text.</p>
	</div>
	

	
	</body>
</html>

URL: http://screenr.com/91f

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.