JSFiddle - React, Tailwind, and code Playground

by mrunali tatkundawar

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="linkTeamA linkTeam" href="#"><img class="expandImg" src="assets/images/decision-arrow-ico-v2.png" alt="" aria-hidden="true"><span><strong>Team A</strong><span>(3)</span></span>
</div>

<div class="expandedTeamA collapseContent"><p class="bottomLine">Steves, Peggy</p><p class="bottomLine">Potter, Hazel</p><p class="bottomLine">Stanley, Cassandra</p></div> 

<div class="linkTeamA linkTeam" href="#"><img class="expandImg" src="assets/images/decision-arrow-ico-v2.png" alt="" aria-hidden="true"><span><strong>Team A</strong><span>(3)</span></span>
</div>

<div class="expandedTeamA collapseContent"><p class="bottomLine">Steves, Peggy</p><p class="bottomLine">Potter, Hazel</p><p class="bottomLine">Stanley, Cassandra</p></div>

CSS

.symbol {
    background-image: url("http://jquerymobile.com/test/css/themes/default/images/icons-18-black.png");
height: 18px;
width: 18px;
float: right;    
}

JavaScript

debugger;
var teamsX = $('.linkTeam');
teamsX.click(function() {
debugger;
    var expcol = $(this);
    $(this).nextUntil('.linkTeam').toggle('fast', function() {
        expcol.next('.collapseContent').is(":hidden") ? expcol.find('.symbol').css({
            'background-position': '0 50%'
        }) : expcol.find('.symbol').css({
            'background-position': '-36px 50%'
        });
    });
    expcol.toggleClass("expanded collapsed");
});

teamsX.addClass('expanded').click();