8-A Dropdown Filter
Example with 3 Dropdowns

View by:

Usage with HTML Attribute
<div class="row" data-aau="filters" id="examplefilters">
  <div class="float-left_tablet">
    <div class="marged padded"><p>View by</p></div>
  </div>
  <div class="columns tablet-3">
    <div class="marged">
      <select id="areaofstudy" data-maxitemsvisible="5">
        <option value="">Area of Study</option>
        <option value="design">Design</option>
        <option value="enterainment">Entertainment</option>
        <option value="fine-art">Fine Art</option>
        <option value="liberal-art">Liberal Arts</option>
      </select>
    </div>
  </div>
  <div class="columns tablet-3">
    <div class="marged">
      <select id="degreeprogram" data-maxitemsvisible="5">
        <option value="">Degree Programs</option>
        <option value="undergraduate">Undergraduate</option>
        <option value="graduate">Graduate</option>
      </select>
    </div>
  </div>
  <div class="columns tablet-3">
    <div class="marged">
      <select id="location" data-maxitemsvisible="5">
        <option value="">Location</option>
        <option value="onsite">Onsite</option>
        <option value="online">Online</option>
      </select>
    </div>
  </div>
  <div class="columns tablet-1">
    <div class="marged padded"><p><a data-reset href="javascript:void(0);">Reset</a></div>
  </div>
</div>
Parameters

The filter element needs an id attribute if used by another component (ex. pushdown).

Name Type Default Required Description Example
data-target String '' no Id attribute of the container to filter. If this attribute is specified, the plugin will handle the filtering by itself.
<div class="row" data-aau="filters" id="examplefilters" data-target="#academics">...</div>
data-reset no define the reset button; the reset button will appear when one of the items is selected
<a data-reset href="javascript:void(0);">Reset</a>
Usage Item with HTML attribute

The plugin will automatically filter (show or hide) an element inside the container specified by data-target="...". To allow the filtering of an element, you need to add the attribute data-filtereditem to it. The attribute(s) data-* contain(s) the values for which the element will be filtered (show / hide).

<div class="pushdown-item" data-filtereditem data-program="graduate">
	...
</div>
Item Parameters
Name Type Default Required Description Example
data-filtereditem yes Defines the element to be filtered
<div data-filtereditem> ... </div>
data-* String '' no Defines the different filters affecting the element. You can add as many values per filter as you want, separated by comma (,).
<div data-filtereditem data-program="graduate" data-location="online,onsite"> ... </div>

In this case, the element will be shown if the filters selected are program:graduate, or location:online, or program:graduateand location:onsite, etc...

Event
Name Description Parameters Example
'filtered' Triggered when a dropdown has been changed. val: Array containing the current selected value(s) of the dropdown(s).
The index is the id of the dropdown. The value is value of the option.
Ex:
[
  "areaofstudy":"design",
  "degreeprogram":"graduate",
  "location":"onsite"
]
$('#examplefilters').on('filtered', function (ev, data) {
  console.log(data.val);
});
Example with 1 Dropdown

View by:

Usage with HTML attribute
<div class="row" data-aau="filters" id="exampleonefilter" data-target="#portfolio">
  <div class="columns tablet-2 medium-2">
    <div class="marged padded"><p>View by</p></div>
  </div>
  <div class="columns tablet-3">
    <div class="marged">
      <select id="program" data-maxitemsvisible="5">
        <option value="">All Programs</option>
        <option value="undegraduate">Undergraduate</option>
        <option value="graduate">Graduate</option>
      </select>
    </div>
  </div>
</div>
8-F Sidebar Filter

The Sidebar navigation is used in News & Events and Calendar.

Usage with HTML Attribute
<ul class="sidenav" data-aau="sidebar">
  <li class="default" data-element-value="0">
    <a href="#">All Categories</a>
  </li>
  <li data-element-value="1">
    <a href="#">Departments</a>
    <ul>
      <li data-element-value="2"><a href="#">Fashion</a></li>
      ...
    </ul>
  </li>
  <li data-element-value="3">
    <a href="#">University</a>
    <ul>
      <li data-element-value="4">
        <a href="#">Athletics</a>
        <ul>
          <li data-element-value="5">
            <a href="#">Men's Sports</a>
            <ul>
              <li data-element-value="6"><a href="#">Baseball</a></li>
              ...
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
HTML Attribute
Name Type Default Required Description Example
data-element-value String,
Number,
...
'' no Value of the element that will be used as a parameter for the filter
<li data-element-value="1">
  ...
</li>
Event
Name Description Parameters Example
'SidebarSelect' Fired when one element of the sidebar has been selected val: value of the selected element
$('#sidebar').on('SidebarSelect', function(ev, data){
  console.log('val:'+data.val);
});

Sign In