JSFiddle - React, Tailwind, and code Playground

by Blake Plumb

HTML

<link rel="stylesheet" href="http://www.suu.edu/_files/framework/css/suu-custom.css">
<h2>Honor Societies</h2>
<p>Southern Utah University currently has many active Honor Societies on campus. The students involved in these societies are not only great leaders academically, but are also civically minded and provide valuable service to both the campus and community. As a campus we are proud to be able to offer these opportunities to students and are appreciative of the great work the students do in representing the campus through these opportunities.</p>
<div class="arrowlistmenu">
<p class="menuheader openheader">SUU Honor Societies - Campus wide</p>
<ul class="categoryitems">
<li><a class="categoryheader" href="#">Golden Key International Honour Society</a>
<div>
    <p class="float-right nomargin-top"><img src="/uc-build/images/honor/goldenkey.jpg" width="348" height="344" alt="Golden Key"/></p>
    <p><strong>Description</strong></p>
    <p>At  Golden Key International Honour Society, we share your vision for a life of  promise; a chance to shape the world and a commitment to excellence. We offer a  sense of fellowship within the Society’s three pillars of Academics, Leadership  and Service, and are dedicated to personal, professional and altruistic  achievement. We share your values and offer a continuum of possibilities to  unlock your potential. When you join Golden Key, you become part of an esteemed  legacy like no other.</p>
    <p><strong>Eligibility Requirements</strong></p>
    <p>Students must have  sophomore status or higher (including graduate students). Students ranking in  the top 15% of the entire undergraduate and graduate classes are invited to  join the society. </p>
    <p><strong>Contact</strong></p>
    <p><a href="mailto:[email protected]">David Lunt</a> or <a href="mailto:[email protected]">Lindsay Fullerton</a></p>
</div>
</li>
<li><a class="categoryheader" href="#">National Society of Collegiate Scholars </a>
<div>
    <p...

CSS

.arrowlistmenu .menuheader {
    background: url("http://suu.edu/uc/images/titlebar.png") repeat-x scroll left center black;
    color: white;
    cursor: pointer;
    font: bold 14px Arial;
    margin-bottom: 10px;
    padding: 4px 0 4px 10px !important;
    text-transform: uppercase;
}
.arrowlistmenu .openheader {
    background-image: url("http://suu.edu/uc/images/titlebar-active.png");
}
.arrowlistmenu ul.categoryitems li  a.categoryheader {
    background: url("http://suu.edu/uc/images/arrow-bullet.png") no-repeat scroll left center transparent;
    border-bottom: 1px solid #DADADA;
    color: #A70303;
    display: block;
    font-size: 90%;
    font-weight: bold;
    padding: 2px 0 2px 19px;
    text-decoration: none;
}
.arrowlistmenu ul.categoryitems li a.openlink {
    background: url("http://suu.edu/uc/images/arrow-bullet-down.png") no-repeat scroll left center transparent;
}
.arrowlistmenu ul.categoryitems {
    list-style-type: none;
    display: none; 
    overflow: hidden;
    position: relative !important;
}
.arrowlistmenu ul li div{
    display: none;  
    overflow: hidden;
    position: relative !important;
}

JavaScript

$('.arrowlistmenu .categoryitems:eq(0)').show();
$('.arrowlistmenu .menuheader').click(function(){
    $('.openheader').not(this).removeClass('openheader');
    $(this).addClass('openheader');
    var currentCategoryItems = $(this).next();
    $('.categoryitems').not(currentCategoryItems).slideUp();
    currentCategoryItems.slideDown();
});
$('.arrowlistmenu ul.categoryitems li a.categoryheader').click(function(event){
    event.preventDefault();
    $('.openlink').not(this).removeClass('openlink');
    $(this).addClass('openlink');
    var currentCategoryItem = $(this).next();
    $('.arrowlistmenu .categoryitems li div').not(currentCategoryItem).slideUp();
    currentCategoryItem.slideDown();
});