JSFiddle - React, Tailwind, and code Playground

by fristyr

HTML

<head>
  <link href="https://fonts.googleapis.com/css?family=Fira+Sans" rel="stylesheet"> 
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<body>
  <main class="accordeon">
    <h1 class="accordeon__title">Acordeon test</h1>
    <div class="accordeon-box">
          <button class="acordeon-block__butt">Basics of languages and how to speak it corectly <i class="fas fa-caret-up"></i>       </button>
    <div class="acordeon-block">
      <div class="acordeon-block__content content-block">
        <a href="#" class="content-block__link">Lexical-structure</a>
        <a href="#" class="content-block__link">Types of data, values and variables</a>
        <a href="#" class="content-block__link">Expression and statements</a>
      </div>
    </div>
    </div>
        <div class="accordeon-box">
          <button   class="acordeon-block__butt">Basics of languages and how to speak it corectly <i class="fas fa-caret-up"></i>       </button>
    <div  class="acordeon-block acordeon-block_hide ">
      <div class="acordeon-block__content content-block">
        <a href="#" class="content-block__link">Lexical-structure</a>
        <a href="#" class="content-block__link">Types of data, values and variables</a>
        <a href="#" class="content-block__link">Expression and statements</a>
      </div>
    </div>
    </div>
    
  </main>
</body>

 <!--  <i class="fas fa-caret-down"></i>  -->

CSS

body {
  background-color: grey;
}

a {
  text-decoration: none;
  color: #4f4f4f;
  padding-left: 15px;
}

a:not(:last-child) {
  padding-bottom: 15px;
}

.accordeon {
  display: flex;
  align-items: center;
  flex-direction: column;
  max-width: 1280px;
  height: 380px;
  background-color: white;
  border: 1px solid black;
  margin: 0 auto;
}

.acordeon-block {
  display: none;
  padding-bottom: 25px;
  border-radius: 15px;
  background: #E7E7E7;
  max-width: 455px;
  margin-top: -40px;
}



.acordeon-block__butt {
  width: 100%;
  background: #696666;
  border: none;
  border-radius: 15px;
  padding: 15px;
  color: #ffffff;
}

.fa-caret-up {
  padding-left: 30px;
}

.content-block {
  padding-top: 70px;
  display: flex;
  flex-direction: column;
}
.acordeon-block_show {
  display: block;
}

JavaScript

let accBlock = document.getElementsByClassName('acordeon-block')
let butt = document.getElementsByClassName('acordeon-block__butt')


for( let i = 0; i<butt.length; i++ ) {
	butt[i].addEventListener('click' , function test (e) {
  	accBlock.classList.add('acordeon-block_hide')
		console.log('+')
  })
}