JSFiddle - React, Tailwind, and code Playground

HTML

<fieldset class="module collapse ">
          <h2>Map Options</h2>
        
        <ul>
          <fieldset class="module">
          
          <h2>Map window:</h2>
          
          
          <ul>
          
            
              <li class="required">
                
                <label for="id_zoom_level">Default zoom level</label>
                <input id="id_zoom_level" name="zoom_level" type="text" value="4" />
              </li>
            
          
            
              <li class="required">
                
                <label for="id_center_lat">Latitude of map center point</label>
                <input id="id_center_lat" name="center_lat" type="text" value="55.0" />
              </li>
            
          
            
              <li class="required">
                
                <label for="id_center_long">Longitude of map center point</label>
                <input id="id_center_long" name="center_long" type="text" value="-70.0" />
              </li>
            
          
            
              <li class="required">
                
                <label for="id_map_width">Map width (in px)</label>
                <input id="id_map_width" name="map_width" type="text" value="400" />
              </li>
            
          
            
              <li class="required">
                
                <label for="id_map_height">Map height (in px)</label>
                <input id="id_map_height" name="map_height" type="text" value="400" />
              </li>
            
          
        </ul>
          </fieldset>
        </ul>
        
        <ul>
          <fieldset class="module collapse">
          
          <h2>Other Options:</h2>
          
          
          <ul>
          
            
              <li class="optional">
                
                <label for="id_useLayerBounds">Overide map zoom with layer extent</label>
                <input id="id_useLayerBounds"...

CSS

fieldset.collapsed * {
    display: none;
}

fieldset.collapsed h2, fieldset.collapsed {
    display: block !important;
}

fieldset.collapsed h2 {
    background-image: url(../img/nav-bg.gif);
    background-position: bottom left;
    color: #999;
}

fieldset.collapsed .collapse-toggle {
    background: transparent;
    display: inline !important;
}


/* MODULES */

.module {
    border: 1px solid #ccc;
    margin-bottom: 5px;
    background: white;
}

.module p, .module ul, .module h3, .module h4, .module dl, .module pre {
    padding-left: 10px;
    padding-right: 10px;
}

.module blockquote {
    margin-left: 12px;
}

.module ul, .module ol {
    margin-left: 1.5em;
}

.module h3 {
    margin-top: .6em;
}

.module h2, .module caption, .inline-group h2 {
    min-width:300px;
    margin: 0;
    padding: 2px 5px 3px 5px;
    font-size: 11px;
    text-align: left;
    font-weight: bold;
    background: #7CA0C7 url(../img/default-bg.gif) top left repeat-x;
    color: white;
}

.module table {
    border-collapse: collapse;

JavaScript

/* gettext library */

var catalog = new Array();

function pluralidx(count) { return (count == 1) ? 0 : 1; }


function gettext(msgid) {
  var value = catalog[msgid];
  if (typeof(value) == 'undefined') {
    return msgid;
  } else {
    return (typeof(value) == 'string') ? value : value[0];
  }
}

function ngettext(singular, plural, count) {
  value = catalog[singular];
  if (typeof(value) == 'undefined') {
    return (count == 1) ? singular : plural;
  } else {
    return value[pluralidx(count)];
  }
}

function gettext_noop(msgid) { return msgid; }

function pgettext(context, msgid) {
  var value = gettext(context + '' + msgid);
  if (value.indexOf('') != -1) {
    value = msgid;
  }
  return value;
}

function npgettext(context, singular, plural, count) {
  var value = ngettext(context + '' + singular, context + '' + plural, count);
  if (value.indexOf('') != -1) {
    value = ngettext(singular, plural, count);
  }
  return value;
}

function interpolate(fmt, obj, named) {
  if (named) {
    return fmt.replace(/%\(\w+\)s/g, function(match){return String(obj[match.slice(2,-2)])});
  } else {
    return fmt.replace(/%s/g, function(match){return String(obj.shift())});
  }
}



var sPath=window.location.pathname;

    function show () { // Show
        $(this).text(gettext("Hide"))
            .closest("fieldset")
            .removeClass("collapsed")
            .trigger("show.fieldset", [$(this).attr("id")]);
        window.localStorage.setItem($(this).attr("id"), true);
    }
    function hide () { // Hide
        $(this).text(gettext("Show"))
            .closest("fieldset")
            .addClass("collapsed")
            .trigger("hide.fieldset", [$(this).attr("id")]);
        window.localStorage.removeItem($(this).attr("id"))
        return false;
    }
    // Add anchor tag for Show/Hide link
    $("fieldset.collapse").each(function (i, elem) {
        // Don't hide if fields in this fieldset have errors
        key = 'fieldsetcollapser' + i + sPath;
...