[hanashite]

My website needs an update, both for visual and functional reasons. I'm leaning towards a 3-column layout with header and footer, with CSS this time around and a more modern, streamlined appearance. I know how to write simple HTML (my existing site was written all manually in a text editor) and understand (more or less) the basics of CSS. I'm hoping to be able to use some of the free solutions out there for the rest (navigation, graphic buttons etc.) to complete the project.

The FAQ section currently consists of a single, long page. But I have lots more contents to add, so I somehow need to split it up. I also want a way to navigate (the current page has an index at the top which isn't very functional) and have been looking into a Javascript accordion for this. Here are my efforts so far. Although I'm happy with the animation and graphic design it has some shortcomings -most notably the lack of nested buttons/links, so instead of wasting any more time with it I've decided to look elsewhere and have so found a Mootools nested accordion which seems to do what I want, hopefully easily adaptable for the graphic appearance I have in that other accordion.

Back to the FAQ itself: One solution would be to use a single page for each question/a few questions (allowing for quick loading), such as this example. But I personally care more for the ability to scroll up/down to other sections without much effort (of course, the accordion would get closer to that ability than having to jump back to an index page each time you want to see what else the FAQ has to offer). Another issue with this solution is that you can't easily print out the whole FAQ.
I've also thought about splitting the FAQ into 3 main sections (meaning 3 separate pages). With the accordion I could link them together, like this:

• SECTION A
  
• SECTION B
  
• SECTION C

By clicking on one of those section buttons you'd be presented by a range of sub-section buttons ("question 1" etc.) and also sub-section for some of those questions (see my existing FAQ index layout which I'll be duplicating).

• SECTION A
  
• SECTION B
  
  • question 1
    
  • question 2
    
  • question 3
    
  • question 4
    
    • question 4.1
      
    • question 4.2
      
    • question 4.3
    
    
  • question 5
  
  
• SECTION C

That would make everything fairly quick to access and partly solve the printing problem (instead of printing a gazillion small pages you'd print out 3 larger sections). Although I know nothing about how to implement it yet, perhaps I could use AJAX to load the 3 different FAQ section contents into the same page without actually reloading the whole page (accordion, header, footer etc. such as in this demo)?

I'm open for suggestions/comments on what to do.

This post has been edited by hanashite: 12 February 2012 - 06:16 PM

[hanashite]

I just got an idea after coming across Using MooTools ScrollSpy to Load More Items via JSON/AJAX. From what I understand after checking out the demo, more content can be added to a page without reloading etc.

So, for my FAQ page, how about having each section of the FAQ being loaded as you keep clicking the different accordion navigation buttons, and if you decide to print the FAQ it's smart enough to load all the pages first, creating one long page?

[Eddie]

You can do something like this or you might even do something like this.

[hanashite]

That's pretty cool!
Here's a rough sketch of my idea so far for the FAQ page:


Is there a way to add a horizontal "slider" (something like this) for selecting the FAQ sections, while having a vertical slider (like the first link you suggested) for the actual contents (questions/answers)? For instance, while being on the "FAQ one" page I'd click on the "FAQ three" button on top of the page and the existing contents below would slide to the left and be replaced with the contents of that new page. To access the FAQ for the first time the user would click on one of the FAQ buttons from the main navigation menu (black "floating accordion" buttons on right hand side). Alternatively I could just have a single "FAQ" button from the main navigation which would link to a page quickly describing the FAQ along with the 3 FAQ section buttons (the colored buttons in my sketch) instead of duplicating the same navigation.

I got the idea of the floating accordion from this page (scroll the page down and see how the menu keeps staying there). Here's a similar item which stays in the same place regardless (left hand side of page).

Is this doable with say Mootools?
How much content would clicking each of the FAQ section buttons load? All of the contents from that single FAQ section, just the contents from the vertical accordion being opened, or the contents of all 3 FAQs at once (everything is loaded, but only one section is actually being displayed at a time)?