JSFiddle - React, Tailwind, and code Playground

by christianhanvey

HTML

<div class="wrapper">


    <h1>Manager Access</h1>
    <p>A user group is created with a single role for these settings</p>
    <p>Settings will apply to all currently existing contexts</p>

    <div class="tabs">

       <div class="tab">
           <input type="radio" id="tab-1" name="tab-group-1" checked>
           <label for="tab-1">Main Menu &amp; Functions</label>
           <div class="content">
                <fieldset>
            <legend>Manager Main Menu &amp; Functions</legend>
            <p>Check the menu items/features your users can access and use</p>
            <ul>
                <li><input type="checkbox" name="dashboards" id="dashboards" value=""> <label for="dashboards">DASHBOARDS Menu</label></li>
                <li><input type="checkbox" name="menu_site" id="menu_site" value=""> <label for="menu_site">SITE Menu</label>
                    <div class="contextual">
                        <ul>
                            <li><input type="checkbox" name="empty_cache" id="empty_cache" value=""> <label for="empty_cache">Clear cache</label></li>
                            <li><input type="checkbox" name="remove_locks" id="remove_locks" value=""> <label for="remove_locks">Remove locks</label></li>
                            <li><input type="checkbox" name="search" id="search" value=""> <label for="search">Search</label></li>
                            <li><input type="checkbox" name="new_document" id="new_document" value=""> <label for="new_document">Create resource</label></li>
                            <li><input type="checkbox" name="new_static_resource" id="new_static_resource" value=""> <label for="new_static_resource">Create static</label></li>
                            <li><input type="checkbox" name="new_symlink" id="new_symlink" value=""> <label for="new_symlink">Create sym link</label></li>
                            <li><input type="checkbox" name="new_weblink" id="new_weblink" value=""> <label for="new_weblink">Create web...

CSS

body {
            font-family:sans-serif;
            background:#eee;
            color:#333;
            font-size:13px;
        }
    p,ul { margin-bottom:0.5em;}
        fieldset {
            background-color:#fff;
            margin-top:10px;
            border:1px solid #aaa;
    padding:10px;
        }
        legend {
            font-weight:bold;
            font-size:16px;
        }
        ul {
            list-style-type:none;
             padding-left:1em;
        }
        li li { font-size: 11px; }
        a { color:#393; }


/* css tabs with no javascript - from chris coyier: 
    http://css-tricks.com/functional-css-tabs-revisited/
*/
        .tabs {
          position: relative;
          min-height: 800px; /* This part sucks */
          clear: both;
          margin: 25px 0;
        }
        .tab {
          float: left;
        }
        .tab>label {
          background: #eee;
          padding: 10px;
          border: 1px solid #ccc;
          margin-left: -1px;
          position: relative;
          left: 1px;
            font-weight:bold;
        }
        .tab>label:hover {
            cursor:pointer;
        }
        .tab [type=radio] {
          display: none;
        }
        .content {
          position: absolute;
          top: 25px;
          left: 0;
          background: white;
          right: 0;
          bottom: 0;
          padding: 20px;
          border: 1px solid #ccc;
        }
        [type=radio]:checked ~ label {
          background: white;
          border-bottom: 1px solid white;
          z-index: 2;
        }
        [type=radio]:checked ~ label ~ .content {
          z-index: 1;
        }

JavaScript

$(document).ready(function(){
            
            var show_text = 'show details';
            var hide_text = 'hide details';
            
            // hide the sub-level checkboxes in contextual areas, add a link to hook hide/show behaviour to
            $('.contextual').hide().before('<a class="revealer" href="#">'+show_text+'</a>'); 
            // add the hide/show behaviour
            $('.revealer').click(function(){
                $(this).next().toggle();
                var new_text = ( $(this).text() == show_text ) ? hide_text : show_text ;
                updateRevealerText( $(this), new_text );
                return false;
            })
            // we want all sub-level-checkboxes to be checked by default, but disable them so they are not submitted
            $('.contextual input[type="checkbox"]').attr('checked','checked').attr('disabled',true);

            // clicking a checkbox will open its sub-level options for more detail
            $('input[type="checkbox"]').change(function(){                
                var contextual = $(this).parent().find('.contextual').first();
                if ( $(this).is(':checked') ) {
                    contextual.show();
                    contextual.find('input').removeAttr('disabled');
                    updateRevealerText( contextual.prev(), hide_text );
                } else {
                    contextual.hide();
                    contextual.find('input').attr('disabled',true);                    
                    updateRevealerText( contextual.prev(), show_text );
                }
            })
            
            function updateRevealerText( el, new_text ) {
                if ( el.text() != new_text ) { el.text(new_text) }                
            }
            
                        
            
        })