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
125
votes
11 answers

How can you hide the arrow that is displayed by default on the HTML5
element in Chrome?

I now its still early but I also know you guys are on top of it. I want to use the HTML5 details element:
What's the HTML5 details element?

The details element represents a disclosure widget from which the…

DADU
  • 6,482
  • 7
  • 42
  • 64
32
votes
2 answers

Remove blue border from open
element in Chrome?

I'm upgrading my site to use the new HTML5 details element for better accessibility. It's all working OK, but unfortunately when I click to open the element, Chrome applies an ugly blue border: Is there any way I can stop Chrome doing this? I…
flossfan
  • 10,554
  • 16
  • 42
  • 53
28
votes
8 answers

Automatically close all the other
tags after opening a specific
tag

Here is my code.
1 Demo 1
2 Demo 2
3 Demo 3
What I want to do is -- if the details of any single…
rohan_vg
  • 1,087
  • 3
  • 15
  • 27
10
votes
3 answers

How to use Html5's details and summary tag to hide and expand an entire row in a table?

I would like to use the details tag to hide and expand an entire row in a table, so I currently have the code …
S.Hill
  • 101
  • 1
  • 3
6
votes
5 answers

How to make
drop down on mouse hover

can anybody help me on how to make the details dropdown on mouse hover using css This is the html code
Sample Details of sample
I need a css code for it to drop down when the mouse hovers on it can anybody…
user1868185
  • 899
  • 3
  • 9
  • 24
4
votes
1 answer

Safari not transitioning details / summary element correctly

I've been playing around with some different formats for using details / summary, and I've been trying to get a flip card to work. I've made it most of the way in Chrome, using only CSS (no JS), where the only issue is that as the card flips back to…
chrisrooke
  • 41
  • 3
4
votes
1 answer

How to close details tag when other is open or a click is made outside the tag

this code below almost does the trick. If you open any details tag and then click anywhere outside of it it will close. However, currently open details tags wont close as a new details tag is open. var details =…
Cain Nuke
  • 2,843
  • 5
  • 42
  • 65
4
votes
2 answers

Details and summary tag compatibility issues

How do you get the details and summary tag for HTML5 to work on all browsers? I can get the details and summary tag to work with google chrome but i can't get it to work with any other browser.
KeKe
  • 43
  • 7
3
votes
2 answers

How can I change picture on opening & closing details/summary?

This is my first JavaScript ever. It took lots of time but can't get it to work. Obviously, what it should do is changing the picture when the 'details/summary' part is opened. FYI it's a follow-up from this problem that I'm trying to solve. Anyone…
Stefanovici
  • 51
  • 5
3
votes
3 answers

HTML5 details element for accordion

Is the details element semantically appropriate to markup an accordion? Example:
Section 1
Section 2
Section…
DADU
  • 6,482
  • 7
  • 42
  • 64
3
votes
1 answer

How do I get rid of the frameboard surrounding the
& tags?

If you click on the or a grey-blue frameboard appears surrounding the title. How do I edit CSS & HTML? Visit…
Jim
  • 407
  • 1
  • 11
  • 24
3
votes
1 answer

binding viewmodel to existence of a property in knockout

I am using Knockout.js to populate a set of HTML5
elements. Here is the structure:
…
Moshe Katz
  • 15,992
  • 7
  • 69
  • 116
3
votes
2 answers

Open
element when window width => 768px

I´m developing a responsive website where I use the
elements to show aditional information in the services section. How can I change the details "open" attribute when the window width > 768px ? It´s possible to do only with…
Swazy
  • 35
  • 4
2
votes
0 answers

How to add jquery transition effects to html5 details tag

I wished to use HTML5
for my FAQ page where i need to display only the questions at the begining. and for this've found a jquery fallback plugin for other browsers (currently only chrome supports).
My FAQ question…
Dipesh KC
  • 3,195
  • 3
  • 32
  • 50
2
votes
1 answer

How can I override the browser-generated triangle icon in a
element?

I'd like to change the icon with CSS for this snippet of HTML5:
Hello

The details

Any clues?
Aslak Hellesøy
  • 1,191
  • 6
  • 9
1
2 3 4 5
Header 1 Header 2