Click here to Skip to main content
12,699,492 members (35,611 online)
Click here to Skip to main content
Add your own
alternative version


26 bookmarked

Toggle Controls

, 1 Aug 2004
Rate this:
Please Sign up or sign in to vote.
This is a collection of 3 controls with two states, that can be toggled by clicking.

Sample Image - ToggleControls.gif


Controls with two states are often useful on web pages. You may think about buttons that expand and collapse a panel, but apart from that, there are so many situations where states can be "toggled".

This is a collection of three simple user controls that behave similarly, but take three different forms: a button, a link, and an image.

Using the controls

In Web Matrix, drag the file "ToggleButton.ascx", "ToggleImage.ascx" or "ToggleLink.ascx" onto your web form, where you want the control or the link to appear.

In Visual Studio, add the file as an Existing Item to your project. Then, you can drag it on the web form.

If you use another editor, you can add the control manually. The code below is for a button, but the code for a link or image is similar.

Add this directive on top of the page:

<%@ Register TagPrefix="rw" TagName="ToggleButton" 
                                    Src="ToggleButton.ascx" %>

Then, add a tag like this in your HTML code where you want the toggle button to be displayed:

<rw:ToggleButton id="ToggleButton1" 

Next, make sure you use the appropriate settings, for instance:

<rw:ToggleButton id="ToggleButton1" runat="server"
    Text2="<<Less" Text1="More>>"
    ToolTip1="Click for more" ToolTip2="Click for less"

Not all of these settings are necessary. As a minimum, you should set the OnClick handler, the Text1 and Text2 properties on the ToggleButton and ToggleLink controls, and the ImageURL1 and ImageURL2 properties on the ToggleImage control.

The controls all have a property Status, the value of which can be either 1 or 2. When clicked, the value will toggle from 1 to 2 or back. By reading this value in your code (typically in the OnClick event handler), you can take actions to reveal or collapse panels on the web form, or to modify whatever you want to reflect the new state. The initial value of Status is 1.

Although the control is written in VB.NET, you may use it in any page, even if that page is written in another language.

How it works

The code is pretty straightforward. This is a part of the code for the ToggleButton:

<<%@ Control Language="VB" ClassName="ToggleButton" %>
<script runat="server">

    Public Property Status As Integer
            Dim obj As Object = Viewstate("status")
            If(Not obj Is Nothing) Then Return CInt(obj)
            Return 1
        End Get
            If(Value=1) Then
            End If
        End Set
    End Property

    Public Property Text1 As String
            Dim obj As Object = Viewstate("text1")
            If(Not obj Is Nothing) Then Return obj.ToString()
            Return "Text1 not set"
        End Get
            If(Status=1) Then
            End If
        End Set
    End Property

' other properties come here
' code omitted for brevity

    Public Event Click(Sender as Object, E as EventArgs)

    Protected Sub OnClick(e As EventArgs)
        RaiseEvent Click(Me, e)
    End Sub

    Sub Button1_Click(sender As Object, e As EventArgs)
        If Status=1 Then
        End If
    End Sub


From inside the page, the properties of the button itself are hidden. To make them available again, I added the most common properties (Text, Enabled and Tooltip) to the user control again, and I added getters and setters to pass them through to the button. There are separate properties for Text and Tooltip for both states (Text1/Text2 and Tooltip1/Tooltip2). For the ToggleImage control, there're the ImageURL1 and ImageURL2 properties. Make sure they point to existing images.

Finally, I added the OnClick delegate and event handler. This will pass the button's Click event on to the page, while toggling the state of the control.

The code for the ToggleImage and ToggleLink controls is very similar.

As an example, here's a simple demo page for the ToggleButton:

<%@ Page Language="VB" ValidateRequest="False"%>
<%@ Register TagPrefix="uc0" TagName="ToggleButton" Src="ToggleButton.ascx" %>

A more elaborate demo page is available with the download to show you how to use all three controls.

Points of interest

The project is an example of how to create simple user controls with events.


This is the first version, 1.0.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Jos Branders
Web Developer
Belgium Belgium
No Biography provided

You may also be interested in...


Comments and Discussions

QuestionHow to use VB User Control in C# Web Application with Namespaces Pin
Appi96-Apr-10 3:26
memberAppi96-Apr-10 3:26 
AnswerRe: How to use VB User Control in C# Web Application with Namespaces Pin
Appi97-Apr-10 2:23
memberAppi97-Apr-10 2:23 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170118.1 | Last Updated 2 Aug 2004
Article Copyright 2004 by Jos Branders
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid