JSFiddle - React, Tailwind, and code Playground

by petroveg

HTML

<div class="tab1">
    <ul class="place">
        <li><img src="http://p.w3layouts.com/demos/furniture_home/web/images/cir.png" alt=""></li>
        <li>Placerat ligula tincidunt</li>
    </ul>
    <p class="text">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
</div>

CSS

ul.place {
    margin: 6px 0;
    padding: 0;
    background: #dc483a;
}
ul.place li {
    display: inline-block;
    padding: 6px;
    font-family: 'Arimo', sans-serif;
    font-size: 1em;
    color: #fff;
    cursor: pointer;
}
.text {
    display:none;
}

JavaScript

$(document).on('click', '.place', function() {
    var text = $(this).next('.text');

    if (text.is(':visible')) {
        text.fadeOut(500);
    } else {
        text.fadeIn(500);
    }
});