JSFiddle - React, Tailwind, and code Playground

by jackdent

HTML

<div>
    <span>QUALIFICATION</span>
    <ul>
        <li>AS</li>
        <li>A2</li>
        <li>GCSE</li>
    </ul>
</div>

<div>
    <span>EXAM BOARD</span>
    <ul>
        <li>Please select</li>
    </ul>
</div>

<div>
    <span>SUBJECT</span>
    <ul>
        <li>Please select</li>
    </ul>
</div>

<div>
    <span>DATE</span>
    <ul>
        <li>Please select</li>
    </ul>
</div>

<div>
    <span>DOCUMENT</span>
    <ul>
        <li>Please select</li>
    </ul>
</div>

CSS

div {
    cursor: pointer;
    font-family:sans-serif;
    display: block;
    width: 344px;
    margin: 20px;
}
span {
    background-color: #0F946A;
    float: left;
    padding: 8px;
    height: 1em;
    color: white;
    font-weight: bold;
}
span::before {
    content: '▼';
    position: absolute;
    text-align: right;
    font-size: 8px;
    width: 326px;
    padding-top: 4px;
    color: #555555;
}
.spanExpanded::before {
    content: '▲';
    color: #0F946A;
}
li:first-child {
    font-weight: bold;
}
ul {
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 4px;
    padding-bottom: 12px;
    background-color: #EFEFEF;
    height: 1em;
    overflow: hidden;
    line-height: 1.7em;
    color: #555555;
}
.expanded {
    padding-top: 3px;
    padding-left: 7px;
    padding-bottom: 4px;
    height: auto;
    overflow: auto;
    border: 1px solid #0F946A;
}

JavaScript

$('span').click(function() {
    $(this).next().toggleClass('expanded');
    $(this).toggleClass('spanExpanded');

});

$('ul').click(function() {
    $(this).toggleClass('expanded');
    $(this).siblings().toggleClass('spanExpanded');
});

$(document).on('click','li:not(:first-child)',function() {
    var clickedLi = this;
    $(this).parent().prepend(clickedLi);
    var selectedLi = $(this).text();
    alert(selectedLi);
    $(this).parent().parent().nextAll().children('ul').empty().append('<li>Please select</li>');
    
    //ajax call
    var returnedData = "<li>Dataset1</li><li>Dataset2</li><li>Dataset3</li>";
    
    //populate next with returned data
    $(this).parent().parent().next().children('ul').append(returnedData);
});