JSFiddle - React, Tailwind, and code Playground

by mrunali tatkundawar

HTML

<div class="linkTeam" href="#">
<i class="fa fa-caret-right"></i><span><strong>Team A</strong><span class="unitno">(3)</span></span></div>
<div class="collapseContent content1"><p class="bottomLine">Steves, Peggy</p><p class="bottomLine">Potter, Hazel</p><p class="bottomLine">Stanley, Cassandra</p></div> 

<div class="linkTeam" href="#">
<i class="fa fa-caret-right"></i><span><strong>Team B</strong><span class="unitno">(3)</span></span></div>                            
<div class="collapseContent"><p class="bottomLine">Steves, Peggy</p><p class="bottomLine">Potter, Hazel</p><p class="bottomLine">Stanley, Cassandra</p></div>

CSS

body{font-family:Arial;}
.header img{position:relative; top:10px;}
.header { font-weight:bold; padding-bottom:10px;cursor:pointer;}
.links {color:#3366CC;cursor:pointer;}
.links:hover {border-bottom:1px solid #3366CC;}

JavaScript

var mImg = "http://cdn1.iconfinder.com/data/icons/fatcow/32/bullet_toggle_minus.png";
var pImg = "http://cdn1.iconfinder.com/data/icons/fatcow/32/bullet_toggle_plus.png";
$(document).ready(function(){
    
    $(".linkTeam").click(function(){
        var currentState = $(this).next(".collapseContent").css("display");
        console.log(currentState);
        if(currentState == "block"){
            $(this).next(".collapseContent").slideUp();
            $(this).children("img").attr("src", pImg)
        }
        else{
            $(this).next(".collapseContent").slideDown();
            $(this).children("img").attr("src", mImg)
        }
    });
});