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..

Possible duplicate of [Automatically close all the other
tags after opening a specific
tag](http://stackoverflow.com/questions/16751345/automatically-close-all-the-other-details-tags-after-opening-a-specific-detai) — Lalji Tadhani, Sep 27 '16 at 07:11
Right now it is only possible to remove the open tag in details with js. There is a way to achieve what you want only using css but not with details and summary. — Rudi Urbanek, Sep 27 '16 at 07:23

score 3 · Answer 1 · edited May 23 '17 at 12:24

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>

score 1 · Answer 2 · edited May 23 '17 at 11:46

1

might not be possible to achieve this with css alone. Please have a look at;

Automatically close all the other <details> tags after opening a specific <details> tag

edited May 23 '17 at 11:46

Community

1
1

answered Sep 27 '16 at 07:12

Laazo

467
8
22

score 0 · Answer 3 · answered Sep 27 '16 at 07:11

0

You can do this easily by using jQuery here is one easiest tutorial Simple jQuery Accordion

answered Sep 27 '16 at 07:11

Casper

1,469
10
19

Yes, i want to do it by using css. that's the problem. – sj2012 Sep 27 '16 at 07:13
here is the solution http://www.hongkiat.com/blog/create-css-based-content/ – Casper Sep 27 '16 at 08:03

Click expand with details and summary tag

3 Answers3

Linked