Embed HTML Accordion in posts

JaseWolf · August 2016

Hi, I am playing around with Vanilla and am really amazed with it, really looks awesome on my site. What I am right now trying to do, enable my accordion that I use on my FAQ to be used in posts. I want to be able to move my FAQ and everything else that uses the accordion from a static page as posts on my forum.

If someone could help with how I could do that that'd be amazing. I did try by pasting all my css for the accordion into the style.css for the theme I'm using and then using the html code for it in my posts, but it doesn't show as an accordion.

Just to note, my accordion is just pure html/css, no JavaScript.

Thanks, Jase

vrijvlinder · August 2016

Some html and css is not allowed in posts on Vanilla because it is a vulnerability .

For example, you can't use inline style in html you post. Since you can't use a < style > tag, that makes using css in a post not allowed.

rbrahmson · August 2016

I think that a tricky plugin that hooks into DiscussionController_AfterCommentFormat_Handler along with a smart css would be able to accomplish the accordion. The post editor would be typing some special code instead of the non-allowed html, and the plugin could convert it to the appropriate style and a little JS (jquery) would handle real time changes.

You may find some inspiration from the Spoilers plugin.

JaseWolf · August 2016

@rbrahmson said:
I think that a tricky plugin that hooks into DiscussionController_AfterCommentFormat_Handler along with a smart css would be able to accomplish the accordion. The post editor would be typing some special code instead of the non-allowed html, and the plugin could convert it to the appropriate style and a little JS (jquery) would handle real time changes.

You may find some inspiration from the Spoilers plugin.

I was just about to say about plugins as I see that the spoiler plugin uses css. So I just copy that plugin folder, replace the css and then how'd I go about replacing the html that it uses so that it uses my accordion html code? Assuming I would need to edit some of the scripting?

rbrahmson · August 2016

That plugin uses JS, not just css.
@vrijvlinder is the unofficial Vanilla WBQC (Wild Butterfly Queen of CSS) and she may come up with some magical CSS that could simplify the necessary changes in JS.
I haven't looked at the Spoilers source in a while, and I'm a bit busy to decipher it for you, but yes, you will have to code...

R_J · August 2016

It feels like a waste of resources to have a plugin that is used for one discussion only, but well, you seem to need that...

You can create a plugin that will insert text above the discussion body, though it is a liitle bit hacky...
If you want your discussion to be like that

This is my wonderful accordion

accordionaccordionaccordionaccordionaccordionaccordionaccordion
accordionaccordionaccordionaccordionaccordionaccordionaccordion
accordionaccordionaccordionaccordionaccordionaccordionaccordion
accordionaccordionaccordionaccordionaccordionaccordionaccordion
accordionaccordionaccordionaccordionaccordionaccordionaccordion
accordionaccordionaccordionaccordionaccordionaccordionaccordion

Great, isn't it?

1.) Create a discussion with the text "Great, ins't it"
2.) Note down the discussion id of the discussion (you can see it in the url)
3.) Create a plugin like that (feel free to change the name) /plugins/fugly/class.fugly.plugin.php

<?php

$PluginInfo['fugly'] = [
    'Name' => 'fugly',
    'Description' => 'Not so elegant way to insert html in one specific discussion'
];

class FuglyPlugin extends Gdn_Plugin {
    public function discussionController_AfterCommentFormat_handler($sender, $args) {
        if (!isset($args['Comment']) && $args['Discussion']->DiscussionID == !!! INSERT YOUR DISCUSSION ID HERE !!!) {
?>
!!! PASTE YOUR HTML ACCORDION HERE !!!
<?php
        }
    }
}

But that is really, really ugly...

The more correct way would be to create that discussion from of your plugin to ensure that no characters are changed. Afterwards override the htmlformatter for this discussion only. Don't ask me how to do this exactly, but try to get a copy of the deprecated plugin HTMLPurifier to see an example for "FactoryInstall"

River · August 2016

@JaseWolf said:
Hi, I am playing around with Vanilla and am really amazed with it, really looks awesome on my site. What I am right now trying to do, enable my accordion that I use on my FAQ to be used in posts. I want to be able to move my FAQ and everything else that uses the accordion from a static page as posts on my forum.

If someone could help with how I could do that that'd be amazing. I did try by pasting all my css for the accordion into the style.css for the theme I'm using and then using the html code for it in my posts, but it doesn't show as an accordion.

Just to note, my accordion is just pure html/css, no JavaScript.

Thanks, Jase

Instead of testing every discussion if you prefer to have a menu item. ...

you could use raw format I believe with the basic pages plugin https://vanillaforums.org/addon/basicpages-application or you could use the extra page plugin https://vanillaforums.org/addon/extrapage-plugin or you could use the faq app https://vanillaforums.org/addon/faq-application.

at least one of the three should be able to allow you to create a faq and add some js if needed but you could probably use pure html with one of the plugins.

Embed HTML Accordion in posts

Comments