Click expand with details and summary tag

Question

I'm using click expand collapse using <details> and <summary> tags. It can expand and collapse without problem. I want to expand one information only one time.

What I meant is, when I click information1 it will expand, and again click information2. then information1 collapse and information2 expand. it means only one can expand in one time.

How can I do this with only using css

<details>
  <summary>Information1</summary>
    If your browser supports this element, it should allow
    you to expand and collapse these details.
</details>
<details>
   <summary>Information2</summary>
    If your browser supports this element, it should allow
    you to expand and collapse these details.
</details>
<details>
   <summary>Information3</summary>
    If your browser supports this element, it should allow
    you to expand and collapse these details.
 </details>
 <details>
    <summary>Information4</summary>
     If your browser supports this element, it should allow
     you to expand and collapse these details.
  </details>

https://fiddle.jshell.net/mjxhj5se/

Thanks..

Answer 1

This cannot currently be done with <details> and <summary> using only CSS, because CSS can't manipulate an HTML element's attribute – in this case, the open attribute. However, if you don't need to use <details> and <summary>, the solution linked by CasperSL works well for your purpose.

Or you could add this jQuery to achieve the wanted effect with <details> and <summary>:

$("details").click(function(event) {
  $("details").not(this).removeAttr("open");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<details>
  <summary>Summary 1</summary>
  Some details 1.
</details>
<details>
  <summary>Summary 2</summary>
  Some details 2.
</details>
<details>
  <summary>Summary 3</summary>
  Some details 3.
</details>