Home
About
Contact
Subscribe
Blogs
Drupal area
Contrib modules
Today I want to introduce you to the Collapse Text module. It's such a life-saver for those long, long text-heavy pages, in which it may be difficult to guide the user through the sections that are most important to them.
The Collapse Text module allows you to create collapsible & expandable sections/fieldsets in your Drupal pages directly from the editing interface (though it doesn't work that well with CKEditor - more on that later) through the use of special tags to delineate the beginning and end of the text section you want to make collapsible. You delineate the start and end of the sections that you want to be collapsible, and the module, though the user of text filtering and processing spits out the correct html (using <fieldsets>) and js to make it work - but it's all done behind the scenes, so it's easy to use.
Let's start our cool module tour!
In my setup, I choose to use a new, minimal text format . This step is optional - feel free to try using the collapse text module with your default CKEditor text format and see how it works. For me, however, it works poorly, because I have my default CKEditor-enabled text format do some automatic clean-up and re-writing, so it tries to re-write and fix the [collapse] tags. So, I've actually created a text format that does zero re-writing and does not bring up CKEditor by default - just displays the html directly for me, which I use for some of my special pages. Feel free to copy that setup for yourself as well
Go to Administration » Configuration » Content authoring » Text formats and create a new text format called ' Full HTML, no CKEditor '
I only make this format available to the administrator role (me)
In my case, I only enable the collapsible text (added by this module) and lightbox (another module you may not have) filters
If you do not setup a new text format, just make sure you edit the text format that appears under your text editor to make sure the collapsible text filter appears after both the "Limit allowed HTML tags" filter, and after the "Convert line breaks into HTML" filter. I'm not worrying about this part, since I don't even enable those filters in my limited text format! :-)
Finally, after you've saved your new or edited text format with the new collapsible text filter, edit it again and you'll see some new configuration options: Choose the default text that should be displayed in your collapsible sections if you choose to not provide a specific title (or leave as is)
If you're not really loving using a minimal text format, without CKEditor the way I do, or just need editors who aren't very familiar with html to use it - you may benefit from checking out this experimental module, which claims it works with CKEditor (I have not tried it myself): https://drupal.org/sandbox/DYdave/1818438 . Comment below and let us know how it works if you do try it!!
Alright, we're all setup, let's start using this module.
When you're editing that text-heavy page that needs some collapsible sections, just go down to the ' Text format ' options, and select the new format you created or the one you edited in the previous section:
In my case, the format will remove the CKEditor and display the HTML
Now I can easily add my [collapse] tags around any paragraphs and sections I want to directly collapse or make collapse-able by the user. I've used some of the common available parameters with a more detailed description below [collapse collapsed title="More about the Maecenas program" class="my_css_class"] <p>Nunc tempus et dolor et lobortis. Curabitur vestibulum risus a velit tempus iaculis. Nam mollis adipiscing arcu, a aliquet orci sollicitudin ac.</p> [/collapse] Enclose the section(s) you want to collapse with the [collapse] and [/collapse] tags The collapsed parameter is optional. Use it if you want the section to be collapsed when the page loads (versus expanded with the option to collapse) The title parameter (also optional) can be use to specify the text that displays on the collapsed section, if you do not want to use the generic default you set earlier The class parameter (also optional) can be used to add css classes, so you can theme these sections to your liking in your custom theme.
Enclose the section(s) you want to collapse with the [collapse] and [/collapse] tags
The collapsed parameter is optional. Use it if you want the section to be collapsed when the page loads (versus expanded with the option to collapse)
The title parameter (also optional) can be use to specify the text that displays on the collapsed section, if you do not want to use the generic default you set earlier
The class parameter (also optional) can be used to add css classes, so you can theme these sections to your liking in your custom theme.
Here is the final result Collapsed (upon page load) Expanded by user
Collapsed (upon page load)
Expanded by user
Add new comment
What if I want the title of the node to be the title= ?
reply
You mean you want the title of the collapsible section to be the same as the title of the node it's in?
w/ the expanded tag i get an error and the title is not showing, only the title by default (collapse expanded title="More about the Maecenas program")
Suberb - just what I was looking for. Thank you so much!
Thanks! It's work for me. I have a question. If I want to show 'read more/collapse" text bottom of the collapsed text, is there have any way?
I did all the steps, but the expanding and collapsing is not working, it just appears as a box with a title. Not even getting any error in the browser console. What to do now?
Hi! Does this work on a customizable Drupal 7 site? I have a sub-bootstrap theme and I've downloaded the collapsiblock from drupal but my text doesn't collapse. I'm not very familiar with html but I copied what you did and it is not collapsing. what am I doing wrong? Please help! Thanks!
I have my collapsing working, but I'd like each title to have a bullet. When I try, my bullets are on a line by themselves, one line higher than the title.
Thanks.
More information about text formats
No HTML tags allowed.
Web page addresses and e-mail addresses turn into links automatically.
Lines and paragraphs break automatically.
RT @LibyaLiberty : what do you call this, Poseidon's post-Thanksgiving dust bin? https://t.co/La3dIXM9zf — 19 hours 54 min ago
RT @matthaig1 : Reading isn't important because it helps get you a job. It's important because it gives you room to exist beyond the reality… — 19 hours 56 min ago
:( https://t.co/15NdVWPi1k — 19 hours 56 min ago
RT @Mikel_Jollett : Everything you need to know about Republican "values" is summed up by the fact that the new GOP tax plan raises taxes on… — 1 day 6 hours ago
Subscribe to newsletter Privacy Policy
Privacy Policy
Let's connect: Twitter | LinkedIn
© 2017 Boriana Ditcheva