JSFiddle - React, Tailwind, and code Playground

by Joshua Petersen

HTML

<a class="pos" href="#" data-position="1">Your Position 1</a>
<a class="pos" href="#" data-position="3">Your Position 2</a>
<br />

<div id="title"><em>Lessons</em></div>
<div id="lesson1" class="lesson" data-lesson="1 2">Lesson 1</div>
<div id="lesson2" class="lesson" data-lesson="1 2 3">Lesson 2</div>
<div id="lesson3" class="lesson" data-lesson="1 2 3 4">Lesson 3</div>
<div id="lesson4" class="lesson" data-lesson="1 2 3 4 5">Lesson 4</div>

CSS

.lesson {display:none;}

JavaScript

function chooseLesson() {
    var getPos = $(this).attr("data-position");
    $("div[data-lesson~='"+ getPos +"']").toggle();
 }

$('a.pos').on('click', chooseLesson);