Advanced Search

Return to Snippet

Revision: 41215
at September 7, 2011 09:16 by robertdotim
Updated Code 
<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.
------------------------------------------------------>

	<head>
	
<!-- Add this CSS to your stylesheet -->

		<style type="text/css">
		
		body
		{
			background-color: #c0c0c0;
		}
		
		.accordion_box
		{
			width: 100px;
			background-color: #39414a;
			height: 100px;
			float: left;
			border-right: 1px solid white;
			overflow: hidden;
			color: white;
			font-family: arial;
			font-size: 12px;
		}
		
		#accordion_first
		{
			-moz-border-radius-bottomleft: 10px;
			-moz-border-radius-topleft: 10px;
			-webkit-border-bottom-left-radius: 10px;
			-webkit-border-top-left-radius: 10px
			border-bottom-left-radius: 10px;		
			border-top-left-radius: 10px;
		}
		
		#accordion_last
		{
			-moz-border-radius-bottomright: 10px;
			-moz-border-radius-topright: 10px;
			-webkit-border-bottom-right-radius: 10px;
			-webkit-border-top-right-radius: 10px
			border-bottom-right-radius: 10px;		
			border-top-right-radius: 10px;
			border-right: none;
		}
		
		.accordion_img
		{
			margin: 10px;
			float: left;
		}
		
		.accordion_box p
		{
			float: left;
		}
		
		</style>
		
<!-- I'm using jQuery library hosted on Google but you can change that
to another mirror or download it yourself at jQuery.com -->

		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

		<script type="text/javascript">
		
	$(document).ready(function(){

	$("#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"> <!-- Note the id of the first box, #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"> <!-- Note the id of the last box, #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>
	
<!-- It doesn't matter how many boxes you have, just make the sure the
first and last boxes are identified with #accordion_first and
#accordion_last respectively. -->
	
	</body>
</html>

Revision: 41214
at February 14, 2011 12:29 by robertdotim
Initial Code 
<html>

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

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

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

	<head>
	
<!-- Add this CSS to your stylesheet -->

		<style type="text/css">
		
		body
		{
			background-color: #c0c0c0;
		}
		
		.accordion_box
		{
			width: 100px;
			background-color: #39414a;
			height: 100px;
			float: left;
			border-right: 1px solid white;
			overflow: hidden;
			color: white;
			font-family: arial;
			font-size: 12px;
		}
		
		#accordion_first
		{
			-moz-border-radius-bottomleft: 10px;
			-moz-border-radius-topleft: 10px;
			-webkit-border-bottom-left-radius: 10px;
			-webkit-border-top-left-radius: 10px
			border-bottom-left-radius: 10px;		
			border-top-left-radius: 10px;
		}
		
		#accordion_last
		{
			-moz-border-radius-bottomright: 10px;
			-moz-border-radius-topright: 10px;
			-webkit-border-bottom-right-radius: 10px;
			-webkit-border-top-right-radius: 10px
			border-bottom-right-radius: 10px;		
			border-top-right-radius: 10px;
			border-right: none;
		}
		
		.accordion_img
		{
			margin: 10px;
			float: left;
		}
		
		.accordion_box p
		{
			float: left;
		}
		
		</style>
		
<!-- I'm using jQuery library hosted on Google but you can change that
to another mirror or download it yourself at jQuery.com -->

		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

		<script type="text/javascript">
		
	$(document).ready(function(){

	$("#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"> <!-- Note the id of the first box, #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"> <!-- Note the id of the last box, #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>
	
<!-- It doesn't matter how many boxes you have, just make the sure the
first and last boxes are identified with #accordion_first and
#accordion_last respectively. -->
	
	</body>
</html>
Initial URL 
http://screenr.com/91f
Initial Description 
This is a pretty simple accordion. Good for listing team members or something like that.
Initial Title 
jQuery Horizontal Accordion
Initial Tags 









Initial Language





HTML