<div lang="en">
      <h1>Toggle Tabs</h1>
      <div class="buttonTabs">
        <button class="active-btn">Egypt</button>
        <button>Minya</button>
        <button>Cairo</button>
      </div>
      <div class="articleParent">
        <article class="funfacts active-article">
          <h2>4 Fun Facts about "Egypt"</h2>
          <ol>
            <li>Hello Bro this a fun facts about Egypt 💝💘</li>
            <li>Hello Bro this a fun facts about Egypt 💝💘</li>
            <li>Hello Bro this a fun facts about Egypt 💝💘</li>
            <li>Hello Bro this a fun facts about Egypt 💝💘</li>
          </ol>
        </article>

        <article class="funfacts">
          <h2>4 Fun Facts about "Minya"</h2>
          <ol>
            <li>Hello Bro this a fun facts about Egypt 💝💘</li>
            <li>Hello Bro this a fun facts about Egypt 💝💘</li>
          </ol>
        </article>

        <article class="funfacts">
          <h2>4 Fun Facts about "Cairo"</h2>
          <ol>
            <li>Hello Bro this a fun facts about Egypt 💝💘</li>
            <li>Hello Bro this a fun facts about Egypt 💝💘</li>
            <li>Hello Bro this a fun facts about Egypt 💝💘</li>
          </ol>
        </article>
    </div>
</div>

div(lang='en')
  .buttonTabs
    button.active-btn REKO
    button Egypt
    button USA
  .articleParent
    article.funfacts.active-article
      h2 4 Fun Facts about "Reko"
      ol
        li Hello Bro this a fun facts about Reko 💝💘
        li Hello Bro this a fun facts about Reko 💝💘
        li Hello Bro this a fun facts about Reko 💝💘
        li Hello Bro this a fun facts about Reko 💝💘
    article.funfacts
      h2 4 Fun Facts about "Egypt"
      ol
        li Hello Bro this a fun facts about Egypt 💝💘
        li Hello Bro this a fun facts about Egypt 💝💘
    article.funfacts
      h2 4 Fun Facts about "USA"
      ol
        li Hello Bro this a fun facts about USA 💝💘
        li Hello Bro this a fun facts about USA 💝💘
        li Hello Bro this a fun facts about USA 💝💘

.buttonTabs {
  margin-top: 30px;
  margin-bottom: 20px;
}
.buttonTabs *,
.btn1 {
  all: unset;
  margin: 0.5rem;
  color: #3d4a59;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  border: 1px solid #33557c;
  padding: 0.375rem 0.75rem;
  font-size: 1.3rem;
  line-height: 1.5;
  border-radius: 0.3rem;
  transition: all 0.2s;
  font-family: sans-serif;
  box-shadow: 0 0 0 #9e8d96, 0 0 10px #aa9ca3, 0 0 0 #ac9ea5;
  opacity: 0.7;
}
.active-btn {
  background-color: rgb(38, 107, 187);
  color: #fff;
  font-weight: bold;
  opacity: 1;
}
.buttonTabs *:hover,
.btn1:hover {
  background-color: rgb(38, 107, 187);
  color: #fff;
  font-size: 1.4rem;
  opacity: 1;
}
.dark .buttonTabs * {
  box-shadow: 0 0 0 #9e4673, 0 0 10px #9e4673, 0 0 0 #9e4673;
  border: 1px solid #fff;
  color: #fff;
}
.dark .active-btn {
  background-color: #fc4364;
  color: #fff;
}
.dark .buttonTabs *:hover {
  background-color: #fc4364;
  opacity: 1;
}
.funfacts h2 {
  color: royalblue;
  font-size: 1.6rem;
  margin-bottom: 20px;
}
.funfacts ol {
  width: fit-content;
  margin: auto;
  line-height: 40px;
}
.dark .funfacts h2 {
  color: #e05d75;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
.funfacts {
  opacity: 0;
}
.active-article {
  opacity: 1 !important;
  z-index: 2;
  transition: 1s all;
}

/* list style */
ol li {
  list-style: none;
}
ol {
  counter-reset: plusone;
  padding: 0;
}
ol li::before {
  counter-increment: plusone;
  content: counter(plusone);
  background-color: #fc4364;
  padding: 0.1rem 0.45rem;
  color: #fff;
  border-radius: 0.5rem;
  margin: 0.5rem;
  font-size: 1.2rem;
  box-shadow: 0 7px 93px 0 rgba(255, 131, 131, 0.47);
}
.articleParent {
  position: relative;
  height: 250px;
}
.funfacts {
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}

const buttonTabs = document.querySelectorAll(".buttonTabs button");
const articleParent = document.querySelectorAll(".articleParent article");
document
  .querySelector(".articleParent")
  .setAttribute("style", `height:${articleParent[0].scrollHeight}px;`);
buttonTabs.forEach((item, index) => {
  item.addEventListener("click", () => {
    item.parentElement
      .getElementsByClassName("active-btn")[0]
      .classList.remove("active-btn");
    item.classList.add("active-btn");
    document
      .getElementsByClassName("active-article")[0]
      .classList.remove("active-article");
    articleParent[index].classList.add("active-article");
    document
      .querySelector(".articleParent")
      .setAttribute("style", `height:${articleParent[index].scrollHeight}px;`);
  });
});