Radio Button Toggles Form Layout Changes - Original SO Question For Reference

by bizamajig

HTML

<div class="group" id="of-option-homepagesettings"><h3>Homepage Settings</h3> <div id="section-of_homepage_display" class="section  section-radio"> <h4 class="heading">Homepage Display</h4> <div class="option"> <div class="controls"> <div class="label-input-wrapper "><input class="of-input of-radio" type="radio" name="yhlumberyardstraditional3[of_homepage_display]" id="yhlumberyardstraditional3-of_homepage_display-static" value="static"  /><label for="yhlumberyardstraditional3-of_homepage_display-static">Static</label></div><div class="label-input-wrapper "><input class="of-input of-radio" type="radio" name="yhlumberyardstraditional3[of_homepage_display]" id="yhlumberyardstraditional3-of_homepage_display-slideshow" value="slideshow"  checked='checked' /><label for="yhlumberyardstraditional3-of_homepage_display-slideshow">Slideshow</label></div><br/></div><div class="explain">Enable either a static main image or a dynamic slideshow populated by the <a href="http://192.168.10.36/yhlumberyards/wp-admin/edit.php?post_type=slides">Slides</a> content type</div> <div class="clear"></div></div></div> <div id="section-of_number_slides" class="section  section-select hidden homepage_display homepage_display_slides"> <h4 class="heading">Number of Slides</h4> <div class="option"> <div class="controls"> <select class="of-input" name="yhlumberyardstraditional3[of_number_slides]" id="of_number_slides"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option selected="selected" value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option></select><br/></div><div class="explain">Select the number of slides that should be shown in rotation</div> <div class="clear"></div></div></div> <div id="section-of_main_image" class="section  section-upload hidden homepage_display homepage_display_static"> <h4 class="heading">Main...

CSS

body {
    font-size: 67%;
    font-family: sans-serif;

    margin: 0.5em 0.5em;
}

.group {
    border: 1px solid #aaa;
    padding: 0.5em 0.5em 0;
    border-radius: 0.5em;
    width: 600px;
    box-shadow: 1px 3px 10px #ccc;
    margin: 0 auto;
}

h1, h2, h3, h4, h5 {
    margin: 0 0 0.5em;
}


.controls {
    margin: 0 0 0.5em;
}


.section {
    border: 1px solid #ccc;
    background-color: #eee;
    margin: 0.5em 0;
    padding: 0.5em 0.5em;
    border-radius: 0.25em;
}

.screenshots {

}

.hidden {
    display: none;
}

JavaScript

jQuery(document).ready(function() {

    // Homepage Settings - Homepage Display
    // This function handles the radio clicks.
    function homepageDisplayHandleSelection(evt, instant) {
        var duration =  400;
        jQuery('.homepage_display, .main_link').hide(duration);
        var toShow = null;
        if (this.value === "slideshow") {
          toShow = '.homepage_display_slides';
        } else if (this.value === "static") {
          toShow = '.homepage_display_static';
        }
        
        if(toShow) {
            jQuery(toShow).show(duration);
            jQuery('input:checked:visible', toShow).trigger('change');
        }
    }

    // Attach a click handler to the radios
    // and trigger the selected radio
    jQuery('#section-of_homepage_display :radio')
        .change(homepageDisplayHandleSelection)
        .filter(':checked:visible').trigger('change');

    
    // Homepage Settings - Main Link Options
    // This function handles the radio clicks.
    function mainImageLinkHandleSelection() {
        var duration = 400;
        jQuery('.main_link').hide(duration);
        if (this.value === "external_url") {
          jQuery('.main_link_external').show(duration);     
        } else if (this.value === "wp_page") {
          jQuery('.main_link_page').show(duration);     
        }
          else if (this.value === "wp_post") {
          jQuery('.main_link_post').show(duration);     
        }
          else if (this.value === "wp_taxonomy") {
          jQuery('.main_link_category').show(duration);     
        }
    }

    // Attach a click handler to the radios
    // and trigger the selected radio
    jQuery("#section-of_main_image_link_option :radio")
        .change(mainImageLinkHandleSelection)
        .filter(":checked:visible").trigger("change");



    // Homepage Settings - Side Image Link Options
    // This function handles the radio clicks.
    function sideImageLinkHandleSelection() {
        var duration = 400;
       ...