Triggering a Show/Hide section on form Radio button Selection

Posted on 2009-02-18
Last Modified: 2012-05-06
I know how to show and hide a DIV section via CSS, but my knowledge is limited to showing it only when a user is clicking an image to trigger the div to show.
I need to trigger the showing of a form section when a user selects a particular radio button.

The Form is a registration form, the user can choose either to sign up a family member or a business member.  If they choose a business member then they need to ener hotel and credit card information.  Family members do not need to enter this, so I do not wish to show it.

To keep the form simple (and becuse the ration is 10 familty to 1 business) I want to show the business section ONLY when someone clicks a radio button in the same form indicating it is a business member.

The RadioButton is called BusinessMember.

Obviously the section is always on the page and just shows up when the radio button is clicked, I would imagine that is CSS and DIV and perhaps some javascript?

Question by:EGormly
    LVL 14

    Accepted Solution

    to trigger it you need onclick event
    <INPUT type="radio" name="test" value="value" onclick="javascript:showdiv();">Show div
    See here: all the events you can use.

    Author Closing Comment

    excellent Thank you!!
    LVL 2

    Expert Comment

    I believe this is what you're looking for:
    <INPUT type="radio" name="BusinessMember" value="yes" onclick="document.getElementById('first').style.display = 'block';">Business
    <INPUT type="radio" name="BusinessMember" value="no" onclick="document.getElementById('first').style.display = 'none';">Personal
    <div id="first" style="display:none">This will show only when you click the first radio button</div>
    <div id="second">This will always display</div>

    Open in new window


    Author Comment


    Thank you, I had already closed this question and figured out how to tweak the code like you have shown to allow show hide with multiple selections.

    Thanks for the efforts.. I appreciate it.


    Featured Post

    Why You Should Analyze Threat Actor TTPs

    After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

    Join & Write a Comment

    Suggested Solutions

    Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
    Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
    In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
    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…

    746 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

    15 Experts available now in Live!

    Get 1:1 Help Now