Stack Overflow
Stack Overflow

Questions tagged [html-tag-details]

Use this tag for question about HTML5

tag.

The <details> tag is one of the HTML5 elements. It creates a disclosure widget and contains additional details, that the user can open and view. By default, the content of the tag is not displayed. In order to display the contents, you must apply the open attribute. A disclosure widget is commonly presented with a small triangle that twists (or rotates) to show open/closed state.

It is often used with <summary> tag.

63 questions
2
votes
0 answers

Fade animation for HTML details element with CSS

Using the HTML details element and its open-attribute we can build a fade in animation: * { margin: 0; padding: 0; } body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-size: 18px; } details { margin:…
Script Raccoon
  • 261
  • 2
  • 14
2
votes
2 answers

How to automatically close an open details tag when another detail is clicked with React?

The Problem I have a list of detail tags and I would like to have an opened details tag close when another one opens. I am dynamically rendering a list of details tags Stack I am using React and hooks My attempts I set the open attribute is set with…
Tyler Morales
  • 1,440
  • 2
  • 19
  • 56
2
votes
2 answers

HTML closed details summary - how to scroll to anchor inside

This is the summary

Here are all the details.

Imagine more than a page of text here.

This is a link pointing inside the…

bgukw
  • 51
  • 4
2
votes
1 answer

I have a "label" tag inside a "summary" tag. It is not opening the details when clicked on label. How to solve?

I have checked this question. There is no answer and this question also. But my question is little different here. I am just adding another element inside the summary and clicking on that not opening the details. When I click outside label i.e. Only…
Saroj_98
  • 21
  • 4
2
votes
1 answer

Can you set the details element to display grid?

I wanted to create a filter element that can be collapsed using the
element as it comes out of the box with an open/close functionality. However when it came to styling the fields inside, I wanted to use grid and it seems like
…
sammiepls
  • 1,340
  • 2
  • 13
  • 19
2
votes
2 answers

How do I control whether a HTML5 details tag is open or not with AngularJS

The HTML details tag is a collapsible chunk of content. You declare a closed (collapsed) details tag by writing
Some stuff
And an open (expanded) one by writing
Some stuff
How do we dynamically add and…
fatuhoku
  • 4,815
  • 3
  • 30
  • 70
1
vote
1 answer

Why is details element expanding upwards when receiving the order attribute?

I have a list of sections and some have a details element within. Now I need to change these sections order using flexbox, but when I use the order attribute, the details element expands upwards, and not to the bottom like usual. All these sections…
Anuar Daher
  • 11
  • 4
1
vote
0 answers

element not clickable

I am creating a drop-down menu in line with various online tutorials such as: https://www.codewall.co.uk/create-a-dropdown-navigation-menu-with-details-summary/ However, when I reproduce this code (including copy-paste), the menu items fail to be…
SimonK
  • 21
  • 3
1
vote
2 answers

opens one after another with a shortcut

I tried to set it up when pressing a "a" key to open in order, but it opens all at the same time. Expected outcome: "a" key = open Details1 "a" key = open Details2 "a" key = open Details3 document.onkeyup = function(e) { var e = e ||…
Huandney
  • 23
  • 4
1
vote
1 answer

jquery HTML5 details and summary, problems counting children

I'm having problems counting children in a huge 'index-like' file which uses the details and summary tags. Need to know how many children there are for a specific summary tag. The code example has just a small part of the complete file but it shows…
R.E. Tired
  • 49
  • 5
1
vote
3 answers

details and summary: delete or hide "arrow"

Code:
Що зробити:
текст text текст text текст text текст text текст text текст text текст text текст text
How to remove the "arrow" in googleBrowser? In the FFox…
Aliskin
  • 169
  • 1
  • 9
1
vote
0 answers

Link to details section that expands details section as well

Anyone use the
tag? I'm trying to create a link that takes the user to a details section and opens the previously closed details. Haven't found any solutions that work and aren't 5 years old.
This is…
testing123
  • 761
  • 6
  • 13
  • 37
1
vote
2 answers

Border around details-tag

I'm facing a little problem at the moment: On my site im working with HTML's
-tag. My idea is to have a border around it when it's opend. The following picture shows how it actually looks like. The red line is what I want to add: My code…
Felix Gerber
  • 1,615
  • 3
  • 30
  • 40
1
vote
1 answer

AngularJS details directive doesn't work on firefox

I am using the angularJS 1.3, and found that the directive doesn't work on firefox 29. Even the test page on the angular site doesn't show the arrow, https://docs.angularjs.org/api/ng/directive/ngOpen Any clue on this? Or I have customize to or…
shaohui
  • 71
  • 1
  • 7
1
vote
5 answers

html5 details tag open one by one javascript function working strange

I'm using the HTML5 tag details for a FAQ section of a company. An issue was that if the user opened another question the other question would not close automatically. Therefore I searched on the web and found the following solution: function…
Daniel Ramirez-Escudero
  • 3,877
  • 13
  • 43
  • 80
1
2
3 4 5