JSFiddle - React, Tailwind, and code Playground
HTML
<dl class="topiclist">
<dt>Topic</dt>
<dd>More topical info!</dd>
<dt>Topic 2</dt>
<dd>2nd More topical info!</dd>
<dt>Topic 3</dt>
<dd>Getting tired, yet?</dd>
<dt>Topic 4</dt>
<dd>I see you!</dd>
<dt>Topic 5</dt>
<dd>Point made</dd>
</dl>
CSS
.topiclist {
}
.topiclist dd {
display:none;
margin:0 0 1em;
padding:0;
}
.topiclist dd.show {
display:block;
}
JavaScript
$(function(){
var toggleDetails = function(){
// Want to make this a one-item-only-open-at-a-time-list?
// uncomment the next line!
$('.topiclist dd').removeClass('show');
var mySib = $(this).next('dd');
($(mySib).hasClass('show')) ? $(mySib).removeClass('show') : $(mySib).addClass('show');
};
$('.topiclist dt').on('click',toggleDetails);
});