JSFiddle - React, Tailwind, and code Playground

by John Schulz

HTML

<header>Today</header>
<section>
  <ul class="timeline">
    <li class="timeline-item">
      <div class="date-of-event">10:30am</div>
      <div class="user-event">
        <div>Class Ends</div>
      </div>
    </li>
    <li class="timeline-item">
      <div class="date-of-event">10:30am</div>
      <div class="user-event task">
        <div class="task-detail hide-assigned-task">Tabs 1</div>
      </div>
    </li>

    <li class="timeline-item">
      <div class="date-of-event">10:30am</div>
      <div class="user-event task">
        <div class="task-detail show-assigned-task">Tabs 2</div>
      </div>
    </li>

    <li class="timeline-item">
      <div class="date-of-event">10:30am</div>
      <div class="user-event task">
        <div class="task-detail hide-assigned-task">Tabs 3</div>
      </div>
    </li>

    <li class="timeline-item">
      <div class="date-of-event">10:30am</div>
      <div class="user-event">Class Starts</div>
    </li>
  </ul>
</section>

CSS

body {
  background-color: #f1f1f1;
}

.timeline {
  list-style: none;
}

.timeline-item {
  margin-bottom: 75px;
}

.hide-assigned-task {
  display: none;
}

.show-assigned-task {
  background-color: white;
}

@media ( min-width: 10px) {
  .timeline-item {
    overflow: hidden;
    margin: 0;
    position: relative;
  }
  .date-of-event {
    width: 110px;
    float: left;
  }
  .user-event {
    width: 75%;
    height: 95px;
    float: left;
    border-left: 3px #e5e5d1 solid;
    padding-left: 30px;
  }
  .user-event:before {
    content: '';
    width: 12px;
    height: 12px;
    background: black;
    position: absolute;
    left: 106px;
    border-radius: 100%;
  }
}

JavaScript

(function addActiveTaskBehavior() {

	var tasksList = document.querySelectorAll('.task')
  Array.prototype.slice.call(tasksList).forEach(taskEl => 
  	taskEl.addEventListener("click", openActivity)
  );

  function openActivity(event) {
    var CSS_HIDE = "hide-assigned-task";
    var CSS_SHOW = "show-assigned-task";

		var detailsList = document.querySelectorAll(".task-detail");
		Array.prototype.slice.call(detailsList).forEach(el => {      
    	if (el === event.target.firstElementChild) {
        el.classList.remove(CSS_HIDE);
        el.classList.add(CSS_SHOW);
      } else {
      	el.classList.remove(CSS_SHOW);
        el.classList.add(CSS_HIDE);
      }
    })
  }
})();