You are here

Cool module: Collapse Text (i.e. fieldsets)

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!

Setting up Drupal to use the Collapse Text filter properly

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

  1. Go to Administration » Configuration » Content authoring » Text formats and create a new text format called 'Full HTML, no CKEditor'
  2. I only make this format available to the administrator role (me)
  3. In my case, I only enable the collapsible text (added by this module) and lightbox (another module you may not have) filters
  4. 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! :-)
  5. 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!!

Using the [collapse] tags

Alright, we're all setup, let's start using this module.

  1. 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:

     
  2. In my case, the format will remove the CKEditor and display the HTML
     
  3. 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]
    1. Enclose the section(s) you want to collapse with the [collapse] and [/collapse] tags
    2. 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)
    3. 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
    4. 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.
  4. Here is the final result

    Collapsed (upon page load)

    Expanded by user

     

Share

Comments

What if I want the title of the node to be the title= ?

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.

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.