Revision: 41215
Updated Code
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
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
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