JSFiddle - React, Tailwind, and code Playground

by lilysirius

HTML

<div class="head"><span class="cyrl">ав</span></div><hr><div class="entry"><span class="word-struct">ав</span>   <span class="circle">⬤◯◯</span> <span class="pos">баймж</span> <span class="gloss">хүч нэмэх утга илтгэнэ, ~ адил</span></div><div class="entry"><span class="word-struct">ав</span>   <span class="circle">⬤◯◯</span> <span class="pos">тэ.н</span> <span class="gloss">~ зан: гэнэт гаргах муу ааш</span></div><div class="entry"><span class="word-struct">ав</span>  <span class="cat">I.1.1</span> <span class="circle">⬤⬤◯</span> <span class="pos">ж.н</span> <span class="gloss">хоморголон гөрөөлөхүй, ан ~</span></div><div class="entry"><span class="word-struct">ав</span>  <span class="cat">II.5.1</span> <span class="circle">⬤⬤⬤</span> <span class="pos">үй.ү</span> <span class="gloss">эхнэр ~ , чийг ~, өс ~, хэл ~</span></div>

<section class="accordion">
  <input type="checkbox" name="collapse" id="handle1" checked="checked">
  <h2 class="handle">
    <label for="handle1">Захирах хүсэх</label>
  </h2>
  <div class="content">
  <dt><span class="subhead">авсугай</span> <span class="circle">⬤⬤◯</span> <span class="root-struct">(I биеэр төгсгөх) даалган захирах</span></dt>
  </div>
</section>

CSS

.head {font-size: 120%; font-weight: bold;}
.word-struct {font-size: 110%; font-weight: bold;}
.root-struct {font-style: italic; margin: 0 5px 0 5px; color: #5a1216;}
.cat {border: solid 1px darkblue; color: darkblue;}
.circle {color: #ee3f4d; font-size: 80%; vertical-align: 20%;}
.pos {font-style: italic;}
.pos::before {content: "[";}
.pos::after {content: "]";}
.gloss {margin-left: 5px;}

/* CSS for the main interaction */
.accordion {margin-top: 0.5em;}
.accordion > input[type="checkbox"] {
  position: absolute;
  left: -100vw;
}

.accordion .content {
  overflow-y: hidden;
  height: 0;
  transition: height 0.3s ease;
}

.accordion > input[type="checkbox"]:checked ~ .content {
  height: auto; overflow: visible;}

.accordion label {display: block;}

/* Styling */
.accordion {margin-bottom: 3px;}

.accordion > input[type="checkbox"]:checked ~ .content {
  padding: 15px;
  border: 1px solid #e8e8e8;
  border-top: 0;
}

.accordion .handle {margin: 0; font-size: 90%; line-height: 1em;}

.accordion label {
  color: #333;
  cursor: pointer;
  font-weight: normal;
  padding: 5px 0 5px 0;
  background: #e8e8e8;
  font-size: 90%;
}

.accordion label:hover,
.accordion label:focus {
  background: #d8d8d8;
}

.accordion .handle label:before {
  content: "➤";
  display: inline-block;
  margin-right: 5px;
  font-size: 90%;
  vertical-align: middle;
}

.accordion > input[type="checkbox"]:checked ~ .handle label:before {
  content: "⮟";
}