Jump to content
renobird

Module: Accordion Textformatter

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

Share this post


Link to post
Share on other sites

Nice!

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

  • Like 2

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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.

  • Like 2

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

@renobird Thanks for the module.

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

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...