JSFiddle - React, Tailwind, and code Playground

by clairesuzy

HTML

<div class="thework"><a href="#" class="A">A</a> <a href="#" class="B">B</a> <a href="#" class="C">C</a></div>
<div class="work A link1">A1<br />
    <a href="#" class="link1">1</a> <a href="#" class="link2">2</a> <a href="#" class="link3">3</a>
</div>
<div class="work A link2">A2<br />
    <a href="#" class="link1">1</a> <a href="#" class="link2">2</a> <a href="#" class="link3">3</a>
</div>
<div class="work A link3">A3<br />
    <a href="#" class="link1">1</a> <a href="#" class="link2">2</a> <a href="#" class="link3">3</a>
</div>
<div class="work B link1">B1<br />
    <a href="#" class="link1">1</a> <a href="#" class="link2">2</a> <a href="#" class="link3">3</a>
</div>
<div class="work B link2">B2<br />
    <a href="#" class="link1">1</a> <a href="#" class="link2">2</a> <a href="#" class="link3">3</a>
</div>
<div class="work B link3">B3<br />
    <a href="#" class="link1">1</a> <a href="#" class="link2">2</a> <a href="#" class="link3">3</a>
</div>
<div class="work C link1">C1<br />
    <a href="#" class="link1">1</a> <a href="#" class="link2">2</a> <a href="#" class="link3">3</a>
</div>
<div class="work C link2">C2<br />
    <a href="#" class="link1">1</a> <a href="#" class="link2">2</a> <a href="#" class="link3">3</a>
</div>
<div class="work C link3">C3<br />
    <a href="#" class="link1">1</a> <a href="#" class="link2">2</a> <a href="#" class="link3">3</a>
</div>

JavaScript

$('.work').hide();
$(".thework a").click(function() {
    var letter = $(this).attr("class"); // link class is also in work class 
    $(".work").hide(); // hide all work class
    $(".work.link1." + letter).fadeIn(); //show the relevant work class
});


$('.work a').click(function() {
    var pLink = $(this).attr("class"); //gets the link# class
    var pLetter = $(this).parent().attr("class").split(' ')[1]; //gets the relevant letter if letter is 2nd class in array  index 1
    if ($(this).parent().hasClass(pLink)) {
        //do nothing
    } else {

        $(this).parent().hide();
        $("." + pLetter + "." + pLink).fadeIn(); // produces the .letter.link# CSS selector required
    }

    return false;
});