Neither Liberty Hawk nor Wikit required much DOM traversal. In both apps, JavaScript and the JQuery library are used to make elements visible on user request. onclick is used to trigger JavaScript that dynamically changes element properties.

Liberty Hawk

Toggle Display & TextContent
When a user is signed in on Liberty Hawk, the search page has a history panel that shows the user’s last 10 searches. There are two history panels used (each for a different view width). One panel is visible only in view width ≥ 769px. The other panel, panel-history-small, is only visible in view width ≤ 768px. The display of these panels is updated at the breakpoints using CSS. panel-history-small can have the display of its body contents (history) toggled. By default, history is not displayed. A link in the panel-heading allows users to show and hide it.
Wikit uncollapsed menu view Wikit collapsed menu view
app/views/searches/_form.html.erb
<div class="panel panel-default panel-history-small" style="max-width: 350px">
    <div class="panel-heading">
      <div id="historyHeader">Last 10 searches Show</div>
    </div>
    <div class="panel-body">
      <div id="history">
        <% current_user.searches.order('created_at DESC').each do |search| %>
    
          <table width="100%">
            <tr>
              <td align="left">
                <%= link_to controller: "searches", action: "search", method: "get", subject: search.metadata do %><u><%= search.metadata %></u><% end %>
              </td>
              <td align="right">
                <%= search.created_at.to_date %>
              </td>
            </tr>
          </table>
    
        <% end %>
      </div>
    </div>
</div>
 
Javascript is used to show/hide history and correspondingly update historyHeader. toggleHistory() updates the display ofhistory, and the textContent of historyHeader. The helper method lastWord() updates the last word of historyHeader’s textContent into a link with an onclick event to toggle the display. In the code snippet below, the functions are commented to explain how they work.
app/views/layouts/application.html.erb
// function to get last word of search history panel heading, and apply css and an onclick function to it. 
function lastWord() {
  $('div#historyHeader').html(function(){	
  	// separate the text by spaces
  	var text= $(this).text().split(' ');
  	// drop the last word and store it in a variable
  	var last = text.pop();
  	// join the text back and if it has more than 1 word add the span tag
  	// to the last word
  	return text.join(" ") + (text.length > 0 ? ' <p class="last" style="float:right" onclick="toggleHistory();">'+last+'</p>' : last);   
  });
}

// function to toggle display of the history panel body and heading content
function toggleHistory() {
  var x = document.getElementById("history");
  var z = document.getElementById("historyHeader");
  if (x.style.display === "none" || z.textContent === 'Last 10 searches Show') {
      x.style.display = "block";
      z.textContent="Last 10 searches Hide";
  } 
  else {
      x.style.display = "none";
      z.textContent="Last 10 searches Show";
  }
  
  // call of last word function to update the last word of the history panel heading (make it a link)
lastWord();
}

// call of last word function to update the last word of the history panel heading on page load
jQuery(document).ready(lastWord());
 
Responding to Scroll & Viewport
The use of JavaScript to detect and respond to a scrollable view is discussed in Responsive Design.

Wikit

Show/Hide Elements
As mentioned in Responsive Design, at breakpoint ≤ 767px, the Devise forms on the landing page are displayed at the top of the view, and their display is toggled with buttons.
Wikit uncollapsed menu view Wikit collapsed menu view
The toggle feature required several considerations.
  1. Displaying the forms and hiding the toggle bottons at breakpoint ≥ 768px
  2. Hiding the forms and displaying the toggle buttons at breakpoint ≤ 767px
  3. Showing a form when the user is linking to the landing page
1. & 2. Displaying the forms according to breakpoint
The two forms are contained inside tab-content elements. These are the elements whose display is toggled. First, the forms are always displayed (and the toggle buttons hidden) at breakpoint ≥ 768px, and vice versa at breakpoint ≤ 767px. Because this display based on screen width is done in JavaScript vs CSS, <body onresize="toggleTabs()"> is used to update the display when the screen size is changed.
HTML for buttons (to toggle forms) & CSS to update their display
app/views/welcome/index.html.erb
<div class="col-md-4 col-sm-6 signin-top" style="margin-bottom: 15px">
    <table style="width:100%" id="tab-btns" style="display:none;">
      <tr>
        <td align="left"><div id="tab1" class="tab"><button type="button" class="btn btn-default task-btn"><i class="fa fa-sign-in" aria-hidden="true"></i>Sign In</button></div></td>
        <td align="right"><div id="tab2" class="tab"><button type="button" class="btn btn-default task-btn"><i class="fa fa-user" aria-hidden="true"></i>New User</button></div></td>
      </tr>
    </table>
    <div class="center-div">  
        <%= render "devise/sessions/form" %>
    </div>
