JSFiddle - React, Tailwind, and code Playground

by Dawid van der Hoven

HTML

<script src="http://addyosmani.com/resources/css3transitions/js/jquery.transition.js"></script>
<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...

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({
          danceSwitcher: function(options) {
            var defaults = {
              speed: 1,
              collapsedWidth: 230,
              collapsedHeight: 80,
              collapsedMPB: [10, 10, 10, 10],
              collapsedLineHeight: '80px',
              activeLineHeight: '48px',
              animationSequence: 'prev/next'
            };
            options = $.extend(defaults, options);
            return $(this).each(function() {
              var $this = $(this),
                  speed = options.speed,
                  first = $(this).children('div').eq(0), // the first child of the switcher, so that it is open by default
                  i;  
              $this.css('height', ($this.children('div').length - 1) * (options.collapsedHeight + options.collapsedMPB[0] + options.collapsedMPB[2]) + 'px'); // set the height of the switcher to the appropriate value
              first.addClass('active'); // make the first box active
              for (i = 1; i < $this.children('div').length; i++) { // position all of the boxes appropriately
                $this.children('div').eq(i).css('top', (i - 1) * (options.collapsedHeight + options.collapsedMPB[0] + options.collapsedMPB[2]) + 'px');
              }
              if (options.animationSequence === 'prev/next') { // using the default animation
                $this.children('div').click(function() { // bind aclick event to all the boxes
                  var $$this = $(this);
                  if (!$$this.hasClass('active') && !$this.hasClass('inprogress')) { // if the box clicked isn't already active and there isn't already animation going on
                    var next, prev;
                    $this.addClass('inprogress'); // make sure 2 animations don't happen at once
                    $this.children('.active').children('.content').animate({ // fade out the content of the active box
                      opacity: 0
                    }, 750 /...