HTML5 details element for accordion -


is details element semantically appropriate markup accordion?

example:

<div class="accordion">  <details open> <summary>section 1</summary> </details>  <details> <summary>section 2</summary> </details>  <details> <summary>section 3</summary> </details>  </div>

i ask question because spec isn't clear usage. states details element disclosure widget. don't want use element it's not meant be.

edit

would better suited semantically?

<article role="tablist">  <header role="tab" aria-expanded>section 1</header> <div role="tabpanel"> </div>  <header role="tab">section 2</header> <div role="tabpanel"> </div>  <header role="tab">section 3</header> <div role="tabpanel"> </div>  </article>

thanks!

yes, <details><summary> elements entirely appropriate (and semantic option) you're describing:

from http://www.w3.org/html/wg/drafts/html/master/interactive-elements.html#the-details-element:

the details element represents disclosure widget user can obtain additional information or controls. [emphasis mine]

and http://html5doctor.com/the-details-and-summary-elements/:

essentially, can use create accordion-like widget user can toggle open , closed. inside , can put sort of content want.

perfect usage. example, company has contact page many contact options setup accordion so:

<details>     <summary>mailing address</summary>     <p><strong>u.s. correspondence:</strong> 123 main st., washington, dc 00000-0000</p>     <p><strong>international correspondence:</strong> p.o.box 1111, washington, dc 00000-1111</p> </details> <details>     <summary>phone numbers</summary>     <p><strong>u.s.:</strong> 800-555-5555</p>     <p><strong>int'l:</strong> +1-800-555-5556</p> </details>

a note on styling: semantics shouldn't thrown overboard address browser-specific styling issues. css reset may in order, there's no semantic reason not use these helpful , appropriate elements accordion.

**do note: chrome browser supports toggling functionality believe spec intended these elements. javascript fallback useful here.

**edit 3/2017 - see http://caniuse.com/#feat=details support tables. feature supported ie , edge.


Comments

Post a Comment

Popular posts from this blog

c++ - Is it possible to compile a VST on linux? -

for class project i'm attempting write vst plugin backed cuda. current cuda workflow on linux box, i'd prefer compile , link there. according wikipedia , should possible (i couldn't find steinberg documentation relevant linux) can't find makefile or instructions on how build if aren't using xcode or visual studio. i'm vst 3 sdk doesn't support linux. when try compile plugin under linux, error: ./base/source/fatomic.cpp:39:30: fatal error: libkern/osatomic.h: no such file or directory this issue caused following code in "vst3 sdk/base/source/fatomic.cpp" #if mac #include <libkern/osatomic.h> #if mac_os_x_version_min_required > mac_os_x_version_10_4 #define native_atomic_type (volatile int32_t*) #else #define native_atomic_type (int32_t*) #endif #elif windows #include <windows.h> #endif but hope compiling under linux work vst sdk 2.4. reading. jvstwrapper seems run on lin...
Read more

java - Output of Eclipse is rubbish -

i want write program in eclipse language different english. when display output using system.out program, displays output correctly in console editor. when accept input console , output it, output rubbish. how can solve it. many thnaks i'm not sure if problem, have character encoding problem. make sure you're using unicode, utf-8. you can read more @ official docs converting non-unicode text .
Read more

jquery - Confused with JSON data and normal data in Django ajax request -

i read json internet still have not got grasp of it. reading article http://webcloud.se/log/ajax-in-django-with-jquery/ i not understood first part function using json def xhr_test(request, format): if request.is_ajax(): if format == 'xml': mimetype = 'application/xml' if format == 'json': mimetype = 'application/javascript' data = serializers.serialize(format, examplemodel.objects.all()) return httpresponse(data,mimetype) # if want prevent non xhr calls else: return httpresponse(status=400) my main problems are from function getting format variable does format json mean data given function json or data recived json can give me simple example ouput of function data = serializers.serialize(format, examplemodel.objects.all()) how use data when response in jquery function if don't use json in above function how input , response chnage thanks ...
Read more