TextformatterAccordion by renobird

Convert portions of textarea content into a and collapse into an accordion. Put 5+ hyphens '-----Your Title Here' on a single line (within paragraph tags) to create specify title the paragraphs below will be collapsed. This module is largely build using code from the TextformatterPagination plugin with the idea that they could be interchangeable.

Textformatter Accordion 1.1.1

This Textformatter module for ProcessWire allows you to designate areas in a single textarea to be converted to an collapsed accordion list. The markup pattern for this module is based on the TextformatterPagination module with the idea that they could be interchangeable.

Simple Demo (Front end)

How to install


In ProcessWire 2.4+ go to your Modules menu in the admin, click the "New" tab and type or paste in "TextformatterAccordion" and click "Install".

If you are unable to install using that method, you can also just install the old way by copying the files for this module into /site/modules/TextformatterPagination/ and clicking "check for new modules" from your Modules screen.

How to use


  1. In the ProcessWire admin to Setup > Fields and edit the Textarea field that you want to support accordions. On the "Details" tab, select "Accordion" as a Textformatter and save.

  2. include the the CSS/JS (requires jQuery) in your HTML. You can use any css you want to style the accordion list — the css included with this module is a barebones example to get you started.

/path/to/jquery.js
/path/to/TextformatterAccordion.js
/path/to/tTextformatterAccordion.css
  1. Edit a page that uses the field you added the "Accordion" TextFormatter to in step one. The textarea now supports content as usual, but can also have multiple collapsed (Accordion) areas. See the examples below for how to desinate accordion items.
To define an accordion item

Put 5+ hyphens '-----Your Title Here' on a single line (within paragraph tags) to specify a title for the accordion item. The paragraphs below will be collapsed.

To end an accordion

To end a group of accordion items and return to regular textarea content, put exactly 5 slashes on a single line '/////' (within paragraph tags). This is only needed if you want to end collapsed content and return to regular textarea content.

Markup Example

----- Accordion Item

The paragraphs beneath each accordion item are collapsed by default and open when you click on the title specified above. You can use multiple paragraphs, and any other content allowed in the textarea.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

----- Another Accordion Item

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

/////

The 5 slashes above signify an end to the accordion group above. You only need to specify the end of a group if you want to return to regular textarea content. You can continue to use the same pattern to collapse content into accordions as many times as you wish.

Install and use modules at your own risk. Always have a site and database backup before installing new modules.

Twitter updates

  • New blog: Debugging tools built-in to ProcessWire. ProcessWire's core comes with a lot of helpful debugging tools and capabilities built-in. In this post we'll cover some of these useful tools and how to use them… More
    1 July 2022
  • A review of weekly core updates, plus a simple recipe for a very effective listing cache—More
    24 June 2022
  • Weekly update: Making ProcessWire render pages at old WordPress URLs (or building a simple/custom URL router in PW): More
    17 June 2022

Latest news

  • ProcessWire Weekly #424
    In the 424th issue of ProcessWire Weekly we'll check out the latest weekly update from Ryan, introduce a new third party module, and more. Read on!
    Weekly.pw / 25 June 2022
  • Debugging tools built into ProcessWire
    ProcessWire's core comes with a lot of helpful debugging tools and capabilities built-in. In this post we'll cover some of these useful tools and how to use them.
    Blog / 1 July 2022
  • Subscribe to weekly ProcessWire news

“We were really happy to build our new portfolio website on ProcessWire! We wanted something that gave us plenty of control on the back-end, without any bloat on the front end - just a nice, easy to access API for all our content that left us free to design and build however we liked.” —Castus, web design agency in Sheffield, UK