Pull in accordion style jQuery code and update; need class renames be…

…fore finished

app/views/layouts/_footer.html.erb

@@ -6,10 +6,9 @@
       <li class="module group">
         <h4 class="heading"><%= ts('Customize') %></h4>
         <ul class="menu">
-          <li>
-            <a href="#" class="skin_chooser_open"><%= ts('Choose Skin') %> &#8595;</a>
-            <a href="#" class="skin_chooser_close"><%= ts('Close') %> &#8593;</a>
-            <ul id="skin_chooser" class="toggled secondary">
+          <li aria-haspopup="true">
+            <a href="#"><%= ts("Choose Skin") %></a>
+            <ul id="skin_chooser" class="collapsible secondary">
               <li><%= link_to ts("Default"), unset_skins_path %></li>
               <% Skin.in_chooser.order(:title).each do |s| %>
                 <li><%= link_to s.title, set_skin_path(s) %></li>

app/views/users/_sidebar.html.erb

@@ -5,12 +5,11 @@
   <li><%= span_if_current ts("Profile"), user_profile_path(@user) %></li>
   <% if @user.pseuds.size > 1 %>
     <li class="pseud" aria-haspopup="true">
-      <a class="pseud_switcher_open open" title="Pseuds" href="#"><%= sidebar_pseud_link_text(@user, @pseud) %></a>
-      <a class="pseud_switcher_close close" title="Pseuds" href="#"><%= sidebar_pseud_link_text(@user, @pseud) %></a>
-      <ul id="pseud_switcher" class="toggled secondary">
-          <%= print_pseud_selector(@user.pseuds) %>
+      <% pseud_link_text = current_page?(@user) ? ts("Pseuds") : (@author ? @author.name : @user.login) %>
+      <a href="#" title="<%= ts("Pseud Switcher") %>"><%= pseud_link_text %></a>
+      <ul class="collapsible secondary">
+        <%= print_pseud_selector(@user.pseuds) %>
         <li><%= span_if_current ts("All Pseuds (%{pseud_number})", :pseud_number => @user.pseuds.count), user_pseuds_path(@user) %></li>
-        <li><a class="pseud_switcher_close close action" style='cursor: pointer;' title="Close Pseud Switcher" href="#">X</a></li>
       </ul>
     </li>
 	<% end %>

app/views/works/_work_header_navigation.html.erb

@@ -25,9 +25,8 @@
       <noscript>
         <%= link_to ts('Chapter Index'), navigate_work_path(@work) %>
       </noscript>
-      <a class="chapter_index_open open hidden"><%= ts('Chapter Index') %></a>
-      <a class="chapter_index_close close hidden"><%= ts('Chapter Index') %></a>
-      <ul id="chapter_index" class="toggled hidden secondary">
+      <a class="hidden"><%= ts('Chapter Index') %></a>
+      <ul id="chapter_index" class="collapsed-pane secondary hidden">
         <li>
           <%= form_tag url_for({:controller => :chapters, :action => :show, :work_id => @work}), :method => :get do %>
             <p>
@@ -38,7 +37,7 @@
           <% end %>
         </li>
         <li><%= link_to ts("Full-page index"), navigate_work_path(@work) %></li>
-        <li><a class="chapter_index_close close" style="cursor: pointer;" title="Close Chapter Index">X</a></li>
+        <li><a class="close action" title="<%= ts("Close Chapter Index") %>">X</a></li>
       </ul>
     </li>
   <% elsif @chapters %>
@@ -105,14 +104,12 @@
   <% end %>
 
   <li class="download" aria-haspopup="true">
-    <a title="Download" class="downloads_open open"><%= ts("Download") %> &#8595;</a>
-    <a title="Download Close" class="downloads_close close hidden"><%= ts("Download") %> &#8595;</a>
-    <ul id="downloads" class="toggled secondary">
+    <a href="#"><%= ts("Download") %></a>
+    <ul class="collapsible secondary">
       <li><%= link_to ts("MOBI"), download_url_for_work(@work, "mobi") %></li>
       <li><%= link_to ts("EPUB"), download_url_for_work(@work, "epub") %></li>
       <li><%= link_to ts("PDF"), download_url_for_work(@work, "pdf") %></li>
       <li><%= link_to ts("HTML"), download_url_for_work(@work, "html") %></li>
-      <li><a class="downloads_close close hidden" style="cursor: pointer;" title="Close Download Options">X</a></li>
     </ul>
   </li>
 </ul>

public/javascripts/application.js

@@ -8,12 +8,8 @@ $j(document).ready(function() {
     hideHideMe();
     showShowMe();
     handlePopUps();
+    setupAccordion();
     generateCharacterCounters();
-    $j('#expandable-link').click(function(e){
-          e.preventDefault();
-          expandList();
-          return false;
-      });
     $j('#hide-notice-banner').click(function(e){
       $j('#notice-banner').hide();
       e.preventDefault();
@@ -195,6 +191,7 @@ jQuery(function($){
 // - You don't have to use div and a, those are just examples. anything you put the toggled and _open/_close classes on will work.
 // - If you want the toggled thing not to be visible to users without javascript by default, add the class "hidden" to the toggled item as well
 //   (and you can then add an alternative link for them using <noscript>)
+// - Generally reserved for toggling complex elements like bookmark forms and challenge sign-ups; for simple elements like lists use setupAccordion   
 function setupToggled(){
   $j('.toggled').each(function(){
     var node = $j(this);
@@ -344,3 +341,22 @@ function setupDropdown(){
   $j('.dropdown .menu li').attr("role", "menu-item");  
 }
 
+// Accordion-style collapsible widgets
+// The collapsible pane can be expanded or collapsed using the expander (link)
+// Typical set up:
+// <li aria-haspopup="true">
+//  <a href="#">Expander</a>
+//  <div class="collapsible">
+//    foo!
+//  </div>
+// </li>
+function setupAccordion() {
+  var panes = $j(".collapsible");
+  panes.hide().prev().removeClass("hidden").addClass("closed").click(function(e) {
+    var expander = $j(this);
+    if (expander.attr('href') == '#') {
+      e.preventDefault();
+    }
+    expander.toggleClass("opened").toggleClass("closed").next().toggle();
+  });
+}

public/stylesheets/site/2.0/09-roles-states.css

@@ -58,6 +58,14 @@ span.offered.requested {
   color: #876714;
 }
 
+.opened:after { 
+  content: " \2191";
+}
+
+.closed:after {
+  content: " \2193";
+}
+
 /*This is a helper for Back End and can be overridden contextually anywhere*/
 
 .commas li:after {