{"id":530,"date":"2019-08-29T00:51:51","date_gmt":"2019-08-29T04:51:51","guid":{"rendered":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/?p=530"},"modified":"2019-08-29T01:39:31","modified_gmt":"2019-08-29T05:39:31","slug":"make-an-accordion-with-html","status":"publish","type":"post","link":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/2019\/make-an-accordion-with-html\/","title":{"rendered":"Make an Accordion with HTML"},"content":{"rendered":"<p><strong>What: <\/strong>Make a functional accordion with HTML. CSS is optional for styling and no JavaScript is needed. I love simple, I love lightweight, less is more. And in browsers in which it doesn&#8217;t work, all the content is still visible, which also improves accessibility.<br \/>\n<!--more--><\/p>\n<pre><code class=\"html\">&lt;details&gt;\r\n    &lt;summary&gt;headline \/ summary of the content&lt;\/summary&gt;\r\n    The actual content goes here.\r\n&lt;\/details&gt;<\/code><\/pre>\n<details>\n<summary>Headline<\/summary>\n<p>Content<\/p>\n<\/details>\n<hr \/>\n<p><strong>Where<\/strong>: @ <a href=\"https:\/\/css-tricks.com\/quick-reminder-that-details-summary-is-the-easiest-way-ever-to-make-an-accordion\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS-Tricks by Chris Coyier<\/a>, also see this <a href=\"https:\/\/codepen.io\/thomashigginbotham\/pen\/aYqvqQ\" target=\"_blank\" rel=\"noopener noreferrer\">Codepen<\/a>, it&#8217;s a fork by Thomas Higginbotham from the comments to the article that shows how you can change the marker when a segment is opened.<\/p>\n<p><strong>Of note<\/strong>:<\/p>\n<ul>\n<li>Also from the comments: There is no way to override the behavior. You can&#8217;t always have it open for example. It works how it works and that&#8217;s how it works.<\/li>\n<li>Good to know that it doesn&#8217;t work in Internet Explorer or Opera Mini.<\/li>\n<li>In the WordPress browser it acts a bit odd, removing all of the white space between the accordion and the paragraph below, so I put an &lt;hr &gt; between the paragraph and the little accordion. I&#8217;m using the classic editor instead of Gutenberg on this blog.<\/li>\n<\/ul>\n<hr \/>\n<div class=\"level__left\">\n<div class=\"level__item\">\n<div class=\"js-copy-attribute-content rd__p rd__p--no-margin\">Photo by <strong> <a href=\"https:\/\/www.pexels.com\/nl-nl\/@pixabay?utm_content=attributionCopyText&amp;utm_medium=referral&amp;utm_source=pexels\" target=\"_blank\" rel=\"noopener noreferrer\">Pixabay <\/a> <\/strong> via <strong> <a href=\"https:\/\/www.pexels.com\/nl-nl\/foto\/164940\/?utm_content=attributionCopyText&amp;utm_medium=referral&amp;utm_source=pexels\" target=\"_blank\" rel=\"noopener noreferrer\">Pexels<\/a> <\/strong><\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>What: Make a functional accordion with HTML. CSS is optional for styling and no JavaScript is needed. I love simple, I love lightweight, less is more. And in browsers in which it doesn&#8217;t work, all the content is still visible, which also improves accessibility.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[48,46,17,45],"class_list":["post-530","post","type-post","status-publish","format-standard","hentry","category-new-things","tag-accessibility","tag-accordion","tag-css","tag-html","infinite-scroll-item"],"_links":{"self":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/530","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/comments?post=530"}],"version-history":[{"count":0,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/530\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/media?parent=530"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/categories?post=530"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/tags?post=530"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}