Module: Accordion Textformatter

[renobird]

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

Github Page

Simple Demo

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. This is the same idea as the Pagination Textformatter, however titles are not optional. If you just put the dashes, the item with be automatically titled "Untitled".

 

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.

 

Notes

I've been using this on a production site for nearly a year, but before Ryan released the Pagination Textformatter it was using with a totally different markup pattern to designate the accordion items. It should be pretty stable, but consider it a beta release.

 

Markup pattern inside a textarea (Nearly identical to the Pagination Textformatter)

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

Results in the following markup:

<dl class="accordion">    
    <dt>
        <a href="#accordion-item">Accordion Item</a>
    </dt>

    <dd>
        <p>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.</p> 
        <p>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.</p>
    </dd>

    <dt>
        <a href="#another-accordion-item">Another Accordion Item</a>
    </dt>

    <dd>
        <p>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.</p>
    </dd>
</dl>

<p>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.</p>

[kongondo]

Nice on Tom!   

[adrian]

Nice!

How about an option for tabs vs accordion, and maybe the ability to switch from tabs to accordion automatically on phone sized devices?

[renobird]

Hi Adrian,

I don't know if you could do that as a pure CSS solution, you would probably have to use JS to check the window width and then swap the .accordion class with a .tabs class. Seems doable, I've styled a <dl> into tabs before (can't find the tutorial at the moment). I've never tried to do pure CSS tabs, but that would be the easiest way if it's possible. I don't have much time to develop this further, but if I can find a need for it here at the day job I might be able to devote some time to your request.

[Sergio]

Semantic UI has an example of responsive tabs: http://semantic-ui.com/modules/accordion.html

[cstevensjr]

 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. This is the same idea as the Pagination Textformatter, however titles are not optional. If you just put the dashes, the item with be automatically titled "Untitled".

First, Thank you for creating this.  Maybe this is a real stupid question, but here goes ---  wouldn't it be better if you used some other trigger than 5+ hyphens to activate this?  My thinking is that if you changed it to something that did not conflict with the Pagination Texformatter, we could then possibly use both on a page?

[Martijn Geerts]

Didn't install this module, so maybe I tell something it's already in . Maybe add an option to make the trigger configurable. 

I prefer to use the <hr> tag for example. This way, people can click on a button to add the functionality.

[renobird]

@cstevensjr

I originally developed it to using [collapse](My TItle Here) and [/end]. I don't have a need to ever use this with pagination, so ----- and ///// seemed so much easier to remember and use. However, I don't think it would be too difficult to add a config setting to allow you to chose between the 2 markup patterns. I'm glad to provide that ability if people can use it. 

@Martijn

I think there is too much to account for to make it configurable. At least it's more development than I can devote to it. For instance <hr> would be more complicated to account for because the <hr/> is it's own element on it's own line, so marker and the text for the title of the collapsed content aren't associated in a way that you could count on.  Personally I wouldn't want to override any HTML tags, I think they should always output their expected markup. 

Perhaps you could use Teppos awesome hanna code helper to give users a clickable option? 

[cstevensjr]

@renobird

Thanks for your reply.  I have really taken a liking to Ryan's module and am now using it on a few websites.  When I saw what you had accomplished, I was very happy because I really like using accordians or tabs when developing a website.  I really would like to be able to use both at the same time, since I believe it would allow me or even others to be more creative when developing websites.

Thanks again and best regards

Charles

[m-artin]

Thanks again renobird, for considering your module. 

One last question, I assume it's safe to install with PW 2.5?

There's currently a note in the install process: 
"This module does not indicate compatibility with this version of ProcessWire. It may still work, but you may want to check with the module author."

[renobird]

It works fine with 2.5, I'll update the module to reflect that.

[m-artin]

This is really great, it works like a charm. 

By the way I've changed 

dl.accordion > dt > a.open:before {
	content: '-'; 
}

to

dl.accordion > dt > a.open:after {
	content: '-'; 
}

In my case the minus-sign was jumping before the panel headline, probably related to my Css-Bootstrap setup.

Thanks so much renobird!

Edit: In your demo-fiddle it's also 'a.open:after', maybe this is a tiny bug in the master on line 35.

[dazzyweb]

@renobird Thanks for the module.

I found the same issue as m-artin(I'm not using bootstrap). His fix sorted it.

[renobird]

Thanks for the heads up. Works fine for me, but I'll change it - :after makes more sense anyway.

[bernhard]

thank you reno, saved my life today after hours of messing around with regex when trying on my own... should have searched earlier 

[Emmerich]

ProcessWire: processwire-master_3.0.229 (and earlier versions)
TextformatterAccordion: TextformatterAccordion-master_1.1.1
    used inside InputfieldCKEditor

First issue (solved):

When using the originally downloaded TextformatterAccordion (v.1.1.1), I experienced a message on top of the outputted page:

Notice: Array to string conversion in E:\UniServerZ\www\processwire-master\site\assets\cache\FileCompiler\site\modules\TextformatterAccordion\TextformatterAccordion.module on line 59

The line 59 is:

if(empty($$accordion[0])) array_shift($accordion);

I recognized a doubled '$$' before the variable 'accordion[0]', which is an operator known as "variable of variable"; but in my system I've debugged it, and it isn't a "variable of variable", it's only an array item containing text.

After I removed one of the '$' operators, the line 59 changed into:

if(empty($accordion[0])) array_shift($accordion);

then the 'Notice' (see above) disappears and Accordion is working well :-).

 

Second issue (solved):

When there are several paragraphs in front of the Accordion part, is happens (regulary), that the last - neutral - paragraph of them is seen as (first) Accordion-item and is formatted like:
 

Untitled Item

     Lorem ipsum...

After inserting an extra check at the beginning of the 'foreach'-loop (lines marked with "ESB") of ...\www\processwire-master\site\modules\TextformatterAccordion\TextformatterAccordion.module

            ...
            foreach($accordion as $k => $v) {
                $pos = strpos($v, "~~~\t");
                if ($pos === false){     // no accordion items in this block        // ESB
                    continue;                                                       // ESB
                  }                                                                 // ESB
                $title = trim(substr($v, 0, $pos));
            ...

, also this part of Accordion is working well.

I hope, my tips are helping other users of TextformatterAccordion.