JSFiddle - React, Tailwind, and code Playground

by sta444

HTML

<ul class="accordion" id="accordion">
    <li class="bg1">
        <div class="heading">Random Information <span class="right"><strong>&gt;</strong></span></div>
        <div class="heading-side">Random Information</div>
        <div class="acc-inner">
               <h2><strong>United States of America</strong></h2>    
               <p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti.</p>
              <p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>                                                    
               <p><small>(1) = data from 2008, unless otherwise noted | (2) = from 2007</small></p>                                     
          </div>
     </li>                
    <li class="bg2">
        <div class="heading">Beautiful Ladies <span class="right"><strong>&gt;</strong></span></div>
           <div class="heading-side">Beautiful Ladies</div>
         <div class="acc-inner">
                                                               
            <div class="showlist">                             
                <a href="#"><img width="80" height="74" src="http://www.portalhunt.com/images/stories/diana_agron.jpg" alt="Number 1" /></a>
                  <div class="showlisttext">
                      <h4><a href="#">Number 1</a></h4>        
                     <p>Nulla consectetur libero consectetur quam...<br /><br />
                    <a href="#" class="more">Read More</a></p>
                </div> 
            </div>   
            
            <div class="showlist">                             
                <a href="#"><img width="80" height="74"...

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
body { margin:77px auto; width:800px; color:#FFF; font-family:Arial, Helvetica, sans-serif; font-size:12px; }
p { line-height:1.4em; margin:12px 0; overflow:hidden; }
.right { float:right; font-size:32px; font-weight:bold; }
a { color:#ffa700; text-decoration:none; }
/* -------- accordion slider -------- */
ul.accordion { list-style:none; margin:0; padding:0; position:relative; z-index:333; }
ul.accordion li.bg1, ul.accordion li.bg2 { float:left; height:402px; width:374px; display:block; background-color:#484848; background-repeat:no-repeat; background-position:center center; position:relative; overflow:hidden; cursor:pointer; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; -o-border-radius:10px; -khtml-border-radius:10px; }
ul.accordion li.bg1 { width:374px; position:relative; z-index:77; -moz-box-shadow:1px 3px 15px #333; -webkit-box-shadow:1px 3px 15px #333; box-shadow:1px 3px 15px #333; }
ul.accordion li.bg2 { width:394px; position:relative; z-index:74; margin-left:-20px; }
ul.accordion li .heading { background:#ffa700; height:30px; padding:10px; text-transform:uppercase; font-weight:bold; font-size:16px; color:#FFF; text-align:left;}
ul.accordion li.bg2 .heading { padding-left:40px; }
ul.accordion li .heading-side { display:none; background:#ffa700; padding:15px; text-transform:uppercase; font-weight:bold; font-size:16px; color:#FFF; text-align:right; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); transform: rotate(-90deg); position: absolute;...

JavaScript

$(function() {                               
    $('#accordion > li.bg1 .heading').toggle(
        function () {
            $('#accordion > li.bg2').stop().animate({'width':'718px'},1000);
            $('#accordion > li.bg1').stop().animate({'width':'50px'},1000);
            $('#accordion > li.bg1 .heading').stop(true,true).fadeOut(1000);
            $('#accordion > li.bg1 .heading-side').stop(true,true).fadeIn(2000);
            $('a.see-more-p').css('display','none');
         },
        function () {
            $('#accordion > li.bg1').stop().animate({'width':'374px'},1000);
            $('#accordion > li.bg2').stop().animate({'width':'394px'},1000);
            $('#accordion > li.bg1 .heading-side').stop(true,true).fadeOut(1000);
            $('#accordion > li.bg1 .heading').stop(true,true).fadeIn(2000);    
            $('a.see-more-p').css('display','block');
        }
     );    
    $('#accordion > li.bg2 .heading, a.see-more-p').toggle(
          function () {
            $('#accordion > li.bg2').stop().animate({'width':'718px'},1000);
            $('#accordion > li.bg1').stop().animate({'width':'50px'},1000);
            $('#accordion > li.bg1 .heading').stop(true,true).fadeOut(1000);
            $('#accordion > li.bg1 .heading-side').stop(true,true).fadeIn(2000);
            $('a.see-more-p').css('display','none');
         },
          function () {
            $('#accordion > li.bg2').stop().animate({'width':'394px'},1000);
            $('#accordion > li.bg1').stop().animate({'width':'374px'},1000);
            $('#accordion > li.bg1 .heading-side').stop(true,true).fadeOut(1000);
            $('#accordion > li.bg1 .heading').stop(true,true).fadeIn(2000);    
            $('a.see-more-p').css('display','block');
        }
       );    
    $('#accordion > li.bg1 .heading-side').toggle(
         function () {
            $('#accordion > li.bg2').stop().animate({'width':'718px'},1000);
            $('#accordion >...