JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<div id="wrap">
    <ul id="divtoggle">
        <li><a id="togglediv1" href="#">Web Design &amp; Build</a>
            
        </li>
        <li><a id="togglediv2" href="#">SEM/SEO</a>
            
        </li>
        <li><a id="togglediv3" href="#">Graphic Design</a>
            
        </li>
        <li><a id="togglediv4" href="#">User Experience Design</a>
            
        </li>
        <li><a id="togglediv5" href="#">Brand Strategy</a>
            
        </li>
        <li><a id="togglediv6" href="#">Digital Prototyping</a>
            
        </li>
        <li><a id="togglediv7" href="#">Marketing</a>
            
        </li>
        <li><a id="togglediv8" href="#">Digital Marketing</a>
            
        </li>
        <li><a id="togglediv9" href="#">Digital Strategy</a>
            
        </li>
        <li><a id="togglediv10" href="#">Digital Consulting</a>
            
        </li>
        <li><a id="togglediv11" href="#">Email Marketing</a>
            
        </li>
        <li><a id="togglediv12" href="#">Pay Per Click</a>
            
        </li>
        <li><a id="togglediv13" href="#">Advertising</a>
            
        </li>
        <li><a id="togglediv14" href="#">Data Analysis</a>
            
        </li>
    </ul>
    <div id="div1" class="content">
        <h3>Web Design &amp; Build</h3>
        
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
        <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
        <p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum....

CSS

#div1, #div2, #div3, #div4, #div5, #div6, #div7, #div8, #div9, #div10, #div11, #div12, #div13, #div14 {
    display:none;
}
.togglediv1 #div1, .togglediv2 #div2, .togglediv3 #div3, .togglediv4 #div4, .togglediv5 #div5, .togglediv6 #div6, .togglediv7 #div7, .togglediv8 #div8, .togglediv9 #div9, .togglediv10 #div10, .togglediv11 #div11, .togglediv12 #div12, .togglediv13 #div13, .togglediv14 #div14 {
    display:block;
}

.active {
    color: red;
}

JavaScript

$("#divtoggle").delegate("a", "click", function (e) {
    var toggled = this.id;
    $("div#wrap").prop("class", toggled);
    $('.active').removeClass('active');
    $(this).addClass('active');
}).find('a').first().click();