Drupal: Get a collapse/expand button for code blocks

Posted by rolf on Thursday, 13 November 2014
Code (expand / collapse)
example text to hide and show.

If you prefer to truncate your code and have an extra button to show all code this article might be of interest to you:

 

Setting it up

Install the module  collapse text and enable it.

 

Configuration

navigate your browser to

  <MyExampleSiteABC.com>/?q=admin/config/content/formats/

or

  <MyExampleSiteABC.com>/admin/config/content/formats/

and choose the text format, where you want to enable collapse text filter, e.g. filtered html.

In there mark

  Collapsible text blocks

and put the filter at the end (very bottom) of the Filter processing order and click "Save configuration" (at the bottom of the page).

 

Usage

To use it, just wrap the text with

[collapse] text to wrap [/collapse].

To make the text collapsed initially, use

[collapsed] text to wrap  [/collapsed],

(This will be expanded into .)

For collapsible code be sure that the [collapse] [/collapse] tags are in format "normal", see "code_collapse_tag_normal.jpeg" and the code has format "formatted", see "code_collapse_formatted.jpeg"

 

Changing the default text "Click here to expand or collapse this section"

Navigate your web-browser to

  www.MyExampleSite.com/?q=admin/config/content/formats

or

  www.MyExampleSite.com/admin/config/content/formats

and select a text format. Scroll to the very bottom. Under "Filter settings", click on "Collapsible text blocks". There you can change the "Default title".

If you want to change the default text just once, include in your tag following

  [collapsed title="expand / collapse"]

 

Integration with CKEditor

works with CKEditor, you only need to make sure that the tags have the Format "Normal".

To get a Button in CKEditor, you can use the Collapse Text Wysiwyg Sandbox Module.
Download it using the command (in a terminal)

  git clone --branch 7.x-1.x http://git.drupal.org/sandbox/DYdave/1818438.git collapse_text_wysiwyg

Then put the downloaded folder collapse_text_wysiwyg into your contributed modules folder, e.g.:

  your_drupal_path/sites/all/modules

and enable it from the modules administration/management page (flushing the cache might be necessary before the module appears at the module page).

 

Configuration of CKEditor Integration

After successful installation you should be able to see a "configure" link on the modules admin page, next to the "Collapse Text Wysiwyg" module.

click on the configure link Home » Administration » Configuration » Content authoring or directly browse to

  admin/config/content/wysiwyg

 There you can add the button

   Insert Collapsible Text
blog_external_links: 
other article about the collapse module (mito-team)
another article about the collapse module (drupalwoo)
blog_tags: 
drupal
drupal 7
  • 1932 reads

Add new comment

More information about text formats

Filtered HTML

  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <pre> <img> <br> <p> <span>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Use [collapse] and [/collapse] to create collapsible text blocks. [collapse collapsed] or [collapsed] will start with the block closed.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
  • Code snippets in <code>...</code> or <source>...</source> automatically will be pretty printed.
  • Use [collapse] and [/collapse] to create collapsible text blocks. [collapse collapsed] or [collapsed] will start with the block closed.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
Target Image