JSFiddle - React, Tailwind, and code Playground

by Mark Villanueva

HTML

<script src="//cdn.ckeditor.com/4.4.7/standard/ckeditor.js"></script>
<label class="btn btn-default btn-orca-toggle" id="EuthanasiaSOPLabel0" data-action="show" data-value="Y" data-ckeditorid='[&quot;EuthanasiaSOPDeviate&quot;,&quot;RationaleDeviation&quot;]' data-killdiv="DeviationExplaination" data-target="{&quot;0&quot;:&quot;DeviationExplaination&quot;}">
    <input type="radio" id="EuthanasiaSOPButtons0" value="Y" />Yes</label>
<label class="btn btn-default btn-orca-toggle" data-action="hide" data-value="N" id="EuthanasiaSOPLabel1" data-ckeditorid='[&quot;EuthanasiaSOPDeviate&quot;,&quot;RationaleDeviation&quot;]' data-killdiv="DeviationExplaination" data-target="{&quot;1&quot;:&quot;DeviationExplaination&quot;}">
    <input type="radio" id="EuthanasiaSOPButtons1" value="N" />No</label>
<div id="DeviationExplaination" class="hidden" style="margin-top:2%">
    <div class="row" id="MethodDeviation">
        <div class="colxs-12">
            <div class="row">
                <label class="control-label">How will methods deviate?</label>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div id="EuthanasiaSOPDeviate" class="ckeditor div-orca-ckeditor" contenteditable="false" placeholder="Use 250 words or less"></div>
        </div>
    </div>
</div>
<div class="row" id="RationaleDeviation" style="margin-top:1%">
    <div class="row">
        <label class="control-label">Provide rationale for the deviation</label>
    </div>
    <div class="row">
        <div id="EuthanasiaSOPRationale" class="ckeditor div-orca-ckeditor" contenteditable="false" placeholder="Use 250 words or less"></div>
    </div>
</div>

JavaScript

function toggleCKEditorShow(dataAction, editor, editorName) {
    if (dataAction === 'show') {
        CKEDITOR.replace(editorName, {
            autoGrow_onStartup: true,
            allowedContent: true
        });
    }

    if (dataAction === 'hide') {
        editor.destroy(true);
    }
}

$('label.btn-orca-toggle').click(function (e) {
    var myTarget = e.target;
    var dataTargetArr = $(this).data('target');
    var dataAction = $(this).data('action');
    var selectID = e.target.id;
    var boolVal = selectID.replace(/^.*(\d)$/, "$1");
    /* editorArrName can be a string or an array in this use */
    var editorArrName = $(this).data('ckeditorid');
    var killDiv = $(this).data('killdiv');

    if (dataAction === 'show') {
        $('#' + dataTargetArr[boolVal]).removeClass('hidden');
        if (Array.isArray(editorArrName)) {
            for (var i in editorArrName) {
                console.log(editorArrName[i]);
                var editor = CKEDITOR.instances[editorArrName[i]];
                toggleCKEditorShow(dataAction, editor, editorArrName[i]);
            }
        } else {
            console.log('Time to kick the tires and light the fires');
            console.log(editorArrName);
            var editor = CKEDITOR.instances[editorArrName];
            toggleCKEditorShow(dataAction, editor, editorArrName);
        }

    } else if (dataAction === 'hide') {
        if (Array.isArray(editorArrName)) {
            for (var i in editorArrName) {
                console.log(editorArrName[i]);
                var editor = CKEDITOR.instances[editorArrName[i]];
                toggleCKEditorShow(dataAction, editor, editorArrName[i]);
            }
        } else {
            var editor = CKEDITOR.instances[editorArrName];
            toggleCKEditorShow(dataAction, editor, editorArrName);
        }


        //toggleCKEditorShow(dataAction, editor, editorName);

        $('#' + dataTargetArr[boolVal]).addClass('hidden');
        $('#' +...