JSFiddle - React, Tailwind, and code Playground

by pixeloco

HTML

WORKS FINE WITH DIVS<br /><br />
<div class="item">
    <div class="content">This content always shows up</div>
    <div class="expand">SHOW MORE</div>
    <div class="toggled">Hello more content goes in here</div>
</div>

<div class="item">
    <div class="content">This content always shows up</div>
    <div class="expand">SHOW MORE</div>
    <div class="toggled">Hello more content goes in here</div>
</div>

<br /><br /><br />

WHY NOT A TAGS?
<div class="item">
    <div class="content">This content always shows up</div>
    <a href="#" class="expand">SHOW MORE</a><br />
    <div class="toggled">Hello more content goes in here</div>
</div>

<div class="item">
    <div class="content">This content always shows up</div>
    <a href="#" class="expand">SHOW MORE</a><br />
    <div class="toggled">Hello more content goes in here</div>
</div>

CSS

.item {margin-bottom: 30px;}
.expand {cursor: pointer; color: red}
.expand:hover {color: blue}
.toggled {background: #ccc; width: 100px; display: none;position: absolute;}

JavaScript

$('.expand').click(function() {
	$(this).parent().find('.toggled').slideToggle();
	return false;
});