JSFiddle - React, Tailwind, and code Playground

by calder12

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
<div class="container">
  <div class="row">
    <div class="col-md-4 card-container" id="first">
      <div class="card">
        <h1 class="h4">Card 1</h1>
        <button class="btn" data-target="first" data-action="open">View Product</button>
      <p class="additional-info">
      Bacon ipsum dolor amet shank pork chop cupim andouille pastrami brisket beef ribs frankfurter tri-tip. Corned beef sirloin fatback tongue pancetta bresaola tri-tip ground round turducken andouille beef ribs capicola jowl brisket burgdoggen. Pancetta landjaeger hamburger jerky venison tri-tip. Prosciutto filet mignon pastrami pork belly. Bresaola frankfurter pork chop, shoulder t-bone fatback pork capicola venison shank.
      </p>
      </div>
    </div>
    <div class="col-md-4 card-container" id="second">
      <div class="card">
        <h1 class="h4">Card 2</h1>
        <button class="btn" data-target="second" data-action="open">View Product</button>
      <p class="additional-info">
      Bacon ipsum dolor amet shank pork chop cupim andouille pastrami brisket beef ribs frankfurter tri-tip. Corned beef sirloin fatback tongue pancetta bresaola tri-tip ground round turducken andouille beef ribs capicola jowl brisket burgdoggen. Pancetta landjaeger hamburger jerky venison tri-tip. Prosciutto filet mignon pastrami pork belly. Bresaola frankfurter pork chop, shoulder t-bone fatback pork capicola venison shank.
      </p>
      </div>
    </div>
    <div class="col-md-4 card-container" id="third">
      <div class="card">
        <h1 class="h4">Card 3</h1>
        <button class="btn" data-target="third" data-action="open">View Product</button>
      <p class="additional-info">
      Bacon ipsum dolor amet shank pork chop cupim andouille pastrami brisket beef ribs frankfurter tri-tip. Corned beef sirloin fatback tongue pancetta bresaola tri-tip ground round turducken...

CSS

.card {
  text-align:center;
  padding: 10px;
}

.additional-info {
  display:none;
}

JavaScript

$(".btn").on("click", function(){
	var target = $(this).data("target");
  var action = $(this).data("action");
  $(".card-container").each(function() {
  	//if($(this).attr("id") != target) {
    	$(this).fadeOut()
    //}
  })
  
  if(action == "open") {
  	expandCard(target);
  } else {
  	closeCard(target);
  }
})

function expandCard(target) {

  $("#" + target)
  	.css({"width" : "33.33333%"})
    .removeClass("col-md-4")
    .addClass("col-md-12")
    .fadeIn()
    .animate({
    	width: 100 + "%"
    }, 500, function() {
    	$("#" + target).find(".additional-info").slideDown();
    });
    
   $("#" + target).find(".btn").data("action", "close").html("View All");
}
function closeCard(target) {

      $("#" + target).find(".additional-info").slideUp(300, function(){  $("#" + target)
    .addClass("col-md-4")
    .animate({
    	width: 33.333333 + "%"
    }, 300, function() {
      $("#" + target).find(".btn").data("action","open").html("View Product");
    $(".card-container").each(function() {
      //if($(this).attr("id") != target) {
        $(this).fadeIn();
      //}
  })
    });});

   
}