JSFiddle - React, Tailwind, and code Playground

List Descriptions

by Jennifer Perrin

HTML

<ul>
    <li>
        <h1>Item 1</h1>
        <p>Jowl cow beef ribs frankfurter bresaola. Beef ribs chicken prosciutto pork chop, pig bacon chuck swine. Pork beef chuck fatback chicken pig. Spare ribs tail beef, cow rump turkey leberkas kielbasa bresaola swine shank boudin hamburger short ribs pig. Boudin jowl frankfurter, ribeye turducken beef ribs andouille jerky shoulder leberkas sausage bacon strip steak.</p>
    </li>
    <li>
        <h1>Item 2</h1>
        <p>Cow brisket drumstick ground round pork loin, chuck shoulder biltong jowl salami kielbasa sausage. Turducken sirloin tenderloin turkey, fatback boudin brisket bresaola leberkas jerky salami andouille. T-bone filet mignon turkey pastrami andouille, biltong drumstick hamburger meatball.</p>
    </li>
    <li>
        <h1>Item 3</h1>
        <p>Rump sirloin chicken, tail corned beef ribeye ham hock tri-tip bacon. Tri-tip rump flank jerky. Andouille beef ribs turkey, corned beef beef biltong kielbasa hamburger jowl strip steak cow brisket. Cow pork chop pancetta, tenderloin fatback ribeye pork ball tip flank sausage brisket tongue frankfurter turducken kielbasa.</p>
    </li>
    <li>
        <h1>Item 4</h1>
        <p>Tongue sirloin sausage, beef ribs bresaola ham tri-tip capicola jowl short ribs. Short ribs spare ribs tongue strip steak ham hock. Ground round jerky drumstick filet mignon, shank pork pig meatball tongue biltong. Chuck meatloaf pork, hamburger cow chicken salami capicola turkey pork chop pig shoulder.</p>
    </li>
    <li>
        <h1>Item 5</h1>
        <p>Prosciutto jowl tri-tip biltong, meatloaf tongue venison chicken meatball spare ribs bresaola jerky. Jerky beef meatball, short ribs pastrami venison chuck fatback biltong hamburger strip steak pork chop. Salami turducken chicken ribeye capicola. Ball tip jerky sausage pork hamburger tail shank chuck pork loin, leberkas tongue pastrami.</p>
    </li>
</ul>

CSS

ul {
    background: #f0f0f0;
    border: 1px solid #aaa;
    box-shadow: 0 0 0 4px hsla(0,0%,0%,.075);
    list-style: none;
    margin: 50px;
    position: relative;
    width: 600px;
}
ul h1 {
    border-right: 1px solid #aaa;
    border-top: 1px solid #aaa;
    color: #444;
    cursor: pointer;
    font: bold 16px/1.5 sans-serif;
    padding: 8px;
    position: relative;
    width: 100px;
    z-indx: 10;
}
ul li:first-child h1 {
    border-top: none;
}
ul h1:hover {
    background: #e6e6e6;
}
ul li.active h1 {
    background: #f6f6f6;
    border-right-color: #f6f6f6;
}
ul p {
    background: #f6f6f6;
    bottom: 0;
    color: #666;
    display: none;
    font: 16px/1.5 sans-serif;
    left: 117px; /* Width of h1 plus padding */
    padding: 8px;
    position: absolute;
    right: 0;
    top: 0;
}

JavaScript

var list = $('ul li'),
    listItemHeader = list.children('h1');

listItemHeader.hover(function() {
    $(this).parent('li').addClass('active').children('p').fadeIn();    
}, function(){
    $(list).children('p').stop(true, true).fadeOut();
    $(list).removeClass('active')            
});