Help with creating a dropdown and other elements for a FAQ page with Ruby on Rails.

Question

Hi, I'm new to rails and I'm trying to make a help page that just lists questions and answers. Currently I have something very simple like this :

<% @helps.each do |help| %>
<%=h help.category %>
<%=h help.question %>
<%=h help.answer %>
<% end %>

Along with each question and answer is a category they belong to. How do i create a dropdown that would let users list only the questions belonging to only one category?

Secondly I would like to create a list of all the questions near the top of the page. The questions are actually links that when clicked bring you to the bottom of the page where the question/answer are. or when clicking on the link, it expands providing the answer underneath it, similar to facebooks help page. I think this would involve ajax, or java. It would be great if someone can point me in the right direction.

Answer 1

If you want to do this "statically" -- that is, when the user selects a category from the dropdown and clicks "Filter," then the browser makes a request to the Rails app for questions just in that category, the following will get you started:

# in config/routes.rb
map.resources :helps

# in app/models/help.rb
class Help
  named_scope :in_category, lambda { |category| { :conditions => { :category => category } } }
  def self.categories
    find(:all, :select => 'distinct category', :order => 'category').sort
  end
end

# in app/controllers/helps_controller.rb
class HelpsController < ApplicationController::Base
  def index
    @helps = if params[:category]
      Help.in_category(params[:category])
    else
      Help.all
    end
  end
end

# in app/views/helps/index.html.erb:
<% form_tag(helps_path) do %>
  <%= select_tag(:category, options_for_select(Help.categories, params[:category])) -%>
  <%= submit_tag('Filter') -%>
<% end %>
<% @helps.each do |help| %>
  <div class="help <%= help.category -%>">
    <%=h help.category %>
    <%=h help.question %>
    <%=h help.answer %>
  </div>
<% end %>

Answer 2

You could use something like jquery to toggle various section's visibility - put each category in a div, and make then hide them with jquery. You could also use some jquery plugins such as http://flowplayer.org/tools/demos/tabs/accordion.html for effects, in this case, an accordian, but many other such effects exist too.

My first google search found: http://jquerystyle.com/2009/04/21/jquery-faq-plugin