{"id":1222465,"date":"2026-05-31T21:42:57","date_gmt":"2026-05-31T21:42:57","guid":{"rendered":"https:\/\/wordpress.org\/patterns\/?post_type=wporg-pattern&#038;p=1222465"},"modified":"2026-05-31T21:42:57","modified_gmt":"2026-05-31T21:42:57","slug":"expandable-resource-guide","status":"publish","type":"wporg-pattern","link":"https:\/\/wordpress.org\/patterns\/pattern\/expandable-resource-guide\/","title":{"rendered":"Expandable resource guide"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull has-text-color has-background is-layout-constrained wp-container-core-group-is-layout-76e0d23e wp-block-group-is-layout-constrained\" style=\"color:#111827;background-color:#EEF6FF;padding-top:72px;padding-right:24px;padding-bottom:72px;padding-left:24px\">\n<div class=\"wp-block-group alignwide is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-c9818ec5 wp-block-group-is-layout-constrained\">\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#1D4ED8;font-size:13px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase\">Resource guide<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-text-color\" style=\"color:#0F172A;font-size:54px;font-weight:800;letter-spacing:0;line-height:1.02\">Help visitors find the right information faster.<\/h2>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#475569;font-size:18px;line-height:1.7\">Use this expandable section for help centers, service pages, onboarding guides, public resources, program details, or documentation landing pages.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-d4b6b5b5 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:36%\">\n<div class=\"wp-block-group has-text-color has-background is-layout-constrained wp-container-core-group-is-layout-33cea69f wp-block-group-is-layout-constrained\" style=\"border-radius:24px;color:#F8FAFC;background-color:#0F172A;padding-top:28px;padding-right:28px;padding-bottom:28px;padding-left:28px\">\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#93C5FD;font-size:13px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase\">Start here<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color\" style=\"color:#FFFFFF;font-size:30px;font-weight:800;letter-spacing:0;line-height:1.12\">Turn long information into clear choices.<\/h3>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#CBD5E1;font-size:16px;line-height:1.65\">Edit each expandable row with the questions, sections, or topics your visitors need most.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-alpha-channel-opacity has-background\" style=\"background-color:#334155;color:#334155\" \/>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#E0F2FE;font-size:15px;font-weight:700;line-height:1.7\">Good for FAQs, eligibility notes, setup guides, service explanations, policy summaries, and support pages.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:64%\">\n<div class=\"wp-block-group is-layout-constrained wp-container-core-group-is-layout-6b30a1d1 wp-block-group-is-layout-constrained\">\n<details class=\"wp-block-details has-border-color has-text-color has-background is-layout-flow wp-block-details-is-layout-flow\" style=\"border-color:#BFDBFE;border-width:1px;border-radius:18px;color:#111827;background-color:#FFFFFF;padding-top:20px;padding-right:22px;padding-bottom:20px;padding-left:22px\"><summary>What should someone read first?<\/summary>\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#475569;margin-top:12px;font-size:15px;line-height:1.65\">Use this answer to point people to the most important overview, checklist, service page, setup guide, or introductory resource.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details has-border-color has-text-color has-background is-layout-flow wp-block-details-is-layout-flow\" style=\"border-color:#BBF7D0;border-width:1px;border-radius:18px;color:#111827;background-color:#FFFFFF;padding-top:20px;padding-right:22px;padding-bottom:20px;padding-left:22px\"><summary>Who is this information for?<\/summary>\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#475569;margin-top:12px;font-size:15px;line-height:1.65\">Clarify the audience so visitors can quickly decide whether the guide, program, service, or resource applies to their situation.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details has-border-color has-text-color has-background is-layout-flow wp-block-details-is-layout-flow\" style=\"border-color:#FDE68A;border-width:1px;border-radius:18px;color:#111827;background-color:#FFFFFF;padding-top:20px;padding-right:22px;padding-bottom:20px;padding-left:22px\"><summary>What should visitors prepare?<\/summary>\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#475569;margin-top:12px;font-size:15px;line-height:1.65\">List the details, documents, questions, account information, or decisions that help people complete the next step without confusion.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details has-border-color has-text-color has-background is-layout-flow wp-block-details-is-layout-flow\" style=\"border-color:#DDD6FE;border-width:1px;border-radius:18px;color:#111827;background-color:#FFFFFF;padding-top:20px;padding-right:22px;padding-bottom:20px;padding-left:22px\"><summary>Where should they go next?<\/summary>\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#475569;margin-top:12px;font-size:15px;line-height:1.65\">Add links or directions to the next resource, contact page, signup step, documentation page, event details, or support channel.<\/p>\n<\/details>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":9676419,"parent":0,"template":"","meta":{"wpop_keywords":"text, details, accordion, resource, guide, faq, documentation","wpop_description":"A text-only expandable resource guide with a dark intro panel and four editable detail rows for help centers, onboarding, service pages, documentation, and public resources.","wpop_viewport_width":1200,"wpop_block_types":[],"wpop_locale":"en_US","wpop_wp_version":"","wpop_contains_block_types":"core\/column,core\/columns,core\/details,core\/group,core\/heading,core\/paragraph,core\/separator","footnotes":""},"pattern-categories":[3,6],"pattern-keywords":[],"wporg-pattern-flag-reason":[],"class_list":["post-1222465","wporg-pattern","type-wporg-pattern","status-publish","hentry","wporg-pattern-category-columns","wporg-pattern-category-text"],"category_slugs":["columns","text"],"keyword_slugs":[],"pattern_content":"<!-- wp:group {\"align\":\"full\",\"style\":{\"color\":{\"background\":\"#EEF6FF\",\"text\":\"#111827\"},\"spacing\":{\"padding\":{\"top\":\"72px\",\"right\":\"24px\",\"bottom\":\"72px\",\"left\":\"24px\"},\"blockGap\":\"36px\"}},\"layout\":{\"type\":\"constrained\",\"contentSize\":\"1120px\"}} -->\n<div class=\"wp-block-group alignfull has-text-color has-background\" style=\"color:#111827;background-color:#EEF6FF;padding-top:72px;padding-right:24px;padding-bottom:72px;padding-left:24px\"><!-- wp:group {\"align\":\"wide\",\"style\":{\"spacing\":{\"blockGap\":\"14px\"}},\"layout\":{\"type\":\"constrained\",\"contentSize\":\"760px\",\"justifyContent\":\"left\"}} -->\n<div class=\"wp-block-group alignwide\"><!-- wp:paragraph {\"style\":{\"typography\":{\"fontSize\":\"13px\",\"fontWeight\":\"800\",\"letterSpacing\":\"0.08em\",\"textTransform\":\"uppercase\"},\"color\":{\"text\":\"#1D4ED8\"}}} -->\n<p class=\"has-text-color\" style=\"color:#1D4ED8;font-size:13px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase\">Resource guide<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"style\":{\"typography\":{\"fontSize\":\"54px\",\"fontWeight\":\"800\",\"lineHeight\":\"1.02\",\"letterSpacing\":\"0\"},\"color\":{\"text\":\"#0F172A\"}}} -->\n<h2 class=\"wp-block-heading has-text-color\" style=\"color:#0F172A;font-size:54px;font-weight:800;letter-spacing:0;line-height:1.02\">Help visitors find the right information faster.<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph {\"style\":{\"typography\":{\"fontSize\":\"18px\",\"lineHeight\":\"1.7\"},\"color\":{\"text\":\"#475569\"}}} -->\n<p class=\"has-text-color\" style=\"color:#475569;font-size:18px;line-height:1.7\">Use this expandable section for help centers, service pages, onboarding guides, public resources, program details, or documentation landing pages.<\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:columns {\"align\":\"wide\",\"style\":{\"spacing\":{\"blockGap\":{\"top\":\"24px\",\"left\":\"24px\"}}}} -->\n<div class=\"wp-block-columns alignwide\"><!-- wp:column {\"width\":\"36%\"} -->\n<div class=\"wp-block-column\" style=\"flex-basis:36%\"><!-- wp:group {\"style\":{\"color\":{\"background\":\"#0F172A\",\"text\":\"#F8FAFC\"},\"border\":{\"radius\":\"24px\"},\"spacing\":{\"padding\":{\"top\":\"28px\",\"right\":\"28px\",\"bottom\":\"28px\",\"left\":\"28px\"},\"blockGap\":\"20px\"}},\"layout\":{\"type\":\"constrained\"}} -->\n<div class=\"wp-block-group has-text-color has-background\" style=\"border-radius:24px;color:#F8FAFC;background-color:#0F172A;padding-top:28px;padding-right:28px;padding-bottom:28px;padding-left:28px\"><!-- wp:paragraph {\"style\":{\"typography\":{\"fontSize\":\"13px\",\"fontWeight\":\"800\",\"letterSpacing\":\"0.08em\",\"textTransform\":\"uppercase\"},\"color\":{\"text\":\"#93C5FD\"}}} -->\n<p class=\"has-text-color\" style=\"color:#93C5FD;font-size:13px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase\">Start here<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3,\"style\":{\"typography\":{\"fontSize\":\"30px\",\"fontWeight\":\"800\",\"lineHeight\":\"1.12\",\"letterSpacing\":\"0\"},\"color\":{\"text\":\"#FFFFFF\"}}} -->\n<h3 class=\"wp-block-heading has-text-color\" style=\"color:#FFFFFF;font-size:30px;font-weight:800;letter-spacing:0;line-height:1.12\">Turn long information into clear choices.<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph {\"style\":{\"typography\":{\"fontSize\":\"16px\",\"lineHeight\":\"1.65\"},\"color\":{\"text\":\"#CBD5E1\"}}} -->\n<p class=\"has-text-color\" style=\"color:#CBD5E1;font-size:16px;line-height:1.65\">Edit each expandable row with the questions, sections, or topics your visitors need most.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:separator {\"style\":{\"color\":{\"background\":\"#334155\"}}} -->\n<hr class=\"wp-block-separator has-text-color has-alpha-channel-opacity has-background\" style=\"background-color:#334155;color:#334155\" \/>\n<!-- \/wp:separator -->\n\n<!-- wp:paragraph {\"style\":{\"typography\":{\"fontSize\":\"15px\",\"lineHeight\":\"1.7\",\"fontWeight\":\"700\"},\"color\":{\"text\":\"#E0F2FE\"}}} -->\n<p class=\"has-text-color\" style=\"color:#E0F2FE;font-size:15px;font-weight:700;line-height:1.7\">Good for FAQs, eligibility notes, setup guides, service explanations, policy summaries, and support pages.<\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:group --><\/div>\n<!-- \/wp:column -->\n\n<!-- wp:column {\"width\":\"64%\"} -->\n<div class=\"wp-block-column\" style=\"flex-basis:64%\"><!-- wp:group {\"style\":{\"spacing\":{\"blockGap\":\"14px\"}},\"layout\":{\"type\":\"constrained\"}} -->\n<div class=\"wp-block-group\"><!-- wp:details {\"style\":{\"color\":{\"background\":\"#FFFFFF\",\"text\":\"#111827\"},\"border\":{\"color\":\"#BFDBFE\",\"width\":\"1px\",\"radius\":\"18px\"},\"spacing\":{\"padding\":{\"top\":\"20px\",\"right\":\"22px\",\"bottom\":\"20px\",\"left\":\"22px\"}}}} -->\n<details class=\"wp-block-details has-border-color has-text-color has-background\" style=\"border-color:#BFDBFE;border-width:1px;border-radius:18px;color:#111827;background-color:#FFFFFF;padding-top:20px;padding-right:22px;padding-bottom:20px;padding-left:22px\"><summary>What should someone read first?<\/summary><!-- wp:paragraph {\"style\":{\"typography\":{\"fontSize\":\"15px\",\"lineHeight\":\"1.65\"},\"color\":{\"text\":\"#475569\"},\"spacing\":{\"margin\":{\"top\":\"12px\"}}}} -->\n<p class=\"has-text-color\" style=\"color:#475569;margin-top:12px;font-size:15px;line-height:1.65\">Use this answer to point people to the most important overview, checklist, service page, setup guide, or introductory resource.<\/p>\n<!-- \/wp:paragraph --><\/details>\n<!-- \/wp:details -->\n\n<!-- wp:details {\"style\":{\"color\":{\"background\":\"#FFFFFF\",\"text\":\"#111827\"},\"border\":{\"color\":\"#BBF7D0\",\"width\":\"1px\",\"radius\":\"18px\"},\"spacing\":{\"padding\":{\"top\":\"20px\",\"right\":\"22px\",\"bottom\":\"20px\",\"left\":\"22px\"}}}} -->\n<details class=\"wp-block-details has-border-color has-text-color has-background\" style=\"border-color:#BBF7D0;border-width:1px;border-radius:18px;color:#111827;background-color:#FFFFFF;padding-top:20px;padding-right:22px;padding-bottom:20px;padding-left:22px\"><summary>Who is this information for?<\/summary><!-- wp:paragraph {\"style\":{\"typography\":{\"fontSize\":\"15px\",\"lineHeight\":\"1.65\"},\"color\":{\"text\":\"#475569\"},\"spacing\":{\"margin\":{\"top\":\"12px\"}}}} -->\n<p class=\"has-text-color\" style=\"color:#475569;margin-top:12px;font-size:15px;line-height:1.65\">Clarify the audience so visitors can quickly decide whether the guide, program, service, or resource applies to their situation.<\/p>\n<!-- \/wp:paragraph --><\/details>\n<!-- \/wp:details -->\n\n<!-- wp:details {\"style\":{\"color\":{\"background\":\"#FFFFFF\",\"text\":\"#111827\"},\"border\":{\"color\":\"#FDE68A\",\"width\":\"1px\",\"radius\":\"18px\"},\"spacing\":{\"padding\":{\"top\":\"20px\",\"right\":\"22px\",\"bottom\":\"20px\",\"left\":\"22px\"}}}} -->\n<details class=\"wp-block-details has-border-color has-text-color has-background\" style=\"border-color:#FDE68A;border-width:1px;border-radius:18px;color:#111827;background-color:#FFFFFF;padding-top:20px;padding-right:22px;padding-bottom:20px;padding-left:22px\"><summary>What should visitors prepare?<\/summary><!-- wp:paragraph {\"style\":{\"typography\":{\"fontSize\":\"15px\",\"lineHeight\":\"1.65\"},\"color\":{\"text\":\"#475569\"},\"spacing\":{\"margin\":{\"top\":\"12px\"}}}} -->\n<p class=\"has-text-color\" style=\"color:#475569;margin-top:12px;font-size:15px;line-height:1.65\">List the details, documents, questions, account information, or decisions that help people complete the next step without confusion.<\/p>\n<!-- \/wp:paragraph --><\/details>\n<!-- \/wp:details -->\n\n<!-- wp:details {\"style\":{\"color\":{\"background\":\"#FFFFFF\",\"text\":\"#111827\"},\"border\":{\"color\":\"#DDD6FE\",\"width\":\"1px\",\"radius\":\"18px\"},\"spacing\":{\"padding\":{\"top\":\"20px\",\"right\":\"22px\",\"bottom\":\"20px\",\"left\":\"22px\"}}}} -->\n<details class=\"wp-block-details has-border-color has-text-color has-background\" style=\"border-color:#DDD6FE;border-width:1px;border-radius:18px;color:#111827;background-color:#FFFFFF;padding-top:20px;padding-right:22px;padding-bottom:20px;padding-left:22px\"><summary>Where should they go next?<\/summary><!-- wp:paragraph {\"style\":{\"typography\":{\"fontSize\":\"15px\",\"lineHeight\":\"1.65\"},\"color\":{\"text\":\"#475569\"},\"spacing\":{\"margin\":{\"top\":\"12px\"}}}} -->\n<p class=\"has-text-color\" style=\"color:#475569;margin-top:12px;font-size:15px;line-height:1.65\">Add links or directions to the next resource, contact page, signup step, documentation page, event details, or support channel.<\/p>\n<!-- \/wp:paragraph --><\/details>\n<!-- \/wp:details --><\/div>\n<!-- \/wp:group --><\/div>\n<!-- \/wp:column --><\/div>\n<!-- \/wp:columns --><\/div>\n<!-- \/wp:group -->","favorite_count":0,"author_meta":{"name":"Kamran Abdul Aziz","url":"https:\/\/wordpress.org\/patterns\/author\/ekamran","avatar":"https:\/\/secure.gravatar.com\/avatar\/60e988ec792fd9d57b323806b34dc0166b4f604f5d3fe30a567d3c90be6b01b5?s=64&d=mm&r=g"},"unlisted_reason":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/1222465","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern"}],"about":[{"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/types\/wporg-pattern"}],"version-history":[{"count":1,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/1222465\/revisions"}],"predecessor-version":[{"id":1222468,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/1222465\/revisions\/1222468"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wporg\/v1\/users\/ekamran"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/media?parent=1222465"}],"wp:term":[{"taxonomy":"wporg-pattern-category","embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/pattern-categories?post=1222465"},{"taxonomy":"wporg-pattern-keyword","embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/pattern-keywords?post=1222465"},{"taxonomy":"wporg-pattern-flag-reason","embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern-flag-reason?post=1222465"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}