{"id":2452,"date":"2012-06-11T23:14:33","date_gmt":"2012-06-11T23:14:33","guid":{"rendered":"https:\/\/deepubalan.com\/blog\/?p=2452"},"modified":"2013-04-01T17:12:45","modified_gmt":"2013-04-01T17:12:45","slug":"pure-css-html-accordion-using-details-summary-elements","status":"publish","type":"post","link":"https:\/\/deepubalan.com\/blog\/2012\/06\/11\/pure-css-html-accordion-using-details-summary-elements\/","title":{"rendered":"Pure CSS – HTML accordion using Details & Summary elements"},"content":{"rendered":"
\"\"<\/div>\n

Have you ever dream of being able to create an accordion or toggle widget purely using HTML and CSS? Yes it is possible to create a nice looking and easily configurable accordion widget purely using the power of HTML5<\/a>. No need to load any external javascript plugins or libraries. Gone are the days when you had to depend on javascript plugins to create interactive accordion widgets. <\/p>\n

HTML5 – CSS3<\/a> duo together is shaping up to be an exciting technology of all time, which can make impacts on almost all areas of webdesign<\/a> such as animations, user interaction, gaming, geolocation, 3D modeling, visualizations etc\u2026 those things were possible only with Javascript or flash earlier.<\/p>\n

Demo<\/h2>\n

Before we continue to the css\/html code, let\u2019s take a look at the fully-functional accordion widget here\u2026 <\/p>\n

VIEW DEMO<\/a><\/div>\n<\/p>\n

Details and Summary Elements<\/h2>\n

By using the <details> and <summary> elements together we can create an accordion like toggle widget.
\nAs per W3C specification the detail element is defined as<\/p>\n

The <details> tag specifies additional details that the user can view or hide on demand.<\/p><\/blockquote>\n

The <details> tag can be used to create an interactive widget that the user can open and close. Inside <details>, there can be put any sort of content. The content of a <details> element will be hidden by default unless the open attribute is set.
\nW3C defines the summary element as<\/p>\n

The <summary> tag defines a visible heading for the <etails> element. The heading can be clicked to view\/hide the details.<\/p><\/blockquote>\n

However it is not always necessary to define the summary element, if there is no child summary element, the user agent will provide its own legend.<\/p>\n

Usage \u2013 Syntax<\/h2>\n
\r\n
\r\n   Click to show\/hide<\/summary>\r\n   
content goes here
\r\n<\/details>\r\n
\r\n   Click to show\/hide<\/summary>\r\n   
content goes here
\r\n<\/details>\r\n
\r\n   Click to show\/hide<\/summary>\r\n   
content goes here
\r\n<\/details>\r\n
\r\n   Click to show\/hide<\/summary>\r\n   
content goes here
\r\n<\/details>\r\n<\/pre>\n
Browser Support<\/h2>\n
It is really unfortunate that only chrome and android browser at the moment offer full native support to the detail and summary elements. Opera announced<\/a> that they will soon support this feature. For the time being wa can get it work on other browsers with the help of polyfills. There is an awesome jquery fallback script created by Manuel Bieh<\/a> which will do the trick on other browsers.
\n\"\"source: http:\/\/caniuse.com\/details<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
Have you ever dream of being able to create an accordion or toggle widget purely using HTML and CSS? Yes it is possible to create a nice looking and easily…<\/p>\n","protected":false},"author":1,"featured_media":2500,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[6,27],"tags":[50,167,164,168],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/deepubalan.com\/blog\/wp-json\/wp\/v2\/posts\/2452"}],"collection":[{"href":"https:\/\/deepubalan.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/deepubalan.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/deepubalan.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/deepubalan.com\/blog\/wp-json\/wp\/v2\/comments?post=2452"}],"version-history":[{"count":1,"href":"https:\/\/deepubalan.com\/blog\/wp-json\/wp\/v2\/posts\/2452\/revisions"}],"predecessor-version":[{"id":9801,"href":"https:\/\/deepubalan.com\/blog\/wp-json\/wp\/v2\/posts\/2452\/revisions\/9801"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/deepubalan.com\/blog\/wp-json\/wp\/v2\/media\/2500"}],"wp:attachment":[{"href":"https:\/\/deepubalan.com\/blog\/wp-json\/wp\/v2\/media?parent=2452"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/deepubalan.com\/blog\/wp-json\/wp\/v2\/categories?post=2452"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/deepubalan.com\/blog\/wp-json\/wp\/v2\/tags?post=2452"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}