JSFiddle - React, Tailwind, and code Playground
HTML
<div id="wrap">
<ul id="divtoggle">
<li><a id="togglediv1" href="#">Web Design & 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 & 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...
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;
}
JavaScript
$("#divtoggle").delegate("a", "click", function (e) {
var toggled = ($(this).prop("id"));
$("div#wrap").prop("class", toggled);
});
$('li').click(function() {
$(this).siblings(':visible').first().hide();
});