JSFiddle - React, Tailwind, and code Playground

by rossipedia

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...

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

$(function() {
    function setupRadioButtons(containerSelector, sectionSelector, valToSectionMap) {
            $('input:radio', containerSelector).change(function(evt, instant) {
                var duration = instant ? null : 400,
                $toshow, $tohide, section;
                section = valToSectionMap[$(this).val()];
                $toshow = section ? $(section) : null;
                $tohide = $(sectionSelector);
                if($toshow) {
                    $tohide = $tohide.not($toshow);
                    if(!$toshow.is(':visible')) {
                        $toshow.show(duration);
                    }
                }
                $tohide.hide(duration);
                if($toshow)
                    $('input:radio:checked', $toshow).trigger('change', instant);
            });
    }
    setupRadioButtons('#section-of_homepage_display', '.homepage_display, .main_link', {
        'slideshow': '.homepage_display_slides',
        'static': '.homepage_display_static'
    });
    setupRadioButtons('#section-of_main_image_link_option', '.main_link', {
        'no_link': null,
        'external_url': '.main_link_external',
        'wp_page': '.main_link_page',
        'wp_post': '.main_link_post',
        'wp_taxonomy': '.main_link_category'
    });
    setupRadioButtons('#section-of_side_image_link_option', '.side_link', {
        'no_link': null,
        'external_url': '.side_link_external',
        'wp_page': '.side_link_page',
        'wp_post': '.side_link_post',
        'wp_taxonomy': '.side_link_category'
    });
    $('input:radio:checked:visible').trigger('change', true);
});