JSFiddle - React, Tailwind, and code Playground

by Vinay Pratap Singh Bhadauria

HTML

<section id='container'>
    <div id='left-nav'><a href='#'><img src='images/left-nav.png'/></a>
    </div>
    <ul id='list'>
        <li>
            <img src='images/slide1.png' />
        </li>
        <li>
            <img src='images/slide2.png' />
        </li>
        <li>
            <img src='images/slide3.png' />
        </li>
        <li>
            <img src='images/slide4.png' />
        </li>
        <li>
            <img src='images/slide5.png' />
        </li>
    </ul>
    <div id='right-nav'><a href='#'><img src='images/right-nav.png'/></a>
    </div>
</section>

CSS

#container {
    width: 970px;
    height: 1px;
    padding: 5px;
    line-height: 190px;
}
section #list {
    display: inline-block;
    display: none;
    //I want to hide it when page first loads
}
section #list li {
    display: inline-block;
    width: 162px;
    height: 142px;
    background-color: grey;
    line-height: 170px;
    vertical-align: middle;
    margin: 6px;
}
section #left-nav {
    display:inline-block;
    line-height: 120px;
    vertical-align: middle;
    display: none;
    //I want to hide it when page first loads
}
section #right-nav {
    display:inline-block;
    line-height: 120px;
    vertical-align: middle;
    display: none;
    //I want to hide it when page first loads
}

JavaScript

$('#btn').on('click', function () {
     var height = $('#container').height();
     if (height > 10) {
         $('#container').height(1);
     } else {
         $('#container').height(190);
     }

     $('#list').toggle('slow');
     $('#left-nav').toggle('slow');
     $('#right-nav').toggle('slow');
 })