Sazbean is about online business strategy and we work hard to keep this blog as accessible to our readers as possible. ‘Say it with words, not code’ is one of our guiding principles which keeps us honest when covering technical topics with applied business uses. A principle, I should add, that I will be flagrantly ignoring for this post.
It isn’t always wise to hold back that urge to express our deeper technical understand of a subject we are passionate about. Instead, we have opted to create a segment called quick bites that will be short, technically focused example posts about some subject we are currently working.
I was recently building a UI for a client in Rails and found a good use for a show/hide button in the design. Show/hide buttons, as their names describe, reveal content when pressed and then hide it when pressed again. Typical example code for this using Rails and Javascript might be…
[sourcecode language=’rails’]
<%=link_to_function ("hide", "page['content').hide()")%>
[/sourcecode]
Each link_to_function is a call in Rails to have the renderer build JavaScript that points to a local JS function in the browser that shows or hides the ‘content’ element. This, therefore, it not AJAX but merely local Javascript. The problem with this example is the use of two links instead of one, which is bad UI form. One way to combine the action would be to use Prototype’s toggle() function, as such
[sourcecode language=’rails’]
[/sourcecode]
Now the action is combined but there is a problem. Since the href text does not change, you need to use a word that is abmigious enough to work in both a show state and a hide state, like ‘toggle’. Yet this is not intuitive enough to the reader. Toggle what? While I played around with having the function rewrite the text in the href tag from ‘show’ to ‘hide’, I found this cumbersome. A better way is to have what appears to be one button serving different functions. The following code shows a few improvements, actually
[sourcecode language=’rails’]
>
<%= link_to_function ("Show", nil) do |page| page["content#{entity.id.to_s}"].toggle() page["more_info_hide#{entity.id.to_s}"].toggle() page["more_info_show#{entity.id.to_s}"].toggle() end %>
style=”display:none;”>
<%= link_to_function ("Hide", nil) do |page| page["content#{entity.id.to_s}"].toggle() page["more_info_hide#{entity.id.to_s}"].toggle() page["more_info_show#{entity.id.to_s}"].toggle() end%>
[/sourcecode]
First, you’ll see the id=<%= “‘entity#{entity.id.to_s}'” which is a way to have custom element names in an index of items. The double + single quotes are important to the renderer. Next you see the Show link with a block of three toggle commands. Blocks are a way in RJS to tell the browser to do actions in an ordered chain. Here we are toggling the content to show, toggling the hide link to show and toggling the show link to hide. Once hidden, the show button isn’t available and its place in the browser is taken by the hide button, which has the same toggle functions to reverse the settings. Important to note that in this example, the content starts like hidden by the inline style=”display:none;” CSS. It needs to be inline to work.
I hope this little diversion into the deeper waters of user interface wasn’t too far afield for the readers. Please let me know your thoughts.
If you liked this article, consider subscribing to this blog via email or RSS. Also, consider subscribing to have our free weekly newsletter sent to your email inbox.