JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#EventID1" class="EventToggle">EVENT!</a>

<a href="#EventID3" class="EventToggle">EVENT!</a>

<a href="#EventID4" class="EventToggle">EVENT!</a>

<div id="EventShow">
    <div id="EventID1" class="EventShowID">Test Event #1
        <br>Testing adding an event for fun.</div>
    <div id="EventID3" class="EventShowID">Test Event #2
        <br>Testing adding another event for fun.</div>
    <div id="EventID4" class="EventShowID">Test Event #3
        <br>Testing adding anotheranother event for fun.</div>
</div>

JavaScript

$(function () {
    // Hide all the elements. This could be replaced by a 
    // CSS rule.
    // ie: 
    // .EventShowID { display: none }
    $(".EventShowID").hide();

    // Attach the click event handler. Use "on" to guarantee it will be 
    // attached to any new element you add dynamically later on.
    $("a.EventToggle").on("click", function () {
        // Hide all.     
        $(".EventShowID").hide();

        // Show the element which id is equal the clicked element href.
        $($(this).attr("href")).show();
    });
});