Ben's tips: Putting accordions EVERYWHERE
I get a LOT of questions from my users about how to use Igloo. Some of these questions are interesting enough to share widely. I'll try and remember to post some of the questions (and hopefully answers!) here.
Ever want to hide content inside a wiki article or HTML widget?
The Accordion Enhancement allows you to hide/show complete widgets on a page but sometimes you have:
- an HTML widget full of content.... and some of it should be hidden behind an accordion
- a Wiki article that should hide/show some extended content
- Maybe the same inside a Forum post
- Maye you want to give the ability to collapse content, but the content should show by default
There are HTML tags which allow you to do this: Read an article on the HTML tag: details
or you can make use of the accordion enhancement in places where it wasn't intended to be used.
Creating an accordion inside content
Sometimes you want to use an accordion inside of a wiki article or want a disclosure embedded in an HTML block editor. This is possible, but somewhat more complicated.
In the editor, switch to the Code View and insert the following code:
<div class="accordion">
<div class="ig-cpt-title">Read more on the overview</div>
<div style="display: none;">This is just some body text.</div>
</div>
Replace the Brown Text with your title and the Green Text will your content. If you want the content to be displayed OPEN by default, remove the Purple Text in the sample above.
Below is an example of the above text:
7 Replies
Sam Condello Check out this handy trick!
Ben's tips are awesome!!!
WOW! Love this! Thanks for sharing!
Benjamin Kahn Thanks! I combined your idea with some html links plus a named iframe and voila! An accorion menu with multiple levels that opens the links in an iframe on the same page. (I created my own custom class since we wanted carets and a smaller font, but the concept is the same)
Admittedly, it does take some HTML and JavaScript know-how but it wasn't too bad. What would be great is if you could specify an on-page iframe from the links widget. Not that I've submitted an idea for that or anything. ;)
Ability to specify an iFrame as a target in the links | Product Ideas (aha.io)
Hey Judy Headrick: Very interesting! Your example feels like a different use case. Maybe Igloo is missing a page widget for folder channels? (Something like a folder channel media viewer?)
It also seems like you might want the back/forward buttons to show the documents that users have viewed -- not just enter or leave the page. If so, my tip for tabs -- https://customercare.igloosoftware.com/community/community_discussions/bens_tips_making_widget_tabs_more_useful_in_igloo -- details how to insert and change the browser history using injected Javascript.
Now, accordions aren't tabs, so the code will need to be updated to support this; probably I should write a version that opens/closes a particular accordion and highlights it. And you should likely use history.pushState instead of history.replaceState to store the docs list in the browser history.
Benjamin Kahn It is different but not entirely. I didn't use tabs at all. The part that is similar is the menu. It is an HTML widget with links in collapsible sections (accordions). The links are basically, <a href="some-link" target="myFrame">. The main panel contains an HTML widget with the target iframe that is named, "myFrame".
The content for the iframe is maintained by different departments, and is stored in several different folders across three spaces. I originally created a page with folders widgets pointing to the relevant folders, but navigation was cumbersome and confusing. Normally, I would have used vertical tabs and embedded the documents that way, but they wanted more content on a single page than was practical for vertical tabs. They also wanted the nested menu structure which allows for faster navigation. That's where the accordions came in.
Thanks for the tip regarding history. I'll have to look into that.
Benjamin Kahn do you know where I can find all the class styles? I have an instance where I don't want to inherit the syling of ig-cpt-title but whenever I remove it, the accordion doesn't work.
<div class="ig-cpt-title">Read more on the overview</div>