JSFiddle - React, Tailwind, and code Playground

by juxprose

HTML

<ol>
    <h2>List Title</h2>
    <li>
        <a class="trg-open website-title">Title 1</a>
        <div class="website-info is-collapsed">
            <h3>Title 1 Revealed</h3>
            <p>Cum sociis natoque penatibus et magnis dis parturient montes.</p>
        </div>
    </li>

        <li>
        <a class="trg-open website-title">Title 2</a>
        <div class="website-info is-collapsed">
            <h3>Title 2 Revealed</h3>
            <p>Cum sociis natoque penatibus et magnis dis parturient montes.</p>
        </div>
    </li>
    
    <li>
        <a class="trg-open website-title">Title 3</a>
        <div class="website-info is-collapsed">
            <h3>Title 3 Revealed</h3>
            <p>Cum sociis natoque penatibus et magnis dis parturient montes.</p>
        </div>
    </li>
</ol>

CSS

.website-info { 
    display: none;
    background: #fff;
    border: 1px solid grey;
    position: absolute; 
    left: 150px; 
    top: 50px;
    z-index: 2000;
    width: 150px;
    overflow: hidden;
}

JavaScript

$(document).ready(function(){
    $('.trg-open.website-title').click(function (e) {
    e.stopPropagation();
    $('.website-info').hide();
    $(this).next('.website-info').show('slide', {direction: 'left'}, 1400);
   });
});