{"id":87723,"date":"2021-09-03T18:13:22","date_gmt":"2021-09-03T22:13:22","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/?p=87723"},"modified":"2021-09-03T18:34:27","modified_gmt":"2021-09-03T22:34:27","slug":"bootstrap-collapse-text","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-collapse-text\/","title":{"rendered":"Using Bootstrap 5 in Joomla 4.0 &#8211; Collapse Text"},"content":{"rendered":"<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-collapse-text-1024x538.jpg\" alt=\"Using Bootstrap 5 in Joomla 4.0 - Collapse Text\" class=\"wp-image-87724\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-collapse-text-1024x538.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-collapse-text-300x158.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-collapse-text-768x403.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-collapse-text.jpg 1200w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>Joomla 4.0 includes Bootstrap (version 5.1) which includes many features to help build a responsive, mobile-prioritized website.\u00a0 One of these features is the ability to collapse text.\u00a0 This option can be set to a button or link and allows a content creator to hide a large text section that can be made visible by the viewer as needed.<br><br>An example of using the collapse text option is to hide a long policy script full of legal terminology.\u00a0 You would make it available to the user, but hide it from general viewing.<\/p>\n\n\n\n<p>Follow the steps below to learn how to use the collapse function in your Joomla articles.<\/p>\n\n\n\n<p class=\"alert alert-warning\">What is Bootstrap?\u00a0 Bootstrap is an HTML, CSS, and JS framework used to build responsive websites that are designed to work with mobile devices.\u00a0 Bootstrap is currently in its 10th year of existence and in its 5th major release. It is part of an astonishing 22% of all websites on the internet.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"#finding-code\">Finding the Vertical Collapse Code<\/a><\/li><li><a href=\"#using-code\">Using the Vertical Collapse Code<\/a><\/li><\/ul>\n\n\n<!-- Shortcode [joomla-vps-1] does not exist -->\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"finding-code\">Finding the Vertical Collapse Code<\/h2>\n\n\n\n<p>When you use Bootstrap, the code is conveniently provided for you. You can modify it for your purposes.\u00a0 The easiest way to find the code is to copy it from our tutorial below.\u00a0 You can also go directly to the <a href=\"https:\/\/getbootstrap.com\/docs\/5.1\/components\/collapse\/\">Bootstrap website for the component code<\/a>.<\/p>\n\n\n\n<p>The default code for a vertical text collapse provided by Bootstrap is:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p&gt;\n  &lt;a class=\"btn btn-primary\" data-bs-toggle=\"collapse\" href=\"#collapseExample\" role=\"button\" aria-expanded=\"false\" aria-controls=\"collapseExample\"&gt;\n    Link with href\n  &lt;\/a&gt;\n  &lt;button class=\"btn btn-primary\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapseExample\" aria-expanded=\"false\" aria-controls=\"collapseExample\"&gt;\n    Button with data-bs-target\n  &lt;\/button&gt;\n&lt;\/p&gt;\n&lt;div class=\"collapse\" id=\"collapseExample\"&gt;\n  &lt;div class=\"card card-body\"&gt;\n    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>This code includes the option for a link and the option to use a button.\u00a0 The code is collapsed by default.<\/p>\n\n\n\n<p>This section of the code is for the content included in the collapse:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"collapseExample\" class=\"collapse\"&gt;\n&lt;div class=\"card card-body\"&gt;Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>If you want to use nothing more than a link then you will need to remove the button portion of the code.\u00a0 The resulting code would look like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p&gt;&lt;a role=\"button\" href=\"#collapseExample\" data-bs-toggle=\"collapse\" aria-expanded=\"false\" aria-controls=\"collapseExample\"&gt; Link with href &lt;\/a&gt;&lt;\/p&gt;\n\n&lt;div id=\"collapseExample\" class=\"collapse\"&gt;\n&lt;div class=\"card card-body\"&gt;Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>The screen captures below show the result of clicking a button set up by the collapse text code (drag the arrows left and right to see the text displayed after clicking on either button):<\/p>\n\n\n\n<figure class=\"wp-block-jetpack-image-compare\"><div class=\"juxtapose\" data-mode=\"horizontal\"><img loading=\"lazy\" decoding=\"async\" id=\"87736\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/collapse-no-text.jpg\" alt=\"\" width=\"1468\" height=\"910\" class=\"image-compare__image-before\"><img loading=\"lazy\" decoding=\"async\" id=\"87737\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/collapse-text-showing.jpg\" alt=\"\" width=\"1468\" height=\"910\" class=\"image-compare__image-after\"><\/div><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"using-code\">Using the Vertical Collapse Code<\/h2>\n\n\n\n<p>Follow the steps below to add the collapse text code in your Joomla article:<br><\/p>\n\n\n\n<ol class=\"article_list wp-block-list\"><li>Log in to the <strong>Joomla Administrator Dashboard<\/strong>.<\/li><li>Edit an existing article or add a new article.<\/li><li>Click on the <strong>Toggle<\/strong> button at the bottom of the editor.<br><br><br><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"387\" class=\"wp-image-87726\" style=\"width: 700px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/toggle-editor-button.jpg\" alt=\"Editor toggle button with code\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/toggle-editor-button.jpg 1379w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/toggle-editor-button-300x166.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/toggle-editor-button-1024x566.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/toggle-editor-button-768x424.jpg 768w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><br><\/li><li>Copy the code that you want to use from above.\u00a0 Paste it into the editor so that it looks similar to this:<br><br><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"386\" class=\"wp-image-87727\" style=\"width: 700px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/code-added.jpg\" alt=\"code added to editor\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/code-added.jpg 1377w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/code-added-300x166.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/code-added-1024x565.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/code-added-768x424.jpg 768w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><br>Note that the text for the buttons are set as \u201cLink with href\u201d and \u201cButton with data-bs-target\u201d.\u00a0 You can change the text to whatever you wish to use.<br><\/li><li>Click on the <strong>Save<\/strong> or <strong>Save and close<\/strong> button at the top left of the editor to save your changes.<br><\/li><\/ol>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Congratulations! You now know how to add the collapse text code in the editor for Joomla! 4.0.\u00a0 This will allow you to sections of text that you may not want to show unless the customer wants to see it.<\/p>\n\n\n\n<p>To learn more about using Joomla, check out our <a href=\"https:\/\/www.inmotionhosting.com\/support\/\">InMotion Hosting Support Center website<\/a>.<\/p>\n\n\n<div class=\"jumbotron\">Discover how InMotion Hosting's virtual private servers can deliver power and performance for your Joomla site with our reliable <a href=\"https:\/\/www.inmotionhosting.com\/joomla-hosting\">Joomla Hosting<\/a> plans.<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Joomla 4.0 includes Bootstrap (version 5.1) which includes many features to help build a responsive, mobile-prioritized website.\u00a0 One of these features is the ability to collapse text.\u00a0 This option can be set to a button or link and allows a content creator to hide a large text section that can be made visible by the<a class=\"moretag\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-collapse-text\/\"> Read More ><\/a><\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4496],"tags":[],"class_list":["post-87723","post","type-post","status-publish","format-standard","hentry","category-joomla-4"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Using Bootstrap 5 in Joomla 4.0 - Collapse Text | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"Learn how to use the collapse text Bootstrap 5 code in your Joomla 4.0 article. You will see how it can help hide unnecessary long strings of text.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-collapse-text\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using Bootstrap 5 in Joomla 4.0 - Collapse Text | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"Learn how to use the collapse text Bootstrap 5 code in your Joomla 4.0 article. You will see how it can help hide unnecessary long strings of text.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-collapse-text\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-03T22:13:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-09-03T22:34:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-collapse-text.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"InMotion Hosting Contributor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InMotion Hosting Contributor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-collapse-text\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-collapse-text\/\"},\"author\":{\"name\":\"InMotion Hosting Contributor\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/8d626175dd3b70ee90a172bdb09a460b\"},\"headline\":\"Using Bootstrap 5 in Joomla 4.0 &#8211; Collapse Text\",\"datePublished\":\"2021-09-03T22:13:22+00:00\",\"dateModified\":\"2021-09-03T22:34:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-collapse-text\/\"},\"wordCount\":516,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-collapse-text\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-collapse-text-1024x538.jpg\",\"articleSection\":[\"Joomla 4\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-collapse-text\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-collapse-text\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-collapse-text\/\",\"name\":\"Using Bootstrap 5 in Joomla 4.0 - Collapse Text | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-collapse-text\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-collapse-text\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-collapse-text-1024x538.jpg\",\"datePublished\":\"2021-09-03T22:13:22+00:00\",\"dateModified\":\"2021-09-03T22:34:27+00:00\",\"description\":\"Learn how to use the collapse text Bootstrap 5 code in your Joomla 4.0 article. You will see how it can help hide unnecessary long strings of text.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-collapse-text\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-collapse-text\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-collapse-text\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-collapse-text.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-collapse-text.jpg\",\"width\":1200,\"height\":630,\"caption\":\"Using Bootstrap 5 in Joomla 4.0 - Collapse Text\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-collapse-text\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using Bootstrap 5 in Joomla 4.0 &#8211; Collapse Text\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support &amp; Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/8d626175dd3b70ee90a172bdb09a460b\",\"name\":\"InMotion Hosting Contributor\",\"description\":\"InMotion Hosting contributors are highly knowledgeable individuals who create relevant content on new trends and troubleshooting techniques to help you achieve your online goals!\",\"sameAs\":[\"https:\/\/www.linkedin.com\/company\/inmotion-hosting\/\",\"https:\/\/x.com\/https:\/\/twitter.com\/InMotionHosting\"],\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/arn\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Using Bootstrap 5 in Joomla 4.0 - Collapse Text | InMotion Hosting","description":"Learn how to use the collapse text Bootstrap 5 code in your Joomla 4.0 article. You will see how it can help hide unnecessary long strings of text.","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:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-collapse-text\/","og_locale":"en_US","og_type":"article","og_title":"Using Bootstrap 5 in Joomla 4.0 - Collapse Text | InMotion Hosting","og_description":"Learn how to use the collapse text Bootstrap 5 code in your Joomla 4.0 article. You will see how it can help hide unnecessary long strings of text.","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-collapse-text\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2021-09-03T22:13:22+00:00","article_modified_time":"2021-09-03T22:34:27+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-collapse-text.jpg","type":"image\/jpeg"}],"author":"InMotion Hosting Contributor","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"InMotion Hosting Contributor","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-collapse-text\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-collapse-text\/"},"author":{"name":"InMotion Hosting Contributor","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/8d626175dd3b70ee90a172bdb09a460b"},"headline":"Using Bootstrap 5 in Joomla 4.0 &#8211; Collapse Text","datePublished":"2021-09-03T22:13:22+00:00","dateModified":"2021-09-03T22:34:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-collapse-text\/"},"wordCount":516,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-collapse-text\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-collapse-text-1024x538.jpg","articleSection":["Joomla 4"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-collapse-text\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-collapse-text\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-collapse-text\/","name":"Using Bootstrap 5 in Joomla 4.0 - Collapse Text | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-collapse-text\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-collapse-text\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-collapse-text-1024x538.jpg","datePublished":"2021-09-03T22:13:22+00:00","dateModified":"2021-09-03T22:34:27+00:00","description":"Learn how to use the collapse text Bootstrap 5 code in your Joomla 4.0 article. You will see how it can help hide unnecessary long strings of text.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-collapse-text\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-collapse-text\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-collapse-text\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-collapse-text.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-collapse-text.jpg","width":1200,"height":630,"caption":"Using Bootstrap 5 in Joomla 4.0 - Collapse Text"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-collapse-text\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"Using Bootstrap 5 in Joomla 4.0 &#8211; Collapse Text"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support &amp; Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/8d626175dd3b70ee90a172bdb09a460b","name":"InMotion Hosting Contributor","description":"InMotion Hosting contributors are highly knowledgeable individuals who create relevant content on new trends and troubleshooting techniques to help you achieve your online goals!","sameAs":["https:\/\/www.linkedin.com\/company\/inmotion-hosting\/","https:\/\/x.com\/https:\/\/twitter.com\/InMotionHosting"],"url":"https:\/\/www.inmotionhosting.com\/support\/author\/arn\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":{"id":4496,"name":"Joomla 4","slug":"joomla-4","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/"},"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/87723","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=87723"}],"version-history":[{"count":2,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/87723\/revisions"}],"predecessor-version":[{"id":87738,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/87723\/revisions\/87738"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=87723"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=87723"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=87723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}