JSFiddle - React, Tailwind, and code Playground

by Eugen Sunic

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>

  <body>


    <main class="container">
      <div class="flex-container header ">
        <h2 class="align-left">Stations</h2>
        <h2>Stations</h2>
        <h2>Stations</h2>
      </div>
      <ul id="station-list">
        <li class="flex-container small-box">
          <p>London1</p>
          <p>66,6</p>
          <div class="flex-container small-box content">
            <p>Dummy1</p>
          </div>
        </li>

        <li class="flex-container small-box">
          <p class="align-left">London2</p>
          <p class="align-right">66,6</p>
          <div class="flex-container small-box content">
            <p>Dummy2</p>
          </div>
        </li>

        <li class="flex-container small-box">
          <p class="align-left">London3</p>
          <p class="align-right">66,6</p>
          <div class="flex-container small-box content">
            <p>Dummy3</p>
          </div>
        </li>


        <li class="flex-container small-box">
          <p class="align-left">London4</p>
          <p class="align-right">66,6</p>
          <div class="flex-container small-box content">
            <p>Dummy4</p>
          </div>
        </li>

        <li class="flex-container small-box">
          <p class="align-left">London5</p>
          <p class="align-right">66,6</p>
          <div class="flex-container small-box content">
            <p>Dummy5</p>
          </div>
        </li>

        <li class="flex-container small-box">
          <p class="align-left">London6</p>
          <p class="align-right">66,6</p>
          <div class="flex-container small-box content">
            <p>Dummy5</p>
          </div>
        </li>

        <li class="flex-container">
          <span class="space-taker"></span>
        </li>
      </ul>
    </main>
  </body>

CSS

* {
  box-sizing: border-box;
}

body {
  background-color: #21212b;
  color: white;
  margin: 0px;
}

.container {
  display: flex;
  /* or inline-flex */
  flex-direction: column;
  flex-wrap: nowrap;
  flex: 1 1 auto;
  /* 1 */
  position: relative;
  min-width: 1px;
  max-width: 400px;
  margin: 0 auto;
  z-index: 1;
  width: 100%;
  background-color: #2f2f3a;
  box-shadow: rgba(0, 0, 0, 0.42) 0px 5px 29px -4px;
  border-radius: 10px;
}


p {
  font-size: 2em;
  color: #a2abbd;
}

.flex-container {
  display: flex;
  justify-content: space-between;

}

.header {
  background-color: #edae61;
  padding: 0 25px 0 25px;
}

.small-box {
  margin: 0 25px 0 25px;
  border-bottom: 1px solid #40404a;
}

.flex-container>.space-taker {
  min-height: 60px;
  margin: 0 10px 0 10px;
  background-color: #edae61;
}

ul {
  padding-inline-start: 0;
}

#content,
.content {
  display: none;
}

.content.show {
  display: block;
  /* P.S: Use `!important` if missing `#content` (selector specificity). */
}

JavaScript

const getAllLiElements = document.querySelector('#station-list').children;
for (let i = 0; i < getAllLiElements.length; i++) {
  let element = getAllLiElements[i];
  element.addEventListener('click', () => {
    const dummyText = Array.from(element.children).filter(htmlNode => htmlNode.tagName === 'DIV')[0]
    dummyText.classList.toggle('show')
  })
}