<div class="l-section">
    <div class="heroSmall u-bg-theme">
        <div class="l-container u-cf">
            <button class="btn btn-alt powerButton js-powerTools-toggler i-hover-target u-pull-top-half">
        <span class="powerButton_label powerButton_label-filter js-powerTools-toggler-filter">
          Filter <i class="i i-hover i-filter-primary i-filter-white-hover u-pull-top-2 u-push-lft-quarter"></i>
        </span>
        <span class="powerButton_label powerButton_label-close js-powerTools-toggler-close">
          Close
        </span>
      </button>

            <h1 class="heroSmall_title u-of-hidden u-padd-rgt-quarter">
                <span>Toggler PowerTools</span>
            </h1>
        </div>
    </div>
</div>

<div class="l-container">
    <div class="powerTools ss-form js-powerTools " data-select="#Categories" data-from-date="#From" data-to-date="#To">
        <div class="powerTools_form">
            <form action="#">
                <fieldset>
                    <div class="form_field ">
                        <label class="form_label" for="Search">
    Search
  </label>
                        <input id="Search" placeholder="Type keywords" class="form_input " type="">
                    </div>

                    <div class="form_field">
                        <label class="form_label" for="Categories">
      Categories
    </label>

                        <select class="form_select" name="Categories" id="Categories" data-placeholder="Filter by category" multiple>
        <option value="option-1" selected>
          Option 1
        </option>
        <option value="option-2">
          Option 2
        </option>
        <option value="option-3">
          Option 3
        </option>
    </select>
                    </div>

                    <div class="g-row">
                        <div class="g g-6">
                            <div class="form_field ">
                                <label class="form_label" for="From">
    From date
  </label>
                                <input id="From" placeholder="" class="form_input " type="">
                            </div>

                        </div>
                        <div class="g g-6">
                            <div class="form_field ">
                                <label class="form_label" for="To">
    To date
  </label>
                                <input id="To" placeholder="" class="form_input " type="">
                            </div>

                        </div>
                    </div>
                </fieldset>

                <div class="form_field form_field-actions">
                    <button class="btn js-comForm_submit" type&#x3D;&quot;submit&quot;>
  Search
</button>

                    <button class="btn btn-close js-comForm_close" type&#x3D;&quot;submit&quot;>
  Cancel search
</button>

                </div>
            </form>
        </div>
    </div>

</div>
<div class="l-section">
  <div class="heroSmall u-bg-theme">
    <div class="l-container u-cf">
      <button class="btn btn-alt powerButton js-powerTools-toggler i-hover-target u-pull-top-half">
        <span class="powerButton_label powerButton_label-filter js-powerTools-toggler-filter">
          Filter <i class="i i-hover i-filter-primary i-filter-white-hover u-pull-top-2 u-push-lft-quarter"></i>
        </span>
        <span class="powerButton_label powerButton_label-close js-powerTools-toggler-close">
          Close
        </span>
      </button>

      <h1 class="heroSmall_title u-of-hidden u-padd-rgt-quarter">
        <span>Toggler PowerTools</span>
      </h1>
    </div>
  </div>
</div>

<div class="l-container">
  {{render '@power-tools' powerTools }}
</div>
{
  "powerTools": {
    "label": "Lorem ipsum",
    "labelLong": "Lorem ipsum dolor sit amet",
    "htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
    "htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
    "htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
    "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
    "url": "#",
    "videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
    "search": {
      "id": "Search",
      "label": "Search",
      "placeholder": "Type keywords"
    },
    "keywords": {
      "id": "Categories",
      "label": "Categories",
      "attr": "data-placeholder=\"Filter by category\" multiple",
      "options": [
        {
          "value": "option-1",
          "label": "Option 1",
          "selected": true
        },
        {
          "value": "option-2",
          "label": "Option 2"
        },
        {
          "value": "option-3",
          "label": "Option 3"
        }
      ]
    },
    "fromDate": {
      "id": "From",
      "label": "From date",
      "placeholder": null
    },
    "toDate": {
      "id": "To",
      "label": "To date",
      "placeholder": null
    },
    "submit": {
      "label": "Search",
      "class": "js-comForm_submit",
      "el": "button",
      "attr": "type=\"submit\""
    },
    "cancel": {
      "label": "Cancel search",
      "class": "btn-close js-comForm_close",
      "el": "button",
      "attr": "type=\"submit\""
    },
    "class": null
  }
}

Toggler the power tools form using the button in the hero element. Wokrs only on small screens.