Jump to content

Module: Accordion Textformatter


renobird
 Share

Recommended Posts

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>
  • Like 16
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

 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?

  • Like 2
Link to comment
Share on other sites

@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? 

  • Like 1
Link to comment
Share on other sites

@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

  • Like 1
Link to comment
Share on other sites

  • 7 months later...

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

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

  • 11 months later...
  • 8 years later...

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...