JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<div id="cleaning_card_1" class="cleaning_card">

  <div class="cleaning_card_right">

    <div class="cleaning_card_right_content">

      <div class="cleaning_card_right_content_item">
        <div class="cleaning_card_right_category"> Standard </div>
        <div class="cleaning_card_right_value"> 1 </div>
      </div>

      <div class="cleaning_card_right_content_item">
        <div class="cleaning_card_right_category"> Junior Suite </div>
        <div class="cleaning_card_right_value"> 2 </div>
      </div>
      <div class="cleaning_card_right_content_item">
        <div class="cleaning_card_right_category"> Lux </div>
        <div class="cleaning_card_right_value"> 3 </div>
      </div>

    </div>

  </div>

</div>

<div id="cleaning_card_2" class="cleaning_card">

  <div class="cleaning_card_right">

    <div class="cleaning_card_right_content">

      <div class="cleaning_card_right_content_item">
        <div class="cleaning_card_right_category"> Standard </div>
        <div class="cleaning_card_right_value"> 1 </div>
      </div>

      <div class="cleaning_card_right_content_item">
        <div class="cleaning_card_right_category"> Junior Suite </div>
        <div class="cleaning_card_right_value"> 2 </div>
      </div>
      <div class="cleaning_card_right_content_item">
        <div class="cleaning_card_right_category"> Lux </div>
        <div class="cleaning_card_right_value"> 3 </div>
      </div>

    </div>

  </div>

</div>

<div id="cleaning_card_3" class="cleaning_card">

  <div class="cleaning_card_right">

    <div class="cleaning_card_right_content">

      <div class="cleaning_card_right_content_item">
        <div class="cleaning_card_right_category"> Standard </div>
        <div class="cleaning_card_right_value"> 1 </div>
      </div>

      <div class="cleaning_card_right_content_item">
        <div class="cleaning_card_right_category"> Junior Suite </div>
        <div class="cleaning_card_right_value"> 2 </div>
      </div>
     ...

CSS

BODY {
  padding: 15px;
  margin: 0;
}

.cleaning_card {
  position: relative;
  width: 70%;
  border: 1px solid black;
  height: 80px;
  font-size: 15px;
  overflow: visible;
  margin-bottom: 15px;
}

.cleaning_card:hover {
  cursor: pointer;
}

.cleaning_card_right {
  position: absolute;
  width: 25%;
  height: 0;
  background-color: white;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
  overflow: hidden;
  top: 100%;
  right: -1px;
}

.cleaning_card_right_content {
  position: relative;
  padding: 5px;
  overflow: hidden;
}

.cleaning_card_right_content_item {
  position: relative;
  background-color: cornsilk;
}

JavaScript

// maximize cleaning card
function maximizeCleaningCard() {

  // store current clicked cleaning card variable for later use in animate
  let cleaningCard = this;
  
  // set cleaning card right element variable
  let cleaningCardRight = $('.cleaning_card_right', cleaningCard);
  
  // check we actually have a cleaning card right
  if($(cleaningCardRight).length) {
    
    // set the cleaning card right content variable
    let cleaningCardRightContent = $('.cleaning_card_right_content', cleaningCardRight);
  
    // if cleaning card has maximized class
    if($(cleaningCard).hasClass('maximized')) {

      // remove the maximized class
      $(cleaningCard).removeClass('maximized');

      // animate cleaning card right first to reverse sequence
      $(cleaningCardRight).animate({
          height: '0px'
        }, 500, function() {

          // when cleaning card right is fully closed
          // animate cleaning card to finish the closing sequence
          $(cleaningCard).animate({
            width: '70%'
          }, 500 );

        });

    // else if cleaning card does not have maximized class
    } else {
      
      // add the maximized class
      $(cleaningCard).addClass('maximized');
      
      // animate cleaning card width to 100%
      $(cleaningCard).animate({
        width: '100%'
      }, 500, function() {
      
        // when cleaning card is fully open
        // animate cleaning card height to the cleaning card right content
        $(cleaningCardRight).animate({
          height: $(cleaningCardRightContent).outerHeight()
        }, 500 );

      });

    }
  
  }
  
}

// when cleaning card is clicked
$(document).on('click','.cleaning_card', maximizeCleaningCard );