# Ajax Toggle Bar

**URL:** <https://www.ruby-forum.com/t/ajax-toggle-bar/106785>\
**Category:** Rails\
**Created:** [June 14, 2007, 3:18am UTC](https://www.ruby-forum.com/t/ajax-toggle-bar/106785 "2007-06-14T03:18:09Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![glenn](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/4bbf92/32.png) [@glenn](https://www.ruby-forum.com/u/glenn)\
**Post date:** [June 14, 2007, 3:18am UTC](https://www.ruby-forum.com/t/ajax-toggle-bar/106785/1 "2007-06-14T03:18:09Z")

</div>

Hi Everybody,

I am new to Ajax and wondering if it is possible to create Ajax  
component like following link in Rails. I am not sure how to call  
this kinds of widgets. It shows bars which you can dynamically show  
and hide. This seems very useful to save screen space.

[http://quicken.intuit.com/personal-finance/basic-personal-budget.jhtml](http://quicken.intuit.com/personal-finance/basic-personal-budget.jhtml)

Could anyone point me what is the best way to write this kind of  
components or anything I need to know?

Thanks,  
Glenn

---

<div class="post-metadata">

**Author:** ![glenn](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/4bbf92/32.png) [@glenn](https://www.ruby-forum.com/u/glenn)\
**Post date:** [June 14, 2007, 4:38am UTC](https://www.ruby-forum.com/t/ajax-toggle-bar/106785/2 "2007-06-14T04:38:18Z")

</div>

Glenn wrote:

> I am new to Ajax and wondering if it is possible to create Ajax  
> component like following link in Rails. I am not sure how to call  
> this kinds of widgets. It shows bars which you can dynamically show  
> and hide. This seems very useful to save screen space.
> 
> [http://quicken.intuit.com/personal-finance/basic-personal-budget.jhtml](http://quicken.intuit.com/personal-finance/basic-personal-budget.jhtml)
> 
> Could anyone point me what is the best way to write this kind of  
> components or anything I need to know?

Get Firebug, open that page with Firefox, distend the context menu for  
one  
of those bars (the right-click-mouse-button-menu), and inspect the  
element:

Features & Benefits

Now look up infoToggle, in Firebug’s script panel:

function infoToggle(num) {  
infoOffID = “info-”+num;  
infoOnID = “info-on-”+num;  
if (document.getElementById(infoOffID).className == “off”) {  
document.getElementById(infoOffID).className = “”;  
document.getElementById(infoOnID).className = “off”;  
if (num == “all”) {  
for (i=1; document.getElementById(“info-on-”+i); i++) {  
document.getElementById(“info-on-”+i).className = “off”;  
document.getElementById(“info-”+i).className = “”;  
}  
}  
}  
else {  
document.getElementById(infoOffID).className = “off”;  
document.getElementById(infoOnID).className = “”;  
if (num == “all”) {  
for (i=1; document.getElementById(“info-on-”+i); i++) {  
document.getElementById(“info-on-”+i).className = “”;  
document.getElementById(“info-”+i).className = “off”;  
}  
}  
}  
}

I’m not sure if I agree with the style. All the variables need 'var ’  
before  
them. And FireBug wrecked the indentation.

Note that the code uses no Ajax. It just shows and hides DIVs based on  
their  
IDs. It switches between a visible and invisible class, “off”, and this  
class probably says display:none inside. Ajax is more complex - it  
fetches  
new data from a server, and slips it into the page. This page just uses  
the  
common technique of sending out much more information than you see, and  
“accordioning” it when you need it.

New question to the group: What is the JavaScriptGenerator way to do all  
that?

–  
Phlip  
[Test Driven Ajax (on Rails) [Book]](http://www.oreilly.com/catalog/9780596510657/)  
“Test Driven Ajax (on Rails)”  
assert\_xpath, assert\_javascript, & assert\_ajax

---

<div class="post-metadata">

**Author:** ![glenn](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/4bbf92/32.png) [@glenn](https://www.ruby-forum.com/u/glenn)\
**Post date:** [June 14, 2007, 8:30am UTC](https://www.ruby-forum.com/t/ajax-toggle-bar/106785/3 "2007-06-14T08:30:36Z")

</div>

Hi Philip,

Thank you so much for your replay. I have never thought it is a plain  
JavaScript. Anything looks cool appears Ajax to me.  
I did little more research based on your suggestion and following  
page.

[http://wiki.rubyonrails.com/rails/pages/HowtoUseElement](http://wiki.rubyonrails.com/rails/pages/HowtoUseElement)

It seem Element.toggle is the one I need to use in Rails.

Thank you,  
Glenn