{"id":73,"date":"2026-02-11T16:18:06","date_gmt":"2026-02-11T16:18:06","guid":{"rendered":"https:\/\/teton.wwwdev.uwosh.edu\/web\/?page_id=73"},"modified":"2026-02-18T20:19:41","modified_gmt":"2026-02-18T20:19:41","slug":"vertical-tabs-block","status":"publish","type":"page","link":"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/vertical-tabs-block\/","title":{"rendered":"Vertical Tabs Block"},"content":{"rendered":"\n<section class=\"Hero circles\" data-animate>\n  \n\n<div class=\"Common\">\n  \n\n<h1 class=\"wp-block-heading\">Vertical Tabs Block<\/h1>\n\n\n\n<div class=\"wp-block-buttons\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/\">Return to CMS Guide<\/a><\/div>\n<\/div>\n\n<\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"600\" src=\"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-content\/uploads\/sites\/3\/2026\/02\/900x600.jpg\" alt=\"placeholder 900 x 600\" class=\"wp-image-9\" style=\"aspect-ratio:3\/2;object-fit:cover\" srcset=\"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-content\/uploads\/sites\/3\/2026\/02\/900x600.jpg 900w, https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-content\/uploads\/sites\/3\/2026\/02\/900x600-300x200.jpg 300w, https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-content\/uploads\/sites\/3\/2026\/02\/900x600-768x512.jpg 768w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/figure>\n\n<\/section>\n\n\n\n<div class=\"Common\">\n  \n\n<p class=\"is-style-intro\">The Vertical Tabs block provides related information in a visually engaging format. It is well suited to present timeline information, and details for processes. The block contains a heading, intro text, an optional call to action, and vertical tabs items. Each vertical tabs item contains a tab label, a heading, paragraph, and an optional call to action. When the block is first placed on the page, only one vertical tabs item exists. This can be duplicated as needed for the number of desired tabs. Explore the functional example below for more details.<\/p>\n\n<\/div>\n\n\n\n<section class=\"Section is-style-dark-inset circles\">\n  \n\n<div class=\"Common\">\n  \n\n<h2 class=\"wp-block-heading\">Vertical Tabs Example<\/h2>\n\n\n\n<p>This intro text is used to provide additional context and details for the information in the tabs. Best practice is to limit this text to 1-5 sentences.<\/p>\n\n<\/div>\n\n\n\n<div class=\"VerticalTabs\">\n  \n\n<div class=\"VerticalTabsItem\">\n  <h3 class=\"VerticalTabsItem__heading\">\n    <button class=\"VerticalTabsItem__toggle\" aria-expanded=\"false\">Vertical Tabs Item<\/button>\n  <\/h3>\n  <div class=\"VerticalTabsItem__content\">\n    <div class=\"VerticalTabsItem__interior\">\n      \n\n<div class=\"Common\">\n  \n\n<h4 class=\"wp-block-heading\">Vertical Tabs Item Heading<\/h4>\n\n\n\n<p>The paragraph text for each item contains details for the timeline or process. More than one paragraph can be used within each item.<\/p>\n\n\n\n<p>Pellentesque convallis eros nec est pellentesque laoreet. Duis elementum, eros vitae fringilla porta, lacus justo pretium urna, ac consequat nisi tellus at lorem. Curabitur nec viverra diam, quis accumsan ante.<\/p>\n\n\n\n<div class=\"wp-block-buttons\">\n<div class=\"wp-block-button is-style-underline\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/\">Optional Call to Action<\/a><\/div>\n<\/div>\n\n<\/div>\n\n    <\/div>\n  <\/div>\n<\/div>\n\n\n\n<div class=\"VerticalTabsItem\">\n  <h3 class=\"VerticalTabsItem__heading\">\n    <button class=\"VerticalTabsItem__toggle\" aria-expanded=\"false\">Lorem Ipsum<\/button>\n  <\/h3>\n  <div class=\"VerticalTabsItem__content\">\n    <div class=\"VerticalTabsItem__interior\">\n      \n\n<div class=\"Common\">\n  \n\n<h4 class=\"wp-block-heading\">Dolor sit Amet Consectetur<\/h4>\n\n\n\n<p>Donec eget porttitor nibh. Quisque semper nisi lectus. Sed vel magna nec orci malesuada sollicitudin. Nulla hendrerit, dolor eget tempor varius, metus nunc dapibus dolor, vitae interdum nisi neque id felis. In maximus purus pharetra mauris porttitor pellentesque. Pellentesque ultricies, enim eu bibendum mattis, urna est malesuada arcu, eget auctor lectus dui a eros. Pellentesque et rutrum ex. Fusce sagittis varius erat eget placerat. Suspendisse blandit dui nulla, id elementum nisi auctor nec.<\/p>\n\n<\/div>\n\n    <\/div>\n  <\/div>\n<\/div>\n\n\n\n<div class=\"VerticalTabsItem\">\n  <h3 class=\"VerticalTabsItem__heading\">\n    <button class=\"VerticalTabsItem__toggle\" aria-expanded=\"false\">Suspendisse in Suscipit Elit<\/button>\n  <\/h3>\n  <div class=\"VerticalTabsItem__content\">\n    <div class=\"VerticalTabsItem__interior\">\n      \n\n<div class=\"Common\">\n  \n\n<h4 class=\"wp-block-heading\">Ut Luctus Lectus in Dignissim Maximus<\/h4>\n\n\n\n<p>Sed posuere est ut imperdiet posuere. Quisque quis tempor ipsum. Donec nec odio in sem sagittis finibus in feugiat magna. Duis sit amet nibh orci. Nam ac sem nisi. Sed sit amet dolor orci. Fusce maximus, <strong>arcu et posuere vehicula<\/strong>, mi dui lobortis ligula, non fringilla diam urna ut ligula.<\/p>\n\n\n\n<div class=\"wp-block-buttons\">\n<div class=\"wp-block-button is-style-underline\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/\">Optional Call to Action<\/a><\/div>\n<\/div>\n\n<\/div>\n\n    <\/div>\n  <\/div>\n<\/div>\n\n\n\n<div class=\"VerticalTabsItem\">\n  <h3 class=\"VerticalTabsItem__heading\">\n    <button class=\"VerticalTabsItem__toggle\" aria-expanded=\"false\">Curabitur Auctor<\/button>\n  <\/h3>\n  <div class=\"VerticalTabsItem__content\">\n    <div class=\"VerticalTabsItem__interior\">\n      \n\n<div class=\"Common\">\n  \n\n<h4 class=\"wp-block-heading\">Aenean Accumsan Dictum Facilisis<\/h4>\n\n\n\n<p>Cras sagittis augue non arcu aliquam, vitae bibendum risus tristique. Vestibulum facilisis, tortor et sodales laoreet, libero tortor mattis enim, a finibus augue tortor ac augue. Fusce nec risus eget justo suscipit imperdiet. Fusce aliquam porttitor fermentum. Mauris condimentum euismod tellus, nec laoreet erat luctus id. Donec ac erat quis odio tempus scelerisque quis eu libero. Vestibulum quis tempus dolor. Phasellus eu felis nec erat tristique ultrices venenatis facilisis augue. Nunc efficitur leo tortor, at suscipit enim consequat nec. Nulla est velit, viverra sit amet nibh a, interdum pharetra lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam in orci aliquam, tristique erat sit amet, vestibulum quam. Mauris risus ante, iaculis id pharetra eget, rutrum quis lacus. Curabitur commodo quam non viverra ornare. Duis sit amet nulla mi. Integer efficitur sed sapien vel congue.<\/p>\n\n<\/div>\n\n    <\/div>\n  <\/div>\n<\/div>\n\n<\/div>\n\n\n\n<div class=\"wp-block-buttons\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\">Optional Call to Action<\/a><\/div>\n<\/div>\n\n<\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":3,"featured_media":0,"parent":5,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-73","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Vertical Tabs Block - Web Guide<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/vertical-tabs-block\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vertical Tabs Block - Web Guide\" \/>\n<meta property=\"og:url\" content=\"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/vertical-tabs-block\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Guide\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-18T20:19:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-content\/uploads\/sites\/3\/2026\/02\/900x600.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/vertical-tabs-block\/\",\"url\":\"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/vertical-tabs-block\/\",\"name\":\"Vertical Tabs Block - Web Guide\",\"isPartOf\":{\"@id\":\"https:\/\/teton.wwwdev.uwosh.edu\/web\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/vertical-tabs-block\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/vertical-tabs-block\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-content\/uploads\/sites\/3\/2026\/02\/900x600.jpg\",\"datePublished\":\"2026-02-11T16:18:06+00:00\",\"dateModified\":\"2026-02-18T20:19:41+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/vertical-tabs-block\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/vertical-tabs-block\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/vertical-tabs-block\/#primaryimage\",\"url\":\"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-content\/uploads\/sites\/3\/2026\/02\/900x600.jpg\",\"contentUrl\":\"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-content\/uploads\/sites\/3\/2026\/02\/900x600.jpg\",\"width\":900,\"height\":600,\"caption\":\"placeholder 900 x 600\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/vertical-tabs-block\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/teton.wwwdev.uwosh.edu\/web\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CMS Guide\",\"item\":\"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Vertical Tabs Block\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/teton.wwwdev.uwosh.edu\/web\/#website\",\"url\":\"https:\/\/teton.wwwdev.uwosh.edu\/web\/\",\"name\":\"Web Guide\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/teton.wwwdev.uwosh.edu\/web\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Vertical Tabs Block - Web Guide","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/vertical-tabs-block\/","og_locale":"en_US","og_type":"article","og_title":"Vertical Tabs Block - Web Guide","og_url":"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/vertical-tabs-block\/","og_site_name":"Web Guide","article_modified_time":"2026-02-18T20:19:41+00:00","og_image":[{"width":900,"height":600,"url":"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-content\/uploads\/sites\/3\/2026\/02\/900x600.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/vertical-tabs-block\/","url":"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/vertical-tabs-block\/","name":"Vertical Tabs Block - Web Guide","isPartOf":{"@id":"https:\/\/teton.wwwdev.uwosh.edu\/web\/#website"},"primaryImageOfPage":{"@id":"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/vertical-tabs-block\/#primaryimage"},"image":{"@id":"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/vertical-tabs-block\/#primaryimage"},"thumbnailUrl":"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-content\/uploads\/sites\/3\/2026\/02\/900x600.jpg","datePublished":"2026-02-11T16:18:06+00:00","dateModified":"2026-02-18T20:19:41+00:00","breadcrumb":{"@id":"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/vertical-tabs-block\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/vertical-tabs-block\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/vertical-tabs-block\/#primaryimage","url":"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-content\/uploads\/sites\/3\/2026\/02\/900x600.jpg","contentUrl":"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-content\/uploads\/sites\/3\/2026\/02\/900x600.jpg","width":900,"height":600,"caption":"placeholder 900 x 600"},{"@type":"BreadcrumbList","@id":"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/vertical-tabs-block\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/teton.wwwdev.uwosh.edu\/web\/"},{"@type":"ListItem","position":2,"name":"CMS Guide","item":"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/"},{"@type":"ListItem","position":3,"name":"Vertical Tabs Block"}]},{"@type":"WebSite","@id":"https:\/\/teton.wwwdev.uwosh.edu\/web\/#website","url":"https:\/\/teton.wwwdev.uwosh.edu\/web\/","name":"Web Guide","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/teton.wwwdev.uwosh.edu\/web\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-json\/wp\/v2\/pages\/73","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-json\/wp\/v2\/comments?post=73"}],"version-history":[{"count":4,"href":"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-json\/wp\/v2\/pages\/73\/revisions"}],"predecessor-version":[{"id":235,"href":"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-json\/wp\/v2\/pages\/73\/revisions\/235"}],"up":[{"embeddable":true,"href":"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-json\/wp\/v2\/pages\/5"}],"wp:attachment":[{"href":"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-json\/wp\/v2\/media?parent=73"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}