Users running a non-download version of Vanilla (pulled from github), on branch release/2019.016 or master from the last 2 weeks should upgrade to release/2019.017 or latest master for security reasons. Downloaded official open sources releases are not affected.
Please upgrade here. These earlier versions are no longer being updated and have security issues.

Embed HTML Accordion in posts

JaseWolfJaseWolf England New
edited August 2016 in Vanilla 2.0 - 2.8

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

Comments

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    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.

  • rbrahmsonrbrahmson "You may say I'm a dreamer / But I'm not the only one" NY ✭✭✭

    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
  • JaseWolfJaseWolf England New
    edited 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?

  • rbrahmsonrbrahmson "You may say I'm a dreamer / But I'm not the only one" NY ✭✭✭

    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_JR_J Cheerleader & Troubleshooter Munich Moderator

    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"


    rbrahmson
  • RiverRiver MVP
    edited 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.

    Pragmatism is all I have to offer. Avoiding the sidelines and providing centerline pro-tips.

Sign In or Register to comment.