JSFiddle - React, Tailwind, and code Playground

by Lord_Breadwellington

HTML

<div>
  <div class="flex-separator">
    <h1 style="text-align: center;">Events</h1>
  </div>
  <div class="flex-container">
    <div style="background-color: red;" class="item">
    </div>
    <div style="background-color: blue;" class="item">

    </div>
    <div style="background-color: green;" class="item">

    </div>
    <div style="background-color: purple;" class="item">

    </div>
    <div style="background-color: orange;" class="item">

    </div>
    <div style="background-color: olivedrab;" class="item">

    </div>
    <div style="background-color: whitesmoke;" class="item">

    </div>
    <div style="background-color: khaki;" class="item">

    </div>
    <div style="background-color: royalblue;" class="item">

    </div>
  </div>
</div>

CSS

* {
    box-sizing: border-box;
}

.flex-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    flex-basis: auto;
    flex-grow: 1;
    flex-shrink: 0;
    align-items: center;
}

.flex-separator {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    height: 270px;
    width: 100%;
    background-color: brown;
    margin-bottom: 20px;   
}

.item {
    width: 500px;
    height: 500px;
    margin-right: 20px;
    margin-bottom: 20px;
    transition: all 1s;
    transition-timing-function: ease-out;
    flex-basis: auto;
}

.grow {
    width: 100%;
    height: 100vh;
}

.collapse {
    display: none;
}

JavaScript

/*Bellow I include three different solutions to the problem
the first uses a checker so this executes more than once
the second just compresses the first one by removing two of the iterations (functions)
the third uses the toggleClass method to do the same operation as the examples above but in alot less code

$(".item").on("click", function() {
    if ($(this).hasClass("grow")) {
      $(this).removeClass("grow");
      $(".item").not(this).each(function() {
        $(this).removeClass("collapse");
      });
    } else {
      $(this).addClass("grow");
      $(".item").not(this).each(function() {
          $(this).addClass("collapse");
      });
    }
})

$(".item").on("click", function() {
    if ($(this).hasClass("grow")) {
      $(this).removeClass("grow");
      $(".item").not(this).removeClass("collapse");
    } else {
      $(this).addClass("grow");
      $(".item").not(this).addClass("collapse");
    }
})
*/

$(".item").on("click", function() {
    $(this).toggleClass("grow");
    $(".item").not(this).toggleClass("collapse");
});