Is it even possible to stylize details so the first block is opened by default and when you click on another one, it replaces the shown one?
I’ve played around a bit to confirm this. But, apparently the attribute 'open', 'name', and even 'class' gets stripped on <details> elements, and also on its <summary> elements :/ So, sadly, I don’t think its possible.
Also, since classes are stripped off <details> and <summary>, you’d want to have them inside a container with custom class, and then target that container in the CSS:
<div class="custom-details">
<details>
<summary>...</summary>
...
</details>
<details>
<summary>...</summary>
...
</details>
...
</div>
.custom-details details { ... }
.custom-details summary { ... }
I've converted your codes above to ones that displays correctly on itch.io pages (though, still without the two functionalities you mentioned).
<div class="custom-details">
<details>
<summary>Question 1</summary>
<div class="custom-details__content">
<p>Pretty long text in language 1 lorem ipsum dolor sit amet consectetur adipisicing elit. Earum omnis beatae itaque! Maxime consequuntur architecto, voluptatibus iste aliquid quaerat dolores, culpa repellendus optio omnis rem saepe quisquam incidunt, numquam molestias?</p>
<p>Pretty long text in language 2 lorem ipsum dolor sit amet consectetur adipisicing elit. Earum omnis beatae itaque! Maxime consequuntur architecto, voluptatibus iste aliquid quaerat dolores, culpa repellendus optio omnis rem saepe quisquam incidunt, numquam molestias?</p>
</div>
</details>
<details>
<summary>Question 2</summary>
<div class="custom-details__content">
<p>Pretty long text in language 3 lorem ipsum dolor sit amet consectetur adipisicing elit. Earum omnis beatae itaque! Maxime consequuntur architecto, voluptatibus iste aliquid quaerat dolores, culpa repellendus optio omnis rem saepe quisquam incidunt, numquam molestias?</p>
</div>
</details>
<details>
<summary>Question 3</summary>
<div class="custom-details__content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum omnis beatae itaque! Maxime consequuntur architecto, voluptatibus iste aliquid quaerat dolores, culpa repellendus optio omnis rem saepe quisquam incidunt, numquam molestias?</p>
</div>
</details>
</div>
.custom-details > details {
position: relative;
display: block;
max-width: 650px;
margin: 0 auto 10px;
background: rgba(255,255,255,0.5);
border-radius: 5px;
transition: 0.3s;
overflow: hidden;
}
.custom-details > details::after {
position: absolute;
right: 24px;
top: 15px;
content: "";
display: block;
width: 14px;
height: 14px;
border-right: 3px solid #425995;
border-bottom: 3px solid #425995;
transform: rotate(-45deg);
transform-origin: center;
transition: .3s;
}
.custom-details > details[open]::after {
transform: rotate(45deg);
}
.custom-details > details[open] {
padding-bottom: 100px;
}
.custom-details > details[open] > summary {
margin-bottom: 32px;
}
.custom-details > details > summary {
background: #fff;
border-radius: 5px;
padding: 12px 24px;
font-size: 20px;
cursor: pointer;
list-style: none;
font-weight: 700;
transition: .3s;
}
.custom-details > details > summary::-webkit-details-marker {
display: none;
}
.custom-details__content {
padding: 0 32px;
font-size: 18px;
margin-bottom: -60px;
}
.custom-details__content p:last-child {
margin-bottom: 0;
}
.custom-details__content p:first-child {
margin-top: 0;
}