Contentswitcher

Original: http://jsfiddle.net/addyosmani/Mxyaj/

HTML

<div class="switcher">       <div>         <h3>A Title Here</h3>         <div class="content">           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>         </div>       </div>       <div>         <h3>Heading!</h3>         <div class="content">           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>         </div>       </div>       <div>         <h3>This is a Box</h3>         <div class="content">           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu...

CSS

.switcher { /* this can be whatever selector you want */         width: 910px; /* the full width of the switcher */         position: relative; /* important */         font-family: Georgia;       }       .switcher > div {         height: 80px; /* the height of the boxes when collapsed */         position: absolute;         left: 660px; /* the width of the switcher minus the outer width of the collapsed boxes (including margin, padding and border) */         right: 0; /* important */         margin: 4px; /* the margin between collapsed boxes */         padding: 5px; /* the padding for the collapsed boxes */         border: 1px solid #C2C2C2; /* the border for collapsed boxes */         background: #e3e3e3;         overflow: hidden; /* important */       }       .switcher > div .content {         opacity: 0; /* impotant */       }       .switcher > div > h3 {         text-align: center;         line-height: 80px; /* used to vertically center the text in collapsed boxes, should be the height of the collapsed boxes */         font-size: 24px;         font-family: Helvetica;       }       .switcher .active {         height: auto; /* important */         width: auto; /* important */         top: 0; /* important */         left: 0; /* important */         bottom: 0; /* important */         right: 250px; /* the outer width of the collapsed boxes */       }       .switcher .active .content {         opacity: 1; /* important */       }       .switcher .active > h3 {         line-height: 48px; /* the line height of the box heading when active */       }       p {         line-height: 22px;         font-size: 14px;         padding: 5px;       }

JavaScript

(function($) {
        $.fn.extend({
          oldAnimate: $.fn.animate,
          animate: function(props, speed, easing, callback) {
            var camelToHyphen = function(camel) {
              return camel.replace(/([A-Z])/g, "-$1").toLowerCase();
            }, prefixes = [
              "Moz", "Webkit",
              "O", "Ms", "Khtml"
            ], transitionProp = false,
            $this = $(this);
            callback = (typeof easing === "function") ? easing : (callback) ? callback : function() {};
            easing = (easing && typeof easing === "string") ? easing : "ease-in-out";
            for (var i = 0; i < prefixes.length; i++) {
              if (prefixes[i] + "Transition" in $this.get(0).style) {
                transitionProp = "-" + prefixes[i].toLowerCase() + "-transition";
                break;
              }
            }
            return $this.each(function() {
              var $$this = $(this);
              if (transitionProp) {
                var oldTransition = $$this.css(transitionProp);
                    transitionString = (oldTransition) ? oldTransition + ", " : "";
                for (prop in props) {
                  transitionString += camelToHyphen(prop) + " " + speed + "ms " + easing + ", ";
                }
                transitionString = transitionString.replace(/\, $/, "");
                $$this.css(transitionProp, transitionString).css(props);
                setTimeout(function() {
                  $$this.css(transitionProp, oldTransition);
                  callback();
                }, speed);
              }
              else {
                $$this.oldAnimate(props, speed, callback);
              }
            });
          }
        });
      })(jQuery);
      
      (function($) {
        $.fn.extend({
          danceSwitcher: function(options) {
            var defaults = {
              speed: 1,
              collapsedWidth: 230,
              collapsedHeight: 80,
             ...