Description

I have an offscreen element that contains theming and layout options. Additionally I have a checkbox slider element that allows the offscreen element to be shown. I am using jquery to handle and monitor click events.

Goals

1. Make the offscreen element show/hide when the checkbox slider is clicked.
2. Checkbox slider moves left/right when clicked for a visual display.
3. Make the offscreen element automatically hide if the user clicks anywhere outside of the offscreen element.
4. If user clicks outside of offscreen element, or on the checkbox slider (with offscreen element displayed), the offscreen element not only hides, but also the checkbox slider reverts to its default off position.

HTML

Offscreen Element

    <!-- Offscreen -->
    <div id="offscreen-container" class="panel">
      <h2>Layouts</h2>
      <select name="layout-toggle" id="layout-toggle" class="dropdown">
        <optgroup label="Default Layout Styles">
          <optgroup label="--Default Border Style">
            <hr>
            <option value="normal.square.border_full.page_full" id="layout-1">Full - Square</option>
          </optgroup>
          <hr>
          <optgroup label="--Alternate Border Style">
            <hr>
            <option value="normal.square.border_alt.page_full" id="layout-7">Full - Square</option>
          </optgroup>
        </optgroup>
        <option disabled="true"></option>
        <hr>
        <optgroup label="Reversed Layout Styles">
          <optgroup label="--Default Border Style">
            <hr>
            <option value="reversed.square.border_full.page_full" id="layout-13">Full - Square</option>
          </optgroup>
          <hr>
          <optgroup label="--Alternate Border Style">
            <hr>
            <option value="reversed.square.border_alt.page_full" id="layout-19">Full - Square</option>
          </optgroup>
        </optgroup>
      </select>
      <h2>Themes</h2>
      <select name="theme-toggle" id="theme-toggle" class="dropdown">
        <option value="jldn" id="jldn">JLDN</option>
        <option value="dark" id="dark">Dark</option>
        <option value="light" id="light">Light</option>
      </select>
      {% yield offscreen %}
    </div>
    <!-- /Offscreen -->

Checkbox Slider

    <!-- footer -->
    <footer class="panel">
      {% yield footer %}
      <label class="switch tooltip top" data-tooltip="Themes & Layouts">
        <input id="offscreen-toggle" type="checkbox">
        <span class="slider round"></span>
      </label>
    </footer>
    <!-- /footer -->

jQuery

Checkbox Slider click event

        var offscreenToggle = $('#offscreen-toggle');
        var offscreenContainer = $('#offscreen-container');

        offscreenToggle.on('click', () => {
          let rInt = Math.floor(Math.random() * (3 - 1 + 1) + 1);
          
          switch (rInt) {
            default:
            case 1:
              offscreenContainer.toggle(1000);
              break;
            case 2:
              offscreenContainer.fadeToggle(1000);
              break;
            case 3:
              offscreenContainer.slideToggle(1000);
              break;
          }
        });

Autohide click event

      $(document).on('click', (e) => {
        let t = $(e.target);

        if (!t.is('#offscreen-container,#offscreen-container *')) {
          offscreenContainer.hide();
        }
      });

What I have tried

I have made both goals work, separately. However, when I put in script to do both, it fails. Basically, I can do one or the other.

The checkbox slider click event works to perfection. When I add the autohide click event, things get a little wonky. For instance, the checkbox slider functions visually, but the offscreen element is never revealed. If I set the offscreen element to be shown upon page load, the autohide click event functions, but doesn’t revert the checkbox slider to the off position.

I have even tried combining the checkbox slider click event with the autohide click event in an ‘if’ condition to guide event processing… still it doesn’t work. Not sure what to do here.