{"id":58,"date":"2021-03-26T18:35:48","date_gmt":"2021-03-26T22:35:48","guid":{"rendered":"https:\/\/pressbooks.bccampus.ca\/h5pkitchen\/?post_type=chapter&#038;p=58"},"modified":"2021-04-05T14:55:45","modified_gmt":"2021-04-05T18:55:45","slug":"toggle-this","status":"publish","type":"chapter","link":"https:\/\/pressbooks.bccampus.ca\/h5pkitchen\/chapter\/toggle-this\/","title":{"raw":"Toggle This","rendered":"Toggle This"},"content":{"raw":"The H5P Accordion content type is well used for reducing the amount of content displayed by using folding \"drawers\" that open or close. They also are useful for creating thought questions with the answers or followup information hidden.\r\n\r\n[h5p id=\"15\"]\r\n\r\nThis is fine. But a limit for the H5P content type is that it is not going to be available for PDF and ePub versions of your textbooks, instead a link is published to return to the web site.\r\n\r\nAs pointed out to use by Steel Wagstaff, we do have another option that works because it is web standard HTML, and thus should work in these formats.\r\n\r\nhttps:\/\/twitter.com\/steelwagstaff\/status\/1369848040857563138\r\n\r\nThis is <a href=\"https:\/\/wisc.pb.unizin.org\/oersourcebook\/chapter\/show-hide-experimentation\/\">using the HTML tags for Summary\/Details<\/a>. \r\n\r\nLet's experiment.\r\n\r\n<details><summary><strong> What Are Accordions For?<\/strong><em>(show\/hide)<\/em><\/summary>The H5P documentation spells it out nicely:\r\n<blockquote>Reduce the amount of text presented to readers by using this responsive accordion. Readers decide which headlines to take a closer look at by expanding the title. Excellent for providing an overview with optional in-depth explanations.<\/blockquote>\r\nYou can see that this might be effective to reduce long lists of information, references, or breaking content into sections more like a miniature outline.\r\n\r\nIn this case, it's used just a silly demo.\r\n\r\n<\/details>\r\n\r\n<details>\r\n\r\n<summary><strong> Foot Stomping Music<\/strong><em>(show\/hide)<\/em><\/summary>\r\n\r\n\r\nWell, that was silly. It would be useful maybe if one could include images here, but alas not in H5P.\r\n\r\nBut we can!\r\n\r\nhttps:\/\/www.flickr.com\/photos\/cogdog\/5727738367\r\n\r\n<\/details>\r\n\r\n\r\n<details>\r\n\r\n<summary><strong> Something Extra Sneaky!<\/strong><em>(show\/hide)<\/em><\/summary>\r\n\r\n<iframe src=\"https:\/\/pressbooks.bccampus.ca\/h5pkitchen\/wp-admin\/admin-ajax.php?action=h5p_embed&id=15\" width=\"750\" height=\"138\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><script src=\"https:\/\/pressbooks.bccampus.ca\/h5pkitchen\/wp-content\/plugins\/h5p\/h5p-php-library\/js\/h5p-resizer.js\" charset=\"UTF-8\"><\/script>\r\n\r\nWere you expecting that? Have we reached some form of <em>H5P Inception<\/em>?\r\n\r\n<\/details>\r\n\r\nAs not all browsers will indicate the left side triangles to indicate an item to open, we add prompt text \"show\/hide\" inside the &lt;summary&gt; with &lt;em&gt; tag. With some custom CSS (in Pressbooks, go to <strong>Appearance<\/strong> -> <strong>Custom Styles<\/strong> and enter into the space for \"Web Styles\". We can make the interaction more clear with background color, a cursor on hovering, and moving the prompt text to the right side.\r\n\r\n<pre>\r\ndetails {\r\n  background: #eee;\r\n  margin-bottom: 2rem;\r\n  padding: .5rem 1rem;\r\n}\r\n\r\nsummary {\r\n  cursor: pointer;\r\n}\r\n\r\nsummary > * {\r\n  display: inline;\r\n}\r\n\r\nsummary em {\r\n    font-size: 80%;\r\n    float: right;\r\n}\r\n<\/pre>","rendered":"<p>The H5P Accordion content type is well used for reducing the amount of content displayed by using folding &#8220;drawers&#8221; that open or close. They also are useful for creating thought questions with the answers or followup information hidden.<\/p>\n<div id=\"h5p-15\">\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-15\" class=\"h5p-iframe\" data-content-id=\"15\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"What Are Accordions For?\"><\/iframe><\/div>\n<\/div>\n<p>This is fine. But a limit for the H5P content type is that it is not going to be available for PDF and ePub versions of your textbooks, instead a link is published to return to the web site.<\/p>\n<p>As pointed out to use by Steel Wagstaff, we do have another option that works because it is web standard HTML, and thus should work in these formats.<\/p>\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\">\n<p lang=\"en\" dir=\"ltr\">Have you considered the good old &lt;details&gt; HTML element? <a href=\"https:\/\/t.co\/bDz6r8vhdn\">https:\/\/t.co\/bDz6r8vhdn<\/a>  No JS needed, is fairly accessible (see <a href=\"https:\/\/t.co\/BEtRLSIyEW\">https:\/\/t.co\/BEtRLSIyEW<\/a>), and works well in exports. What\u2019s not to like? \ud83d\ude09<\/p>\n<p>&mdash; Steel Wagstaff (@steelwagstaff) <a href=\"https:\/\/twitter.com\/steelwagstaff\/status\/1369848040857563138?ref_src=twsrc%5Etfw\">March 11, 2021<\/a><\/p><\/blockquote>\n<p><script async=\"\" src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<p>This is <a href=\"https:\/\/wisc.pb.unizin.org\/oersourcebook\/chapter\/show-hide-experimentation\/\">using the HTML tags for Summary\/Details<\/a>. <\/p>\n<p>Let&#8217;s experiment.<\/p>\n<details>\n<summary><strong> What Are Accordions For?<\/strong><em>(show\/hide)<\/em><\/summary>\n<p>The H5P documentation spells it out nicely:<\/p>\n<blockquote><p>Reduce the amount of text presented to readers by using this responsive accordion. Readers decide which headlines to take a closer look at by expanding the title. Excellent for providing an overview with optional in-depth explanations.<\/p><\/blockquote>\n<p>You can see that this might be effective to reduce long lists of information, references, or breaking content into sections more like a miniature outline.<\/p>\n<p>In this case, it&#8217;s used just a silly demo.<\/p>\n<\/details>\n<details>\n<summary><strong> Foot Stomping Music<\/strong><em>(show\/hide)<\/em><\/summary>\n<p>Well, that was silly. It would be useful maybe if one could include images here, but alas not in H5P.<\/p>\n<p>But we can!<\/p>\n<p><a href=\"https:\/\/www.flickr.com\/photos\/cogdog\/5727738367\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/live.staticflickr.com\/5090\/5727738367_9a3f036e9d.jpg\" alt=\"2011\/365\/135 Accordion Man\" width=\"500\" height=\"500\" \/><\/a><\/p>\n<\/details>\n<details>\n<summary><strong> Something Extra Sneaky!<\/strong><em>(show\/hide)<\/em><\/summary>\n<p><iframe loading=\"lazy\" src=\"https:\/\/pressbooks.bccampus.ca\/h5pkitchen\/wp-admin\/admin-ajax.php?action=h5p_embed&#38;id=15\" width=\"750\" height=\"138\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><script src=\"https:\/\/pressbooks.bccampus.ca\/h5pkitchen\/wp-content\/plugins\/h5p\/h5p-php-library\/js\/h5p-resizer.js\" charset=\"UTF-8\"><\/script><\/p>\n<p>Were you expecting that? Have we reached some form of <em>H5P Inception<\/em>?<\/p>\n<\/details>\n<p>As not all browsers will indicate the left side triangles to indicate an item to open, we add prompt text &#8220;show\/hide&#8221; inside the &lt;summary&gt; with &lt;em&gt; tag. With some custom CSS (in Pressbooks, go to <strong>Appearance<\/strong> -&gt; <strong>Custom Styles<\/strong> and enter into the space for &#8220;Web Styles&#8221;. We can make the interaction more clear with background color, a cursor on hovering, and moving the prompt text to the right side.<\/p>\n<pre>\r\ndetails {\r\n  background: #eee;\r\n  margin-bottom: 2rem;\r\n  padding: .5rem 1rem;\r\n}\r\n\r\nsummary {\r\n  cursor: pointer;\r\n}\r\n\r\nsummary &gt; * {\r\n  display: inline;\r\n}\r\n\r\nsummary em {\r\n    font-size: 80%;\r\n    float: right;\r\n}\r\n<\/pre>\n","protected":false},"author":1006,"menu_order":3,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-58","chapter","type-chapter","status-publish","hentry"],"part":23,"_links":{"self":[{"href":"https:\/\/pressbooks.bccampus.ca\/h5pkitchen\/wp-json\/pressbooks\/v2\/chapters\/58","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.bccampus.ca\/h5pkitchen\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.bccampus.ca\/h5pkitchen\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/h5pkitchen\/wp-json\/wp\/v2\/users\/1006"}],"version-history":[{"count":16,"href":"https:\/\/pressbooks.bccampus.ca\/h5pkitchen\/wp-json\/pressbooks\/v2\/chapters\/58\/revisions"}],"predecessor-version":[{"id":78,"href":"https:\/\/pressbooks.bccampus.ca\/h5pkitchen\/wp-json\/pressbooks\/v2\/chapters\/58\/revisions\/78"}],"part":[{"href":"https:\/\/pressbooks.bccampus.ca\/h5pkitchen\/wp-json\/pressbooks\/v2\/parts\/23"}],"metadata":[{"href":"https:\/\/pressbooks.bccampus.ca\/h5pkitchen\/wp-json\/pressbooks\/v2\/chapters\/58\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.bccampus.ca\/h5pkitchen\/wp-json\/wp\/v2\/media?parent=58"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/h5pkitchen\/wp-json\/pressbooks\/v2\/chapter-type?post=58"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/h5pkitchen\/wp-json\/wp\/v2\/contributor?post=58"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/h5pkitchen\/wp-json\/wp\/v2\/license?post=58"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}