</div>
 
app/assets/stylesheets/application.scss
@media (max-width: 767px) {
  #tab-btns {
    display: block;
  }
}

@media (min-width: 768px) {
    #tab-btns {
        display: none;
    }
    #signin-h {
        margin-top:0;
    }
}
 
HTML for forms & JavaScript to update and toggle their display
app/views/devise/sessions/_form.html.erb
<div id="tab1show" class="tab-content">
    <div>
        <h3 id="signin-h">Sign In</h3>
        ...
        <!-- sign in form -->
        ...
    </div>
</div>

<div id="tab2show" class="tab-content">
    <div>
        <h3>New User</h3>
        ...
        <!-- sign up form -->
        ...
    </div>
</div>
 
app/views/layouts/application.html.erb
function toggleTabs() {
    var $contents = $('.tab-content');
    // check if view width is <= 767px
    if (window.matchMedia('(max-width: 767px)').matches) {
        // if view width is <= 767px, hide all of the tab-content elements
        $contents.hide();
        // show a tab-content when its corresponding button is clicked. 
        $('.tab').click(function() {
            // retreives the ID of the tab-content element based on the ID of the clicked div and shows it.
            var $target = $('#' + this.id + 'show').show();
            // hides the tab-content elements whose corresponding button was not clicked (otherwise multiple elements can show at once)
            $contents.not($target).hide();
        });
    }
    else {
        // if view width is >= 768px, show all of the tab-content elements
        $contents.show();
    }
 }
 
// run toggleTabs() on window load
toggleTabs();
 
3. Display form when linking to landing page
The password recovery and resend confirmation pages have links to the log in and sign up forms. These links lead back to the landing page. I wanted the respective forms to show when each link is clicked. This is achieved by creating a global variable called showTab, and setting the value of the variable in an onclick event for each link. Using $('#tab2show').show() or $('#tab1show').show() in the onclick does not work, as the event needs to fire after the page load. Instead of using a method for triggering the event after the page load, showTab is set, and used to show the corresponding tab-content (sign in or sign up form).
showTab variable declaration & conditional to show element
app/views/layouts/application.html.erb
var showTab;
if (showTab==1)
{
    $('#tab2show').show();
}
else if (showTab==2)
{
    $('#tab1show').show();
}
else 
{
    // hide all tab-content elements when the landing page is loaded 
    // (showTab is set to 0 in the an onclick on links to landing page)
    $('#tab1show').hide(); 
    $('#tab2show').hide();
}
 
link with onclick to set showTab value
app/views/devise/shared/_links.html.erb
<%- if controller_name != 'sessions' %>
  <%= link_to "Log in", root_path(resource_name), :onclick => "showTab=2" %><br />
<% end -%>

<%- if devise_mapping.registerable? && controller_name != 'registrations' %>
  <%= link_to "Sign up", root_path(resource_name), :onclick => "showTab=1" %><br />
<% end -%>
 
When a user leaves the landing page, after showTab has been set from a log in or sign up link, I do not want the form to remain displayed when they go back to the landing page. There were several was to do this, but I just chose to set showTab=0 in an onclick event in links that direct to the landing page.
app/views/layouts/application.html.erb
<div class="brand"><%= link_to "<u><h3 style='font-weight: bold; color:#80668a;'>Wikit <i class='fa fa-pencil' aria-hidden='true'></i></h3></u>".html_safe, welcome_index_path, class: "nav-logo", :onclick => "showTab=0" %></div>
...
            <li class="list-group-item mid-list-item">
                <%= link_to "<i class='fa fa-home' aria-hidden='true'></i> Home / Sign in".html_safe, welcome_index_path, :onclick => "showTab=0" %>
            </li>
 
Hopefully this post explains how JavaScript was used in conjunction with responsive design in Wikit and Liberty Hawk. Thank you for taking a look!