Post by nnda in Is it possible to close other accordion tabs when one is opened?

Viewing post in Is it possible to close other accordion tabs when one is opened?

For your purpose (three languages on one page), as an alternative approach, may I suggest this:

Languages &nbsp;
<div class="custom-toggles">
  <a name="toggle-a" class="custom-toggle" href="#toggle-a">🇬🇧 English</a>
  <a name="toggle-b" class="custom-toggle" href="#toggle-b">🇮🇩 Indonesia</a>
  <a name="toggle-c" class="custom-toggle" href="#toggle-c">🇯🇵 Japanese</a>
</div>

<br> <hr>

<div class="custom-content-a"> 
  Lorem ipsum (/ˌlɔː.rəm ˈɪp.səm/ LOR-əm IP-səm) is a dummy or placeholder text commonly used in graphic design, publishing, and web development to fill empty spaces in a layout that does not yet have content.
</div>

<div class="custom-content-b">
  Lorem ipsum, atau ringkasnya lipsum, adalah teks standar yang ditempatkan untuk mendemostrasikan elemen grafis atau presentasi visual seperti font, tipografi, dan tata letak. Maksud penggunaan lipsum adalah agar pengamat tidak terlalu berkonsentrasi kepada arti harfiah per kalimat, melainkan lebih kepada elemen desain dari teks yang dipresentasi.
</div>

<div class="custom-content-c">
  Lorem ipsum（ロレム・イプサム、略してリプサム lipsum ともいう）とは、出版、ウェブデザイン、グラフィックデザインなどの諸分野において使用されている典型的なダミーテキスト（英語版）。書籍やウェブページや広告などのデザインのプロトタイプを制作したり顧客にプレゼンテーションしたりする際に、まだ正式な文章の出来上がっていないテキスト部分の書体（フォント）、タイポグラフィ、レイアウトなどといった視覚的なデザインを調整したりわかりやすく見せるために用いられる。
</div>

/* Initial state (hidden) for the content containers */
.custom-content-b,
.custom-content-c,
#wrapper:has(a.custom-toggle:target[name="toggle-b"]) .custom-content-a,
#wrapper:has(a.custom-toggle:target[name="toggle-c"]) .custom-content-a {
  display: none;
}

/* State when the content containers' button are clicked */
#wrapper:has(a.custom-toggle:target[name="toggle-b"]) .custom-content-b,
#wrapper:has(a.custom-toggle:target[name="toggle-c"]) .custom-content-c {
  display: block;
}

/* Buttons container styling */
.custom-toggles {
  display: inline-flex;
  background: var(--itchio_bg_color);
  border-radius: 24px;
}

/* Buttons styling */
.custom-toggle {
  padding: .1em .8em;
  margin: 2px;
  color: var(--itchio_bg2_color);
  border-radius: inherit;
  text-decoration: none;
  transition: .3s;
}

/* Buttons styling when active/clicked */
.custom-toggles:has(a.custom-toggle:target[name="toggle-a"]) a.custom-toggle[name="toggle-a"],
.custom-toggles:has(a.custom-toggle:target[name="toggle-b"]) a.custom-toggle[name="toggle-b"],
.custom-toggles:has(a.custom-toggle:target[name="toggle-c"]) a.custom-toggle[name="toggle-c"]
, .custom-toggles:not(.custom-toggles:has(a.custom-toggle:target[name="toggle-b"], a.custom-toggle:target[name="toggle-c"])) a.custom-toggle[name="toggle-a"]
{
  color: var(--itchio_button_fg_color);
  background: var(--itchio_button_color);
}

A little wacky, but it should work.

You have to change the 'href' attribute of each .custom-toggle elements, by appending your itch.io project page URL before the '#' mark for it to work.