JSFiddle - React, Tailwind, and code Playground

HTML

<body>

        

    

<div id="main">
    
<div id="thumbwrapper">
    
    <div id="thumb1" class="thumb">
    
        <a href="#subwork" id="1" class="hide"><img src="images/smoke1.jpg" width="160" height="115" alt="Smoke1"></a>
        <a href="#subabout" id="2" class="hide"><img src="images/smoke1.jpg" width="160" height="115" alt="Smoke1"></a>
        <a href="#subwork" id="3" class="hide"><img src="images/smoke1.jpg" width="160" height="115" alt="Smoke1"></a>
        <a href="#subwork" id="4" class="hide"><img src="images/smoke1.jpg" width="160" height="115" alt="Smoke1"></a>
    </div>
    
    <div id="thumb2" class="thumb">
    
        <a href="#subwork" id="11" class="hide"><img src="images/gramps.jpg" width="160" height="115" alt="Smoke1"></a>
        <a href="#subabout" id="12" class="hide"><img src="images/gramps.jpg" width="160" height="115" alt="Smoke1"></a>
        <a href="#subwork" id="13" class="hide"><img src="images/gramps.jpg" width="160" height="115" alt="Smoke1"></a>
        <a href="#subwork" id="14" class="hide"><img src="images/gramps.jpg" width="160" height="115" alt="Smoke1"></a>
    </div>
    
    <div id="thumb3" class="thumb">
    
        <a href="#subwork" id="21" class="hide"><img src="images/lizard.jpg" width="160" height="115" alt="Smoke1"></a>
        <a href="#subabout" id="22" class="hide"><img src="images/lizard.jpg" width="160" height="115" alt="Smoke1"></a>
        <a href="#subwork" id="23" class="hide"><img src="images/lizard.jpg" width="160" height="115" alt="Smoke1"></a>
        <a href="#subwork" id="24" class="hide"><img src="images/lizard.jpg" width="160" height="115" alt="Smoke1"></a>
    </div>
    
    <div id="thumb4" class="thumb">
    <ul>
        <li>
        <a href="#subwork" id="31" class="hide"><img src="images/stuff.jpg" width="160" height="115" alt="Smoke1"></a>
        </li>
        
        <li>
        <a href="#subabout" id="32" class="hide"><img src="images/stuff.jpg" width="160"...

CSS

* { margin: 0; }
        
        html {
            overflow-y: scroll;
        }
        

        
        
        a{
            text-decoration:none;
            color: rgb(0,51,51);
        
            }
            
                a:link {color: rgb(0,51,51); }
                a:visited { }
                a:hover { color: rgb(204,51,51);}
                a:active { color: rgb(204,51,51);}
        
    

        body{
            margin:0;
            padding:0;
            background-color: rgb(0,51,51);
            

        }
        
        header{
                text-align: center;
                background-color:white;
                width:75em;
                margin:0px auto;
    
                padding-top:1.5em;    
                position:relative;
            
            
                
            }
        #header{
            width:100%;
            min-width:75em;
            
        }
            

        
        

                    #tabs ul{

                    
                        margin-right:14.5em;
                        


                    }

                    #tabs li{
                    
                        list-style: none;
                        margin-left:.25em;
                        
                    }

                #tabs li img{
                    margin-top: .5em;
                }

            #tabs{

                
            
    
                
                    padding-top:.3em;
                    margin:0px;
                    
                
                    
            
                
                }
                
                #navwidth{
                    width:75em;
                
                    margin:0px auto;
    
                
                    background-position: 0px .5em;
                    height:3.3em;
                    
                
                    position: relative;
                    
                    
     ...

JavaScript

$(function(){
        $('.thumb').hide();

        $('.subnav').click(function(){
            var $menuelement = $('.thumb').eq($(this).closest("li").index());//find the matching nth element in the menu
            if($menuelement.hasClass('active')){//if clicked element is already expanded

                $menuelement.removeClass('active').slideUp();//remove the active class and hide it

            } else {//otherwise,clicked element is not already expanded...

            if ($('.active').length>0) {//...but another element is expanded
                $('.active').removeClass('active').slideUp( function(){
                    $menuelement.addClass('active').slideDown();//add the active class and show it
                });

                } else {//another element is not expanded

                $menuelement.addClass('active').slideDown();//add the active class and show it

                }
            }
        });

        });

        $(document).ready(function(){

        $(".thumb").hide();

        $(".hide").show();

        $(".hide").click(function(){

        $(".thumb").hide(500);
        });

        });