JSFiddle - React, Tailwind, and code Playground

by exercices

HTML

<ul class="container">
	<li>
		<details>
			<summary>Ligne 1</summary>
			<ul>
				<li>Ligne 1-1</li>
				<li>Ligne 1-2</li>
				<li>Ligne 1-3</li>
			</ul>
		</details>
	</li>
	<li>
		<details>
			<summary>Ligne 2</summary>
			<ul>
				<li>Ligne 2-1</li>
				<li>Ligne 2-2</li>
				<li>Ligne 2-3</li>
			</ul>
		</details>
	</li>
	<li>
		<details>
			<summary>Ligne 3</summary>
			<ul>
				<li>Ligne 3-1</li>
				<li>Ligne 3-2</li>
				<li>Ligne 3-3</li>
			</ul>
		</details>
	</li>
</ul>

CSS

.container, .container ul {
  list-style: none;
}
summary {
   display: block
}

summary:before {
   content: "+";
   margin:10px
}

details[open] summary:before {
   content: "-";
}

JavaScript

Array.from(document.getElementsByClassName('container')).forEach(function(item) {
	item.addEventListener('click', function(event) {
		if(event.target.tagName == 'SUMMARY') {
			const el = event.target.parentElement;
			Array.from(event.currentTarget.querySelectorAll('details')).forEach(function(item) {
				if(item != el) {
					item.open = false;
				}
			})
		}
	});
})