JSFiddle - React, Tailwind, and code Playground

by userdude

HTML

<div id="msg">Click a Header to Show Associated Content</div>
<div class="story">
    <h2>Sub Header 1</h2>
    <div>Content 1</div>
</div>
<div class="story">
    <h2>Sub Header 2</h2>
    <div>Content 2</div>
</div>
<div class="story">
    <h2>Sub Header 3</h2>
    <div>Content 3</div>
</div>

CSS

.story > div {
    display: none;
}

JavaScript

$(document).ready(function(){
    var $headers = $(".story h2"),
        $msg = $('#msg');
        
    $headers.click(function(){
        var $this = $(this),
            $content = $headers.not(this).siblings('div'),
            msg = "Select story #" + $this.text();
        
        $content.hide();
        
        $this.siblings('div').show();
        
        $msg.text(msg);
    });
});