JSFiddle - React, Tailwind, and code Playground

by rome_margo

HTML

<button class="toggle-return">
		RETOUR
		<div class="vertical-line"></div>
</button>

<button class="toggle-read-more">
		LIRE LA SUITE
		<div class="vertical-line"></div>
</button>

<div class="content">
  CONTENCT
</div>

SCSS

.toggle-return {
  width: 100%;
  height: 40px;
  background-color: white;
  border: none;
  font-weight: bold;
  color: black;
  font-size: 10px;
  text-align: center;
  margin-bottom: 10px; 
  display:none;
  
  .vertical-line {
    border: 1px solid black;
    height: 22px;
    width: 1px;
    margin: 6px auto auto;
  }
}

.toggle-read-more {
  width: 100%;
  height: 40px;
  background-color: white;
  border: none;
  font-weight: bold;
  color: black;
  font-size: 10px;
  text-align: center;

  .vertical-line {
    border: 1px solid black;
    height: 22px;
    width: 1px;
    margin: 6px auto auto;
  }
}

.content {
  background-color: tomato;
  border: 1px solid red;
  margin-top: 20px;
  text-align: center;
  height: 200px;
  display: none;
}

JavaScript

$(document).ready(function() {
   $(".toggle-read-more").click(function() {
     $(".content").show(500);
     $(".toggle-return").show();
     $(".toggle-read-more").hide();
   });

   $(".toggle-return").click(function() {
     $(".content").hide(500);
     $(".toggle-return").hide();
     $(".toggle-read-more").show();
   });
 });