# Toggling a DIV based on a menu selection

**URL:** <https://www.ruby-forum.com/t/toggling-a-div-based-on-a-menu-selection/114637>\
**Category:** Rails\
**Created:** [September 17, 2007, 1:23pm UTC](https://www.ruby-forum.com/t/toggling-a-div-based-on-a-menu-selection/114637 "2007-09-17T13:23:27Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![lunaclaire](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/l/f4b2a3/32.png) [@lunaclaire](https://www.ruby-forum.com/u/lunaclaire)\
**Post date:** [September 17, 2007, 1:23pm UTC](https://www.ruby-forum.com/t/toggling-a-div-based-on-a-menu-selection/114637/1 "2007-09-17T13:23:27Z")

</div>

I have a situation where when the user selects a state for a model by  
choosing a particular menu item in the view, I want to either show or  
hide a DIV containing other relevant attribute choices… pretty basic  
stuff, but I’m still a newbie on a lot of the rails view/ui stuff.

I think I need a combination of observe\_field on the attribute being  
changed by the menu and then some kind of Prototype toggle effect. And  
I also need to check the match the user’s menu choice against a  
condition that says whether or not to show the secondary set of  
choices in the DIV.

Can anyone show me what the code fragment would look like to do this?

TIA

---

<div class="post-metadata">

**Author:** ![lunaclaire](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/l/f4b2a3/32.png) [@lunaclaire](https://www.ruby-forum.com/u/lunaclaire)\
**Post date:** [September 24, 2007, 11:09pm UTC](https://www.ruby-forum.com/t/toggling-a-div-based-on-a-menu-selection/114637/2 "2007-09-24T23:09:34Z")

</div>

lunaclaire,

how about

In the view:

 this is the text to hide
Click toggle to hide the text: \<%= link\_to\_remote "Toggle", :url=\>{:action=\>:toggle} %\>

In the controller:

def toggle  
render :update do |page|  
page.hide ‘test\_div’  
end  
end

That is very simplistice but it may get you started. If you want to  
toggle both ways then you need to be a bit smarter. From your  
description, I suspect you actually want a drop down select box. So  
you will need to use observe field to call a method that will check  
the selected value and render hide or show accordingly.

hth

tonypm

---

<div class="post-metadata">

**Author:** ![lunaclaire](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/l/f4b2a3/32.png) [@lunaclaire](https://www.ruby-forum.com/u/lunaclaire)\
**Post date:** [September 25, 2007, 2:17am UTC](https://www.ruby-forum.com/t/toggling-a-div-based-on-a-menu-selection/114637/3 "2007-09-25T02:17:49Z")

</div>

On 9/24/07, tonypm [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote:

> Click toggle to hide the text:  
> \<%= link\_to\_remote “Toggle”, :url=\>{:action=\>:toggle} %\>

Whoa, no need for a round-trip to the server just to toggle a div.  
This will do the toggle on the client side:

\<%= link\_to\_function ‘Toggle’, ‘Element.toggle(“test\_div”)’ %\>

Element.toggle is a Prototype function.

---

<div class="post-metadata">

**Author:** ![lunaclaire](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/l/f4b2a3/32.png) [@lunaclaire](https://www.ruby-forum.com/u/lunaclaire)\
**Post date:** [September 25, 2007, 7:38pm UTC](https://www.ruby-forum.com/t/toggling-a-div-based-on-a-menu-selection/114637/4 "2007-09-25T19:38:24Z")

</div>

On 9/24/07, Dave S. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote:

> Bob S. wrote:
> 
> > Whoa, no need for a round-trip to the server just to toggle a div.
> 
> Certainly not normally, but one of the OP’s requirements was:  
> “And I also need to check the match the user’s menu choice against a  
> condition that says whether or not to show the secondary set of  
> choices in the DIV.”

Indeed. I failed to read the OP carefully. Thanks.

---

<div class="post-metadata">

**Author:** ![lunaclaire](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/l/f4b2a3/32.png) [@lunaclaire](https://www.ruby-forum.com/u/lunaclaire)\
**Post date:** [September 25, 2007, 5:42am UTC](https://www.ruby-forum.com/t/toggling-a-div-based-on-a-menu-selection/114637/5 "2007-09-25T05:42:12Z")

</div>

Bob S. wrote:

> On 9/24/07, tonypm [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote:
> 
> > Click toggle to hide the text:  
> > \<%= link\_to\_remote “Toggle”, :url=\>{:action=\>:toggle} %\>
> 
> Whoa, no need for a round-trip to the server just to toggle a div.  
> This will do the toggle on the client side:
> 
> \<%= link\_to\_function ‘Toggle’, ‘Element.toggle(“test\_div”)’ %\>
> 
> Element.toggle is a Prototype function.

Certainly not normally, but one of the OP’s requirements was:  
“And I also need to check the match the user’s menu choice against a  
condition that says whether or not to show the secondary set of  
choices in the DIV.”

In my opinion, though, you would be better off incorporating that logic  
in the original request. (Of course, I’m a newb.)