Question

I’m desperate and frustrated about this : how can I show hide one or more div in my form (Ruby on Rails)?

I browsed the forum and tried all the following with no luck:

I tried this in my partial view _form.html.erb

    <div id="foo">foo</div>
    <a href="#" onclick="Element.toggle('foo'); return false;">toggle foo</a>

I tried

    <div id="foo">foo</div>
    <%= link_to_function('toggle foo', "Element.toggle('foo')") %>

I tried

    <div id="foo" class=foo_class>foo</div>
    <a href="#" onclick="$$('.foo_class').each(Element.toggle);">toggle foo</a>

I tried

    <a href="javascript:void(0);" onclick="showHide('foo');">toggle foo</a>

where showHide(elementId) is defined as follows

    <script language="javascript" type="text/javascript">
    function showHide(elementId) {
        if (document.getElementById) {
            var element = document.getElementById(elementId);
            if (element.style.visibility == 'hidden') {
                element.style.visibility = 'visible';
            } else if (element.style.visibility == 'visible') {
                element.style.visibility = 'hidden';
            }
        }
    }
    </script>

I also tried the same showHide function with display none/block instead of visibility hidden/visible

I have this line in the head section of my layouts/application.html.erb

    <%= javascript_include_tag :defaults %>

None of these solutions I found on the forum worked for me.

So, what am I missing here? why all the solution others proved to work still don;t work for me?

Answer 1

If your element’s visibility is “” (meaning not set, which is its default value), you won’t do anything with showHide. Which is probably why that approach didn’t work. There’s also a difference between turning an object invisible (which will still take up space in your layout) or hiding it (which will make it not take up any space).

What does this do?:

$('foo').toggle();

or

$('foo').invoke('toggle');

Maybe you’re using an old jQuery library.