Digital Workshop

Dear Forum
Just wondering if it is possible to integrate an ANIMATED ACCORDIAN for FAQs.
How It Works

- The page displays a list of Questions (initially all the Answers are hidden).
- User clicks on a Question and the answer is displayed directly below the question
- When the user clicks a different question, the previous answer is hidden and the answer to the new question is displayed.

There are plenty of commercial jquery plugins for FAQS, the question is will any of them work inside the Opus web object.
Thanks
Pakapaka

Yes, and no.

jQuery, like any other web technology that works alongside HTML5 can be integrated with Opus HTML5 output and with the newer (9.6) HTML5 functionality of Opus added directly to the publication through the software.

However, Opus, like any bespoke designer does, has a specific way of building its pages to accurately represent its output. Therefore, while you may be able to add third party code that works perfectly well independently on the page, the success with which it interacts with the page may vary. Something like an accordion may require other page elements to react relatively to the accordion's dynamic resizing. As an alternative, you may find that allowing the bounding HTML5 object to scroll works or that keeping the bounding box on top with visible overflow content helps.

Of course, Opus itself is a very capable application - and it may be possible to build a similar module using the existing functionality.

</mack>

Thanks Mack...will contact you offline when I get the time

I did a Search of the forum here. Also, a broader search on the internet.
use the word: accordion

One result in this forum. Check the discussions in this thread -- I think bwpatric's Post outlines the basics of integrating JS library code for ACCORDION. But do pay attention to Mackavi's advice above -- that there are potential conflicts and potential problems, depending on what other actions/events you have built on the pages.
viewtopic.php?f=13&t=5385&hilit=accordion

From what I've seen of general examples out there, there are some implementations that are done entirely in CSS3.