Question

Hey everyone I got a javascript problem I can’t seem to find a specific solution for on the web. What I want to be able to do is select one of the radio buttons and have that change the class of #home-right to either .rackmount or .shipping and add the class of .displaynone to the type of dimensions I don’t want shown.

<div id="home-right" class="rackmount">
            <h4 class="helvneuebcn">Case Finder</h4>

            <div class="cta-options">
                <input type="radio" value="Shipping and Storage" name="" checked> Shipping and Storage<br/>
                <input type="radio" value="Rackmount Enclosures" name=""> Rackmount Enclosures<br/>
            </div>

            <div class="shipping-dimensions displaynone">
                <div class="dimensions"><input type="text" class="size"><span class="helvneuemd">H x </span></div>
                <div class="dimensions"><input type="text" class="size"><span class="helvneuemd">W x </span></div>
                <div class="dimensions"><input type="text" class="size"><span class="helvneuemd">L</span></div>
            </div>

            <div class="rackmount-dimensions">
                <div class="dimensions"><input type="text" class="size"><span class="helvneuemd">U Height x </span></div>
                <div class="dimensions"><input type="text" class="size"><span class="helvneuemd">Rack Depth</span></div>
            </div>

            <div class="clear"></div>

            <input type="button" value="Submit" class="findcase">
</div>

Answer 1

Use a onClick handler on your radio buttons to do your stuff. Example:

<input onCLick="..." type="radio" value="Shipping and Storage" name="" checked> Shipping and Storage<br/>

Also use jQuery if you ain’t already – it will save you some time and its very easy to do this kind of functionality.