How to hide/show ImageButton in JavaScript?

[dbassett74]

I'm trying to accomplish the following:

                            <ext:ImageButton ID="USAExpand" runat="server" ImageUrl="images/controls/expand.gif">
                                <ToolTips>
                                    <ext:ToolTip ID="ToolTip1" runat="server" Title="Click to expand"></ext:ToolTip>
                                </ToolTips>
                            </ext:ImageButton>         
                            <ext:ImageButton ID="USACollapse" runat="server" ImageUrl="images/controls/collapse.gif" Hidden="true">
                                <ToolTips>
                                    <ext:ToolTip ID="ToolTip2" runat="server" Title="Click to collapse"></ext:ToolTip>
                                </ToolTips>
                            </ext:ImageButton>

When you click on USAExpand, I want it to hide and USACollapse to show. I want to do this entirely client side. Any help would be appreciated.

[Juls]

Try this. Not sure about the .hide() function. You might need to tweak it. Use Firefox to inspect the object and test what the hide() function is called.

<ext:ImageButton ID="USAExpand" runat="server" ImageUrl="images/controls/expand.gif">
    <ToolTips>
        <ext:ToolTip ID="ToolTip1" runat="server" Title="Click to expand"></ext:ToolTip>
    </ToolTips>
    <Listeners>
        <Click Handler="#{USACollapse}.hide();" />
    </Listeners>
</ext:ImageButton>         
<ext:ImageButton ID="USACollapse" runat="server" ImageUrl="images/controls/collapse.gif" Hidden="true">
    <ToolTips>
        <ext:ToolTip ID="ToolTip2" runat="server" Title="Click to collapse"></ext:ToolTip>
    </ToolTips>
</ext:ImageButton>

[geoffrey.mcgill]

Example

<ext:Button ID="Button1" runat="server" Text="Button1">
    <ToolTips>
        <ext:ToolTip runat="server" Title="Click to expand" />
    </ToolTips>
    <Listeners>
        <Click Handler="el.hide();#{Button2}.show();" />
    </Listeners>
</ext:Button>     
    
<ext:Button ID="Button2" runat="server" Hidden="true" Text="Button2">
    <ToolTips>
        <ext:ToolTip runat="server" Title="Click to collapse" />
    </ToolTips>
    <Listeners>
        <Click Handler="el.hide();#{Button1}.show();" />
    </Listeners>
</ext:Button>

Hope this helps.