JSFiddle - React, Tailwind, and code Playground

by LiamBailey

HTML

<script src="http://www.warface.co.uk/clients/warface.co.uk/wp-content/themes/warface/js/jCarousel-lite.js"></script>
<link rel="stylesheet" href="http://www.warface.co.uk/clients/warface.co.uk/wp-content/themes/warface/style.css">
<div id="toppanel">

    <div id="panel">
    
    <button class="prev"><<</button>
    <button class="next">>></button>

    <div class="anyClass">
    <ul>
        <li>image 1<img src="http://www.warface.co.uk/clients/warface.co.uk/images/_scroll1.jpg" alt="" width="100" height="100" /></li>
        <li>image 2<img src="http://www.warface.co.uk/clients/warface.co.uk/images/_scroll1.jpg" alt="" width="100" height="100" /></li>
        <li>image 3<img src="http://www.warface.co.uk/clients/warface.co.uk/images/_scroll1.jpg" alt="" width="100" height="100" /></li>
        <li>image 4<img src="http://www.warface.co.uk/clients/warface.co.uk/images/_scroll1.jpg" alt="" width="100" height="100" /></li>
    </ul></div>

    </div>

    <!-- The tab on top -->    
    <div class="tab">
        <ul class="login">
            <li id="toggle">
                <a id="open" class="open" href="#">Show Dashboard</a>
                <a id="close" style="display: none;" class="close" href="#">Close Panel</a>    
            </li>

        </ul> 
    </div> <!-- / top -->
</div> <!--END panel -->    


<div class="contentbg">
<div class="wrapper">

<div id="header">

    <ul class="navigation">
        <li><a class="home" href="http://www.warface.co.uk/clients/warface.co.uk/">Home</a></li>
        <li><a class="about" href="about">About</a></li>

        <li><a class="portfolio" href="portfolio">Portfolio</a></li>
        <li><a class="contact" href="contact">Contact</a></li>
    </ul>
    
    <h1 class="logo"><a href="http://www.warface.co.uk/clients/warface.co.uk/">>WARFACE</a></h1>
    
</div><!--header--></div>

<button class="prev"><<</button>

<button class="next">>></button>
<div class="anyClass">
    <ul>
        <li><img...

CSS

/*   
Sliding Panel
*/

/* sliding panel */
#toppanel {
    /*position: absolute;*/   /*Panel will overlap  content */
    position: relative;   /*Panel will "push" the content down */
    top: 0;
    left: 0;
    width: 100%;
    } 
#panel {
    width: 100%;
    height: 500px;
    color: #999999;
    background: #272727;
    overflow: hidden;
    position: relative;
    display: none;
    }
#panel div.anyClass ul {
    display:block;
      height: 100px;
    width:1000px;
    margin:0;
    padding:0;
    position:absolute;
    z-index:1000;
    }
#panel .anyClass ul li {
      float: left;
      height: 100px;
      width:100px;
    }
#panel div.anyClass {
    width:400px;
    height:100px;
    overflow:hidden;
    display:block;
    }

JavaScript

$(document).ready(function() {
    
    // Expand Panel
    $("#open").click(function(){
        $("div#panel").slideDown("slow");    
    });    
    
    // Collapse Panel
    $("#close").click(function(){
        $("div#panel").slideUp("slow");    
    });        
    
    // Switch buttons from "Log In | Register" to "Close Panel" on click
    $("#toggle a").click(function () {
        $("#toggle a").toggle();
    });  
    
     $(".anyClass").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev"
    });
        
});