How do I get a horizontally oriented radiobuttonlist to make a dropdownlist visible or hidden using javascript?

Posted on 2007-07-25
Last Modified: 2013-11-26
My tools:  Visual Web Developer, backcoding

This script works fine at the outset, but whenever I change the radiobuttonlist to 'horizontal' orientation within Visual Web Developer 'properties' the script does not work. If I change it back, then it still doesn't work. Can anyone give me a method to do this using a 'horizontally' oriented two-option radiobuttonlist rather than this vertical orientation?


<html xmlns="" >
<head id="Head1" runat="server">
<script language="javascript">
//hide the dropdownlist on pageload...
function function_StartHidden()
     document.getElementById("myddl").style.display = "none";


window.onload= function_StartHidden;


<script type="text/javascript">
//show the dropdownlist...
function ShowDropDown()
     document.getElementById("myddl").style.display = "inline";
////hide the dropdownlist
function HideDropDown()
     document.getElementById("myddl").style.display = "none";
    <form id="form1" runat="server">
        Choose 'pn1' to make the dropdownlist visible; choose 'pn2' to hide the dropdownlist.....<br />
        <br />
        <asp:DropDownList ID="myddl" runat="server" Width="88px">
            <asp:ListItem>item 1</asp:ListItem>
            <asp:ListItem>item 2</asp:ListItem>
            <asp:ListItem>item 3</asp:ListItem>
            <asp:ListItem>item 4</asp:ListItem>
        </asp:DropDownList>&nbsp;<br />
        <br />
        Here we have a radiobuttonlist:<br />
        <asp:radiobuttonlist runat="Server" id="rbl">
        <asp:listitem onclick="ShowDropDown()">pn1</asp:listitem>
        <asp:listitem onclick="HideDropDown()">pn2</asp:listitem>
        <br />

Question by:jazjef
    LVL 9

    Accepted Solution

    Add the RepeatDirection="Horizontal" attribute in the code as follows:

    <asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal">

    This will help you display Radiobutton list in horizontal direction

    Chirag Patel
    LVL 4

    Author Comment


    Thanks.... that works great!

    Can you explain to me why changing the radiobuttonlist orientation to 'horizontal' within the 'properties' section of the design area does not work, but adding RepeatDirection="Horizontal" directly into the html  of the control does work?


    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Join & Write a Comment

    More often than not, we developers are confronted with a need: a need to make some kind of magic happen via code. Whether it is for a client, for the boss, or for our own personal projects, the need must be satisfied. Most of the time, the Framework…
    Wouldn’t it be nice if you could test whether an element is contained in an array by using a Contains method just like the one available on List objects? Wouldn’t it be good if you could write code like this? (CODE) In .NET 3.5, this is possible…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    755 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    25 Experts available now in Live!

    Get 1:1 Help Now