詳細と要約タグで拡大するをクリックしてください

Question

私は<details>と<summary>タグを使用してクリック展開の崩壊を使用しています。 問題なく拡張したり折りたたんだりすることができます。 1つの情報を1回だけ展開したいのですが。

私が意味していたのは、 情報1をクリックすると展開され、再度情報2をクリックすると意味します。 その後情報1が崩壊し、情報2が展開されます。 これは、一度に1つしか展開できないことを意味します。私はあなたがここにjQueryを使って、簡単にこれを行うことができ、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/

おかげ..

Answer 1

を使用してこれを行うことができますすることは1最も簡単なチュートリアルSimple jQuery Accordion

Answer 2

でどのように

cssだけでこれを達成することは不可能かもしれません。見てください。

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

Answer 3

CSSは、HTML要素の属性を操作することはできませんので、これは現在、唯一のCSSを使用して<details>と<summary>で行うことができない - この場合には、open属性を。ただし、<details>と<summary>を使用する必要がない場合はsolutionがCasperSLでリンクされていることが目的に適しています。

$("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>