{"id":16392,"date":"2023-11-13T14:02:28","date_gmt":"2023-11-13T19:02:28","guid":{"rendered":"https:\/\/www.rochester.edu\/communications\/?page_id=16392"},"modified":"2026-07-13T10:02:48","modified_gmt":"2026-07-13T14:02:48","slug":"accordion","status":"publish","type":"page","link":"https:\/\/www.rochester.edu\/communications\/resources\/web-seo\/wordpress-theme\/accordion\/","title":{"rendered":"Accordion"},"content":{"rendered":"","protected":false},"excerpt":{"rendered":"","protected":false},"author":36,"featured_media":0,"parent":14392,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/one-column.php","meta":{"_acf_changed":false,"footnotes":"","_members_access_role":[],"_members_access_error":""},"class_list":["post-16392","page","type-page","status-publish","hentry"],"acf":{"lead_in":"Rochester Core","display_title":"Accordion component","subtitle":"Explore documentation around Rochester Core's Accordion component.","call_to_action":"","hero_image_placement":"no_image","hero_media":"images","hero_pattern_option":"","hero_video":"","hero_image_landing":"","hero_image_landing_two":"","hero_image_landing_three":"","content_modules_above":[{"acf_fc_layout":"text","anchor":"","css_class":"mt-0 pt-0","title":"

Overview<\/h2>","content":"Accordions are rows of content that front-end users can expand and close. Accordions allow users to decide what to expand and learn more about.\r\n\r\nSome popular use cases for accordions include listing frequently asked questions, housing information that is unique to specific audiences and wouldn\u2019t apply to all audiences, and housing additional detailed information that may not be needed by the average user.\r\n

Topics on this page:<\/strong><\/h3>\r\n
    \r\n \t
  1. How-to video<\/a><\/li>\r\n \t
  2. Accordion options<\/a><\/li>\r\n \t
  3. Example accordions<\/a><\/li>\r\n<\/ol>\r\n

    June 2025 updates:<\/h3>\r\n

    The accordion has been fine-tuned to improve consistency, spacing, and alignment across Core sites. Recent updates include:<\/p>\r\n\r\n

      \r\n \t
    • \r\n

      Expand All button<\/strong><\/p>\r\n\r\n

        \r\n \t
      • \r\n

        Font size adjusted to standard button size (1.125rem)<\/p>\r\n<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t

      • \r\n

        Label styling<\/strong><\/p>\r\n\r\n

          \r\n \t
        • \r\n

          Removed unnecessary paragraph tag<\/p>\r\n<\/li>\r\n \t

        • \r\n

          Updated dashed line styling to match directory component (1px dashed)<\/p>\r\n<\/li>\r\n \t

        • \r\n

          Adjusted spacing above and below the label (3rem top, 1rem bottom)<\/p>\r\n<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t

        • \r\n

          Row styling<\/strong><\/p>\r\n\r\n

            \r\n \t
          • \r\n

            Reduced underline thickness from 2px to 1px, using medium gray<\/p>\r\n<\/li>\r\n \t

          • \r\n

            Replaced box-shadow with border-bottom for better consistency<\/p>\r\n<\/li>\r\n \t

          • \r\n

            Updated hover underline from 4px to 2px and applied Core blue<\/p>\r\n<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t

          • \r\n

            Header layout and spacing<\/strong><\/p>\r\n\r\n

              \r\n \t
            • \r\n

              Removed 40px top margin from accordion-title<\/p>\r\n<\/li>\r\n \t

            • \r\n

              Standardized spacing through the accordion-group wrapper<\/p>\r\n<\/li>\r\n \t

            • \r\n

              Vertically aligned icons and expand\/contract buttons to the first line of header text<\/p>\r\n<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t

            • \r\n

              Background options<\/strong><\/p>\r\n\r\n

                \r\n \t
              • \r\n

                Added support for lighter gray background that extends to the edge of the screen<\/p>\r\n<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t

              • \r\n

                General spacing improvements<\/strong><\/p>\r\n\r\n

                  \r\n \t
                • \r\n

                  Shifted spacing to wrappers and groups for better control and cleaner layout<\/p>\r\n<\/li>\r\n \t

                • \r\n

                  Added 1rem left padding to accordion-body so content aligns with header text when icons are used<\/p>\r\n<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>","background_color":"#ffffff","width":"width-large"}],"sidebar":"show__sidebar","sidebar_feed":"menu_select","menu":"342","page_links":null,"sub_menu":"","content_modules":[{"acf_fc_layout":"text","anchor":"video","css_class":"","title":"

                  1. How-to video: Accordion component<\/h2>","content":"