JSFiddle - React, Tailwind, and code Playground

by kenyboy9

HTML

<div class="leaders">

  <div class="colum-left">

  </div>
  <div class="colum-right">

  </div>
  <div class="colum-left">

  </div>
  <div class="colum-right">

  </div>
</div>

<div class="leaders-hidden">

  <div class="colum-left">

  </div>
  <div class="colum-right">

  </div>

</div>

<div class="leaders-hidden-2">

  <div class="colum-left">

  </div>
  <div class="colum-right">

  </div>

</div>

<div class="leaders-hidden-3">

  <div class="colum-left">

  </div>
  <div class="colum-right">

  </div>

</div>


<div class="leaders-hidden-4">

  <div class="colum-left">

  </div>
  <div class="colum-right">

  </div>

</div>

<div class="leaders-hidden-5">

  <div class="colum-left">

  </div>
  <div class="colum-right">

  </div>

</div>


<div class="leaders-hidden-6">

  <div class="colum-left">

  </div>
  <div class="colum-right">

  </div>

</div>

<div class="leaders-hidden-7">

  <div class="colum-left">

  </div>
  <div class="colum-right">

  </div>

</div>

<div class="leaders-hidden-8">

  <div class="colum-left">

  </div>
  <div class="colum-right">

  </div>

</div>

<div class="leaders-hidden-9">

  <div class="colum-left">

  </div>
  <div class="colum-right">

  </div>

</div>

<div class="leaders-hidden-10">

  <div class="colum-left">

  </div>
  <div class="colum-right">

  </div>

</div>

<div class="leaders-hidden-11">

  <div class="colum-left">

  </div>
  <div class="colum-right">

  </div>

</div>

<div class="leaders-hidden-12">

  <div class="colum-left">

  </div>
  <div class="colum-right">

  </div>

</div>


<center><span style="font-size: 18pt; color: #017dc5;"><a id="showmoreleaders" class="read_btw" style="color: #017dc5;">SEE MORE</a></span></center>

CSS

.read_btw {
  border: 1px solid #017dc5;
  margin-top: 10px;
  padding: 15px;
  display: inline-block;
}

.colum-left {
  float: left;
  width: 48%;
  border: 1px solid #d9dada;
  margin: 0px;
  border-radius: 6px;
  margin-right: 7.5px;
  margin-bottom: 20px;
  height: 200px;
}

.colum-right {
  float: right;
  width: 48%;
  border: 1px solid #d9dada;
  margin: 0px;
  border-radius: 6px;
  margin-right: 7.5px;
  margin-bottom: 20px;
  height: 200px;
}

.hide{
  display: none;
}

#showmoreleaders{
  cursor: pointer;
}

JavaScript

var count = 0;

$("#showmoreleaders").click(function() {

    count++;

    if (count == 1) {
        $(".leaders-hidden").slideDown("slow", function() {
            // Animation complete.
        });
    }

    if (count == 2) {
        $(".leaders-hidden-2").slideDown("slow", function() {
            // Animation complete.
        });
    }

    if (count == 3) {
        $(".leaders-hidden-3").slideDown("slow", function() {
            // Animation complete.
        });
      
    }
    
     if (count == 4) {
        $(".leaders-hidden-4").slideDown("slow", function() {
            // Animation complete.
        });
    }

    if (count == 5) {
        $(".leaders-hidden-5").slideDown("slow", function() {
            // Animation complete.
        });
    }

    if (count == 6) {
        $(".leaders-hidden-6").slideDown("slow", function() {
            // Animation complete.
        });
      
    }
    
    
        if (count == 7) {
        $(".leaders-hidden-7").slideDown("slow", function() {
            // Animation complete.
        });
    }

    if (count == 8) {
        $(".leaders-hidden-8").slideDown("slow", function() {
            // Animation complete.
        });
    }

    if (count == 9) {
        $(".leaders-hidden-9").slideDown("slow", function() {
            // Animation complete.
        });
      
    }
    
    
        if (count == 10) {
        $(".leaders-hidden-10").slideDown("slow", function() {
            // Animation complete.
        });
    }

    if (count == 11) {
        $(".leaders-hidden-11").slideDown("slow", function() {
            // Animation complete.
        });
    }

    if (count == 12) {
        $(".leaders-hidden-12").slideDown("slow", function() {
            // Animation complete.
             $('#showmoreleaders').html('SEE LESS');
        });
      
    }
     

    if (count == 13) {
        $(".leaders-hidden-12").slideUp("slow", function() {
            // Animation complete.
        });
    }


    if...