Which Tag will help?


#1

Hi Everyone, can anyone tell me what is the HTML 5 tag that can help me create Childhood headline and when i click on the small arrow beside Childhood, i suppose to see the additional information as per the attached Image please?


Dropdown list of pdfs
#2

I think maybe you’re looking for the <details> and <summary> tags… http://html5doctor.com/the-details-and-summary-elements/


#3

Yes It’s, Thank you for your help @gandalf458 :blush:


#4

I have deleted the answer because I found later that it was wrong and not really helpful.


#5

That used to be the case, but the HTML5 <details> tag provides a way to achieve this without JavaScript.


#6

Maybe time for a working example here?

<details> 
  <summary>For an example, click the arrow</summary>  
And then this displays  
</details>  
For an example, click the arrow And then this displays

#7

There is a caveat, in that IE and Edge currently have no support for the tag; likewise Opera Mini.

https://caniuse.com/#search=<details>


#8

There’s not a lot Opera Mini does support from what I can see! :slight_smile:


#9

The CSS pseudo class :target works very well, with IE9+ support
and “Opera Mini”. :winky:

  1. https://developer.mozilla.org/en-US/docs/Web/CSS/:target
  2. https://caniuse.com/#feat=css-namespaces

coothead


#10

I remember when it first came out and everybody had high hopes for it until it’s problems became known.

The biggest problem I have with it is how it effects the browser history. Then there is the page jumping behavior that can be a problem too.

https://css-tricks.com/on-target/

If I remember right some people were using JS along with it to override the browser history problem. That never appealed to me, I mean if I had to use JS to fix the issues why not just use JS for the job to begin with.


Dropdown list of pdfs
#11

Yes, i used the same syntax and it worked perfectly