JSFiddle - React, Tailwind, and code Playground

by Aakash Chakravarthy

HTML

<script src="http://www.ajula.edu/temp/Scripts/collapser/jquery.collapser.js"></script>

<!-- Demo 6 -->
<div id="left_col">
<h4 class="demo6">News</h4>
<div class="panel newsPanel">
    <div id="sublist">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Holidays</a></li>
        <li><a href="">Spirituality</a></li>
        <li><a href="">Education</a></li>
        <li><a href="">Travel</a></li>
    </ul>
    </div>
</div>
    
<h4 class="demo6">Life Style</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

<h4 class="demo6">Entertainment</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    
<h4 class="demo6">Singles</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>

CSS

demo6 {
    background: none repeat scroll 0 0 #0099FF;
    border: 1px solid #B9E3FF;
    color: #FFFFFF;
    padding-left: 5px;
}
.panel {
    border: 1px solid #B9E3FF;
    padding: 10px;
}
h4 {
    font-weight: bold;
    margin: 1px 0;
        cursor: pointer;
}
#left_col {
    width: 175px;
    float: left;
}
#sublist ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    border: none;
}
#sublist ul li {
margin: 0px;
padding: 0px;
}
#sublist ul li a {
font-size: 80%;
display: block;
border-bottom: 1px dashed #C39C4E;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #666666;

}

JavaScript

/** Demo 6 **********************************/

/** REPLACE "newsPanel" with <?php $_GET['cat'] ?> and add the class newsPanel to the HTML **/ 

$('.panel:not(".newsPanel")').hide();
    $('.demo6').collapser({
        target: 'next',
        effect: 'slide',
        changeText: 0,
        expandClass: 'expIco',
        collapseClass: 'collIco'
    }, function(){
        $('.panel').slideUp();
    });