{"id":641,"date":"2017-05-18T18:24:25","date_gmt":"2017-05-18T18:24:25","guid":{"rendered":"http:\/\/wordpress.library.illinois.edu\/wp-training\/?page_id=641"},"modified":"2018-03-07T21:57:30","modified_gmt":"2018-03-07T21:57:30","slug":"accordion","status":"publish","type":"page","link":"https:\/\/wordpress.library.illinois.edu\/wp-training\/shortcodes\/accordion\/","title":{"rendered":"Accordion"},"content":{"rendered":"<h2>When to use<\/h2>\n<p>Accordions can be used to nest\/conceal further information about a topic. Accordions allow the user to browse through a list of content and click to expand on a topic of interest, making the information easier to browser through.<\/p>\n<h2>Attributes<\/h2>\n<h3>Required Attributes<\/h3>\n<ul>\n<li><strong>id<\/strong>: a single id is shared between the accordion and the panes contained inside of it.<\/li>\n<li><strong>number<\/strong>: an individual number to identify each accordion pane inside the accordion<\/li>\n<li><strong>title<\/strong>: the title for the accordion pane\n<\/ul>\n<h3>Optional Attributes<\/h3>\n<ul>\n<li><strong>open = &#8220;true&#8221; OR &#8220;false&#8221;<\/strong>: determines whether the panel will be open or close on page load. Default value is false.<\/li>\n<\/ul>\n<h2>Basic usage<\/h2>\n<p>An accordion is a sort of pane that contains collapsible panes inside of it. When clicked on the panes inside the accordion reveal any information contained inside their respective tags. Below are the steps demonstrating how to use each element and attribute of the accordion shortcode.<\/p>\n<h3>Steps<\/h3>\n<ol>\n<li><strong>Accordion ID<\/strong><br \/>\n[accordion id=\"accordion1\"]<\/p>\n<p>The ID of the accordion is used by its inner panes in order to tie their functionality with the accordion they belong to. It doesn&#8217;t matter what it is called as long as the id is unique, and the panes within that accordion use that accordion&#8217;s unique id.<\/p>\n<\/li>\n<li><strong>Accordion pane<\/strong><br \/>[accpane title=\"Example title\" id=\"accordion1\" number=\"1\" open=\"1\"]<\/li>\n<li><strong>Content<\/strong><br \/>&#8220;Example content&#8221;<\/strong><br \/>NOTE: Content can be text, list, heading, and any other valid HTML tag or shortcode<\/li>\n<li><strong>Closing tag for accordion pane<\/strong><br \/>[endaccpane ]<\/li>\n<li><strong>Additional accordion panes<\/strong> <br \/>Repeat steps 2 through 5<\/li>\n<li><strong>Closing tag for accordion<\/strong><br \/>[endaccordion]<\/li>\n<\/ol>\n<h3>Result<\/h3>\n<p><div class=\"shortcode sh-p-4 sh-rounded sh-drop-shadow-sm sh-bg-blue-100 !sh-text-black \"><div><div class=\"\"><br \/>\n\t<div class=\"shortcode sh-grid sh-grid-cols-1 md:sh-grid-cols-12 sh-gap-3\">\n\t\t<div class=\"shortcode sh-col-span-6 sh-pb-3\"><\/p>\n<h4>Code<\/h4>\n<div class=\"shortcode sh-p-4 sh-rounded sh-drop-shadow-sm sh-bg-white !sh-text-black !sh-border  \"><div><div class=\"\">\n<p>\t\t\t\t[accordion id=\"accordion1\"]<br \/>\n\t\t\t\t\t[accpane title=\"Room Reservation at Grainger Library\" id=\"accordion1\" number=\"1\"]<br \/>\n\t\t\t\t\t\t[list]<br \/>\n\t\t\t\t\t\t\tItem<br \/>\n\t\t\t\t\t\t\tSecond item<br \/>\n\t\t\t\t\t\t[endlist]<br \/>\n\t\t\t\t\t[endaccpane ]<br \/>\n\t\t\t\t\t[accpane title=\"Computers\" id=\"accordion1\" number=\"2\" open=\"true\"]<\/p>\n<ol>\n<li>Item in an ordered lists<\/li>\n<li>Second item in an ordered list<\/li>\n<\/ol>\n<p>\t\t\t\t\t[endaccpane ]<br \/>\n\t\t\t\t\t[accpane title=\"Printing, Scanning &amp; Copying\" id=\"accordion1\" number=\"3\"]<\/p>\n<p>Things not in a list.<\/p>\n<p>\t\t\t\t\t\t[pane color=\"red\"]<br \/>\n\t\t\t\t\t\t\t[list]<br \/>\n\t\t\t\t\t\t\t\tList item inside of a pane inside of an accordion pane<br \/>\n\t\t\t\t\t\t\t[endlist]<br \/>\n\t\t\t\t\t\t[endpane]<br \/>\n\t\t\t\t\t[endaccpane]<br \/>\n\t\t\t\t[endaccordion]<\/p>\n<p>\t\t\t<\/div><\/div><\/div><br \/>\n\t\t<\/div>\n\t\t<div class=\"shortcode sh-col-span-6 sh-pb-3\"><\/p>\n<h4>Rendering<\/h4>\n<p>\t\t\t<div class=\"shortcode sh-p-4 sh-rounded sh-drop-shadow-sm sh-bg-white !sh-text-black !sh-border  \"><div><div class=\"\"><br \/>\n\t\t\t\t<div id=\"accordion1\" class=\"shortcode sh-w-full !sh-border-b !sh-border-gray-300 sh-mb-2\"><br \/>\n\t\t\t\t\t\n      <div class=\"shortcode sh-px-3 sh-py-1.5 sh-bg-neutral-100 !sh-text-black !sh-border !sh-border-gray-300 sh-flex sh-items-center\">\n        <div><button id=\"accordion1accpane1\" class=\"shortcode sh-text-base sh-text-left sh-font-semibold sh-no-underline hover:sh-underline focus:sh-outline-none focus-visible:sh-ring sh-cursor-pointer sh-bg-neutral-100 !sh-text-black\" data-toggle=\"ui_lib_accordion\" data-target=\".accordion1accpane1\" data-parent=\"accordion1\" aria-controls=\"accordion1accpane1\" aria-expanded=\"false\">Room Reservation at Grainger Library<\/button><\/div>\n      <\/div>\n      <div class=\"shortcode sh-text-black !sh-border-x !sh-border-gray-300 sh-block sh-h-auto sh-max-h-0 sh-overflow-hidden sh-transition-max-height sh-duration-500 sh-ease-in-out accordion1accpane1\"  data-parent=\"acc_accordion1\"  inert>\n        <div class=\"shortcode sh-px-2 sh-py-2\"> <br \/>\n\t\t\t\t\t\t<div class=\"\" ><br \/>\n\t\t\t\t\t\t\tItem<br \/>\n\t\t\t\t\t\t\tSecond item<br \/>\n\t\t\t\t\t\t<\/div><br \/>\n\t\t\t\t\t<\/div><\/div><br \/>\n\t\t\t\t\t\n      <div class=\"shortcode sh-px-3 sh-py-1.5 sh-bg-neutral-100 !sh-text-black !sh-border !sh-border-gray-300 sh-flex sh-items-center\">\n        <div><button id=\"accordion1accpane2\" class=\"shortcode sh-text-base sh-text-left sh-font-semibold sh-no-underline hover:sh-underline focus:sh-outline-none focus-visible:sh-ring sh-cursor-pointer sh-bg-neutral-100 !sh-text-black\" data-toggle=\"ui_lib_accordion\" data-target=\".accordion1accpane2\" data-parent=\"accordion1\" aria-controls=\"accordion1accpane2\" aria-expanded=\"true\">Computers<\/button><\/div>\n      <\/div>\n      <div class=\"shortcode sh-text-black !sh-border-x !sh-border-gray-300 sh-block sh-h-auto sh-max-h-0 sh-overflow-hidden sh-transition-max-height sh-duration-500 sh-ease-in-out accordion1accpane2\"  data-parent=\"acc_accordion1\" style=\"max-height: 7000px;\">\n        <div class=\"shortcode sh-px-2 sh-py-2\"> <\/p>\n<ol>\n<li>Item in an ordered lists<\/li>\n<li>Second item in an ordered list<\/li>\n<\/ol>\n<p>\t\t\t\t\t<\/div><\/div><br \/>\n\t\t\t\t\t\n      <div class=\"shortcode sh-px-3 sh-py-1.5 sh-bg-neutral-100 !sh-text-black !sh-border !sh-border-gray-300 sh-flex sh-items-center\">\n        <div><button id=\"accordion1accpane3\" class=\"shortcode sh-text-base sh-text-left sh-font-semibold sh-no-underline hover:sh-underline focus:sh-outline-none focus-visible:sh-ring sh-cursor-pointer sh-bg-neutral-100 !sh-text-black\" data-toggle=\"ui_lib_accordion\" data-target=\".accordion1accpane3\" data-parent=\"accordion1\" aria-controls=\"accordion1accpane3\" aria-expanded=\"false\">Printing, Scanning &amp; Copying<\/button><\/div>\n      <\/div>\n      <div class=\"shortcode sh-text-black !sh-border-x !sh-border-gray-300 sh-block sh-h-auto sh-max-h-0 sh-overflow-hidden sh-transition-max-height sh-duration-500 sh-ease-in-out accordion1accpane3\"  data-parent=\"acc_accordion1\"  inert>\n        <div class=\"shortcode sh-px-2 sh-py-2\"> <\/p>\n<p>Things not in a list.<\/p>\n<p>\t\t\t\t\t\t<div class=\"shortcode sh-p-4 sh-rounded sh-drop-shadow-sm sh-bg-red-200 !sh-text-red-800 \"><div><div class=\"\"><br \/>\n\t\t\t\t\t\t\t<div class=\"\" ><\/p>\n<li>List item inside of a pane inside of an accordion pane<\/li>\n<p>\t\t\t\t\t\t\t<\/div><br \/>\n\t\t\t\t\t\t<\/div><\/div><\/div><br \/>\n\t\t\t\t\t<\/div><\/div><br \/>\n\t\t\t\t<\/div><br \/>\n\t\t\t<\/div><\/div><\/div><br \/>\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>When to use Accordions can be used to nest\/conceal further information about a topic. Accordions allow the user to browse through a list of content and click to expand on a topic of interest, making the information easier to browser through. Attributes Required Attributes id: a single id is shared between the accordion and the [&hellip;]<\/p>\n","protected":false},"author":71,"featured_media":0,"parent":24,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-641","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/wordpress.library.illinois.edu\/wp-training\/wp-json\/wp\/v2\/pages\/641","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.library.illinois.edu\/wp-training\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wordpress.library.illinois.edu\/wp-training\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.library.illinois.edu\/wp-training\/wp-json\/wp\/v2\/users\/71"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.library.illinois.edu\/wp-training\/wp-json\/wp\/v2\/comments?post=641"}],"version-history":[{"count":10,"href":"https:\/\/wordpress.library.illinois.edu\/wp-training\/wp-json\/wp\/v2\/pages\/641\/revisions"}],"predecessor-version":[{"id":1538,"href":"https:\/\/wordpress.library.illinois.edu\/wp-training\/wp-json\/wp\/v2\/pages\/641\/revisions\/1538"}],"up":[{"embeddable":true,"href":"https:\/\/wordpress.library.illinois.edu\/wp-training\/wp-json\/wp\/v2\/pages\/24"}],"wp:attachment":[{"href":"https:\/\/wordpress.library.illinois.edu\/wp-training\/wp-json\/wp\/v2\/media?parent=641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}