Forum Discussion

JasonLundrigan's avatar
5 years ago

Using the Expanding Content Styles

Hi Community,

We're trying to create our own custom Help page in our community. That is a lot of text, and we'd like to make it similar to the built-in help page with the expanding text for the sections and questions.

Is there any way to use that expanding format ourselves? I'm familiar with HTML and CSS, but not so much with Javascript.

If that is not possible, does anyone know how to embed the FAQ page as a component in another page? If we could do that, we could then customize the questions in Studio to meet our needs.

Thanks!

  • Hey, 

    You can achieve this with a little dev, we have accordions, show/hides whatever you want to call them. You can see them in our email setup article, if you scroll the bottom.

    The html markup is really simple, we actually have these standardised as a "layout" in our wysiwyg the using CSS etc they are styles to look how they do in the article, feel free to review our content/code used. 

     

     

4 Replies

  • Hey, 

    You can achieve this with a little dev, we have accordions, show/hides whatever you want to call them. You can see them in our email setup article, if you scroll the bottom.

    The html markup is really simple, we actually have these standardised as a "layout" in our wysiwyg the using CSS etc they are styles to look how they do in the article, feel free to review our content/code used. 

     

     

  • JasonLundrigan's avatar
    JasonLundrigan
    Guide
    5 years ago

    I checked out the site, and it's exactly what we need. Is that using the same built-in functionality as the FAQ, or did you add any custom JavaScript?

    I compared the classes to the ones used in the FAQ page, and they don't match, so I'm assuming you created some custom CSS to activate the accordion effect.

  • Fellsteruk's avatar
    Fellsteruk
    Boss
    5 years ago

    Yeah we have some custom css and JS for the accordions we also have modal windows which can be another nice way to display content and use the same process. 

  • JasonLundrigan's avatar
    JasonLundrigan
    Guide
    5 years ago

    I did a Google search and found the following article:

    https://www.w3schools.com/howto/howto_js_accordion.asp

    It was... absurdly easy to plug the samples into one of the custom content entries and customize them.

    Now to do some testing to make sure I'm not breaking anything, then it's time to start writing. A lot of writing.

    Thanks for your help!