Tryit Editor - Free-Learn

<!DOCTYPE html>
<html>
<head>
<style>

body{
 background-color: #f2f2f2;
 font-family:tahoma;
}

.MyText{
 background-color: #fff;
 text-align:center;
 padding:10px;
 margin-bottom:40px;
}

.Porsesh{
 background-color: #1d2a35;
 color: #fff;
 cursor: pointer;
 padding: 18px;
 width: 100%;
 border: none;
 text-align: right;
 outline: none;
 font-size: 15px;
 transition: 0.4s;
}

.active,.Porsesh:hover{
 background-color: red;
}

.Box-Pasokh{
 direction:rtl;
 padding: 0 18px;
 background-color: white;
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.2s ease-out;
 box-shadow: 2px 5px 30px rgba(0,0,0,.1);
}

</style>
</head>
<body>

<div class="MyText">
<h2>پرسش و پاسخ</h2>
<p>سایت آموزشی فری لرن</p>
</div>

<button class="Porsesh">پرسش اول</button>
<div class="Box-Pasokh">
<p>پاسخ در اینجا قرار میگیرد</p>
</div>

<button class="Porsesh">پرسش دوم</button>
<div class="Box-Pasokh">
<p>پاسخ در اینجا قرار میگیرد</p>
</div>

<button class="Porsesh">پرسش سوم</button>
<div class="Box-Pasokh">
<p>پاسخ در اینجا قرار میگیرد</p>
</div>

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
</script>

</body>
</html>