JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<div id="msgListClick" class="msgList">
        <p class="msgHead">Header-1</p>
        <div class="msgBody">orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>
        <p class="msgHead">Header-2</p>
        <div class="msgBody">orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>
        <p class="msgHead">Header-3</p>
        <div class="msgBody">orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>
        <p class="msgHead">Header-4</p>
        <div class="msgBody">orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>
    <div id="msgListHover" class="msgList">
        <p class="msgHead">Header-1</p>
        <div class="msgBody">orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>
        <p class="msgHead">Header-2</p>
        <div class="msgBody">orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>
        <p class="msgHead">Header-3</p>
        <div class="msgBody">orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>
        <p class="msgHead">Header-4</p>
        <div class="msgBody">orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>

CSS

*{margin: 0;padding:0;}
        body {padding:20px 100px;margin:0;}
        .msgList {
            margin: 0 20px 15px 0;
            padding: 0;
            width: 200px;
            float: left;
        }
        
        .msgHead{
            padding: 5px 10px;
            cursor: pointer;
            position: relative;
            background-color: #fcc;
            margin: 1px;
        }
        .slideUp,
        .slideDown {
            position: absolute;
            width: 0px; height: 0px;
            border: 5px solid #000;
            border-color: #fff #fcc #fcc;
            background: black;
            right : 10px;
            bottom: 5px;
        }
        .slideUp {
            border-color: #fcc #fcc #fcc #fff;
            bottom: 6px;
            right: 5px;
        }
        .msgBody {
            padding: 5px 10px 15px;
            background-color: #f4f4f8;
        }

JavaScript

$(document).ready(function(){
            $('.msgBody').hide();
            $('<span class="slideDown">').appendTo('.msgHead');
            $('#msgListClick .msgHead').click(function(){
                $(this).children('span').attr('class','slideUp').end().next('.msgBody').slideToggle(300).siblings('.msgBody').slideUp('fast');
                $(this).siblings('.msgHead').children('span').attr('class','slideDown');
            });
            $('#msgListHover .msgHead').mouseover(function(){
                $(this).children('span').attr('class','slideUp').end().next('.msgBody').slideDown(500).siblings('.msgBody').slideUp('slow');
                $(this).siblings('.msgHead').children('span').attr('class','slideDown');
            });
        });