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>
        </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

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

ul.list {
    display:block;
    }

JavaScript

$(document).ready(function() {
    
    // Expand Panel
   $("#open").click(function(e){
       e.preventDefault();
        $("div#panel").css('display', 'block');
    });    
    
    // Collapse Panel
    $("#close").click(function(e){
       e.preventDefault();
        var target = $("#toppanel").offset().top;
        $("html,body").animate({scrollTop: target},"fast");
        $("div#panel").css('display', 'none');
    });     
    
    // Switch buttons from "Log In | Register" to "Close Panel" on click
    $("#toggle a").click(function () {
        $("#toggle a").toggle();
    });  
    
     $(".anyClass").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev"
    });
        
});