JSFiddle - React, Tailwind, and code Playground

by Sascha

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Below is the first two of the six divs for the headings

<div class="res-head">
    <p class="placeholder"></p>
</div>
<div class="res-info cs-hide">
    <div style="width: 33%; height: 33%; font-weight: bold; text-align: left;">
        <p>The Department of Computer Science offers four tracks of study leading to an MS or PhD:</p>
        <ul class="res-list">
            <li class="res-list-item">- Information Assurance</li>
            <li class="res-list-item">- Intelligent Systems</li>
            <li class="res-list-item">- Networks and Telecommunications</li>
            <li class="res-list-item">- Traditional Computer Science</li>
        </ul>
    </div>
    <img src="cyberSecurity.jpeg" style="width: 33%; height: 33%;">
    <div style="width: 33%; height: 33%; font-weight: bold;">
        <p>Cyber Security Research in the UT Dallas CS department is conducted within the umbrella of the Cyber Security Research and Education Institute. Its origins go back to October 2004 when UTD’s Cyber Security Research Center (CSRC) was established soon after which it received the NSA/DHS Center of Academic Excellence designation in Information Assurance Education (CAEIAE) in June 2004. After receiving the NHA/DHS CAE in Research in 2008 and a $1.8 million Scholarship for Service (SFS) award from the NSF in 2010, our efforts and in cyber security research education were combined to establish Cyber Security Research and Education Center in January 2012. Subsequently, due to significant growth in faculty hiring, research and education in cyber security, the Cyber Security Research and Education Institute was established in April 2013.</p>
    </div>
</div>
<div class="res-info ct-hide">
    <div style="width: 33%; height: 33%; font-weight: bold; text-align: left;">
        <p>The Department of Computer Science offers four tracks of study leading to an MS or PhD:</p>
        <ul...

CSS

.cs-hide {
    display: none;
}

.ct-hide {
    display: none;
}

JavaScript

$(document).ready(function() {
    var head1 = "<h5>Cyber Security</h5>";
    var head2 = "<h5>Computing Theory</h5>";
    var head3 = "<h5>Computer Systems</h5>";
    var head4 = "<h5>Artificial Intelligence/Machine Learning</h5>";
    var head5 = "<h5>Software Engineering</h5>";
    var head6 = "<h5>Network</h5>";
    $("p.placeholder").after(head1, head2, head3, head4, head5, head6);
    $("h5").addClass("research-headings");
    $("h5").eq(0).click(function() {
    debugger;
    console.log($(this).children("div.res-info"));
        $(this).children("div.res-info").toggleClass("cs-hide");
    });
    $("h5").eq(1).click(function() {
        $("div.res-info").toggleClass("ct-hide");
    });
    $("h5").eq(2).click(function() {
        $("div.res-info").toggleClass("cy-hide");
    });
    $("h5").eq(3).click(function() {
        $("div.res-info").toggleClass("ai-hide");
    });
    $("h5").eq(4).click(function() {
        $("div.res-info").toggleClass("se-hide");
    });
    $("h5").eq(5).click(function() {
        $("div.res-info").toggleClass("nt-hide");
    });
});