Collapsible text is maybe the most basic of interactive design outlines on your site. This enables you to hook and eye the visibility of the text or content by clicking that label of content. This article will help you know how to add a collapsible text. So, sit back, relax and continue reading.
Detailed Process on Adding a Collapsible Text
Website builders comfortable editing HTML can add collapsing text directly to text widget or content page. If you have a place in a collapsing section, you can edit it with the use of the WYSIWYG editor.
Increase the size of the WYSIWYG toolbar to see clearly the HTML button. Once you press the button, a pop-up will come into view that where you can directly edit the HTML text of your content.
Every collapsible text should have a container div surrounding the entire chunk, a heading that acts as the organizer, and a target div that surrounds the text you like to collapse. It is vital to use the right tags as well as class labels for every item, or else the collapsed text will not function.
You can use the div with class= “openberkeley-collapsible-container” for the container.
You can utilize a heading (h2, h3, h4, or h5) with class=”openberkeley-collapsible-controller” for controller.
Utilize div with class=”openberkeley-collapsible-target” for target text.
You can copy and paste the sample code below into HTML editing windows. Add the text even when there’s already HTML in the window; just ensure to copy and paste the code in the right position.
In the sample code below, swap the text in the <h2> (the controller heading) tag as well as the <p> (paragraph target content) tag with the collapsed text.
Example
<textarea style="width:100%;min-height:500px;">
<div class="openberkeley-collapsible-container">
<h2 class="openberkeley-collapsible-controller">Line of collapsible text</h2>
<div class="openberkeley-collapsible-target">
<p>In hac habitasse platea dictumst. Suspendisse dictum, velit vel vehicula gravida,
turpis nulla dignissim nibh, a tristique enim dui vestibulum enim. Duis cursus
euismod diam vitae gravida. Etiam a purus lorem.</p>
</div>
</div>
<div class="openberkeley-collapsible-container">
<h2 class="openberkeley-collapsible-controller">Another line of collapsible text</h2>
<div class="openberkeley-collapsible-target">
<p>Here is another paragraph that will expand. It can be long or short. You can add any formatting and layout you want to a collapsible item. For example:</p>
<h3>Here is a subheading</h3>
<p>More text.</p>
<table>
<tbody>
<tr><th>Table header</th><th>Table header 2</th></tr>
<tr>
<td>Content of table</td>
<td>More content of table</td>
</tr>
</tbody>
</table>
</div>
</div>
<h2>No longer expanding!</h2>
<p>This stuff is just regular.</p>
</textarea>When done doing this, press the Update button. Here, you’ll see your alterations mirrored in the WYSIWYG editor.
Every target and controller will be shown in the editor that has a dotted or dashed border. The borders will not be revealed if you see the saved webpage. If you have made a collapsible text in the HTMP pop-up, these borders will assists you in editing the content later on with no need of opening the HTML view.
Once you go to the web page, all text starts to collapse. To expand, press the controller heading. The collapse task has been tried for accessibility. It works very well for screenreaders as well as keyboard users only.
Collapse All
If you wish, you can put in links to collapse the texts at once. Just click the HTML editor and then paste the code prior to the initial collapsible item.
This will look like this: <div id=”openberkeley-expand-all”><a class=”openberkeley-collapsible-collapse” href=”#o
There can just be a single set of collapse links for every page.
How to Edit Collapsible Text
After inserting a collapsible text, there is no need to return to HTML to do some editing. WYSIWYG HTML editor will edit the content of your heading as well as the collapsible text. Here, you will witness a dashed draw in the region of the heading as well as a dotted draw around the text that is collapsible. This is besides the way it appears on the public view of your web page that will vary depending on the theme you utilize for your site. These outlines will allow you to see if the text is outside or inside of the collapsible chunk.
For remarkable display, make sure your heading text is brief or short.
Once the collapsible text is the last thing in page content, it is hard to include non-collapsible text under it without the need to sign on HTML code. When you edit the HTML text, make sure to leave an empty <p> tag following the last collapsible tax. The same problems might take place if you’re attempting to include non-collapsible text between two items that are collapsible or when trying to remove the collapsible text. To successfully make these alterations, make sure to visit HTML mode.
There is only a single set of collapse-all for every page. The links work well on texts that are collapsible in spite of where they are on your page. Because of this, it is highly suggested that you avoid putting collapsible texts into many panes on one page.
Pros Adding Collapsible Texts
One perk of collapsing the text is that your heading becomes bordering elements, providing users an impression of the text available without the need of scrolling nearly so much.
Adding collapsible text to your page offers interactivity while enabling you to include more text to your site.
Another perk is that those who use keyboards don’t need to step in the home page’s focusable factors to go to the place they wish to go.
Conclusion
Is collapsible text the best and reliable way for help documentation, or just present further issues and concerns?
As a whole, the collapsible text offers a strong perk in sorting out text or content and must be followed in spite of some flaws. A collapsible text can do the following:
This compresses much vital information in a small location that readers can scan quickly.
This also conceals the extent of information so the text will look lighter as well as simpler to readers and users. Until such time that they enlarge the sections to know how much text is there.
This also enables you to integrate text in a manner that alters according to the needs of the users. Once readers need more details, they just got to the link to know and read more.
This also enables readers to interrelate with the text, so they are picking what they like to know.
Once you trend to long pages, collapsing texts can be a remarkable win for usability as well as navigation.
However, it also has some drawbacks, such as if a reader looks for a key phrase buried inside the collapsed text, he or she may be confused by not finding the highlighted keyphrase on the web page, as the collapsed text stays collapsed even in a search results.
