HTML5 <details> tag is used to specify additional details or controls and these can be hidded or show on demand. Open attribute is used to define hidded or show. It can be used with the HTML5 <summary> tag to provide a heading that can be clicked to expand or collapse the details.
HTML 5 details Tag
<details>
<summary>The Steve Jobs Way</summary>
<p>by Jay Elliot , William L. Simon<br>
Spl Price Rs. 173/-</p>
</details>
<details>
<summary>The Winning Way Learnings From Sport For Managers</summary>
<p>by Harsha Bhogle , Anita Bhogle<br>
Spl Price Rs. 146/-</p>
</details>
<details>
<summary>Life Is What You Make It</summary>
<p>by Preeti Shenoy<br>
Spl Price Rs. 62/-</p>
</details>
<summary>The Steve Jobs Way</summary>
<p>by Jay Elliot , William L. Simon<br>
Spl Price Rs. 173/-</p>
</details>
<details>
<summary>The Winning Way Learnings From Sport For Managers</summary>
<p>by Harsha Bhogle , Anita Bhogle<br>
Spl Price Rs. 146/-</p>
</details>
<details>
<summary>Life Is What You Make It</summary>
<p>by Preeti Shenoy<br>
Spl Price Rs. 62/-</p>
</details>
If you click on the text inside the summary element , the details element expands. If you click again, and it contracts. By default the details tag is in contract state. If you want to show in expand state use the attribute called open=”open”. Below is the example for this
<details open=”open”>
<summary>The Steve Jobs Way</summary>
<p>by Jay Elliot , William L. Simon<br>
Spl Price Rs. 173/-</p>
</details>
<summary>The Steve Jobs Way</summary>
<p>by Jay Elliot , William L. Simon<br>
Spl Price Rs. 173/-</p>
</details>
Hope you enjoy this post. If you any have suggestions or comments. please post your comments.
