{"id":8414,"date":"2018-11-19T07:22:18","date_gmt":"2018-11-19T07:22:18","guid":{"rendered":"http:\/\/webartdevelopers.com\/?p=8414"},"modified":"2020-02-27T06:45:29","modified_gmt":"2020-02-27T06:45:29","slug":"gracefully-degrading-details-accordion","status":"publish","type":"post","link":"https:\/\/webartdevelopers.com\/blog\/gracefully-degrading-details-accordion\/","title":{"rendered":"GRACEFULLY-DEGRADING DETAILS ACCORDION"},"content":{"rendered":"<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4><em><span style=\"text-decoration: underline;\"><strong>Author:<\/strong><\/span><\/em><\/h4>\n<ul>\n<li>Keith Pickering<\/li>\n<li class=\".last-child\"><time>May 14, 2018<\/time><\/li>\n<\/ul>\n<\/div>\n<div class=\"info info-link\"><\/div>\n<div class=\"info info-frontend\">\n<h4><em><span style=\"text-decoration: underline;\"><strong>Made with:<\/strong><\/span><\/em><\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS (SCSS) \/ JavaScript<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<h4 class=\"about-the-item\"><em><span style=\"text-decoration: underline;\"><strong>About the code:<\/strong><\/span><\/em><\/h4>\n<p>This is an amazing Animation in which the <code>details<\/code> element provides a very easy and accessible implementation of the accordion, one of the most common UI components. The problem is that the default functionality is anything but smooth. Here issue has been tried to solved with a nice ES6 class which expands the element&#8217;s functionality without breaking accessibility.<\/p>\n<p><span class=\"accent\"><em><strong>Compatible browsers:<\/strong><\/em>\u00a0<\/span>Chrome, Edge, Firefox, Opera, Safari<\/p>\n<p><span class=\"accent\"><em><strong>Dependencies:<\/strong><\/em>\u00a0<\/span>&#8211;<\/p>\n<a href=\"https:\/\/codepen.io\/keithpickering\/share\/zip\/PeBpwG\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Download<\/span><\/a>\n<a href=\"https:\/\/codepen.io\/keithpickering\/pen\/PeBpwG\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Demo and Code<\/span><\/a>\n<!-- AddThis Advanced Settings generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"Author: Keith Pickering May 14, 2018 Made with: HTML \/ CSS (SCSS) \/ JavaScript About the code: This is an amazing Animation in which the details element provides a very easy and accessible implementation of the accordion, one of the most common UI components. The problem is that the default functionality is anything but smooth. Here issue has been tried to solved with a nice ES6 class which expands the element&#8217;s functionality without breaking accessibility. Compatible browsers:\u00a0Chrome, Edge, Firefox, Opera, Safari Dependencies:\u00a0&#8211;<!-- AddThis Advanced Settings generic via filter on get_the_excerpt -->","protected":false},"author":1,"featured_media":8424,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2209],"tags":[20,2225,292,2211],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/8414"}],"collection":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/comments?post=8414"}],"version-history":[{"count":2,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/8414\/revisions"}],"predecessor-version":[{"id":19795,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/8414\/revisions\/19795"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media\/8424"}],"wp:attachment":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media?parent=8414"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/categories?post=8414"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/tags?post=8414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}