Simple jQuery Loop Faceting

Pull posts from a CPT into a field and then display content from that post based on if it is selected. This example is showing a list of insurance companies and which states they cover.


Select a company to see state coverage.
  • Colorado
  • Georgia
  • Ohio
  • Arizona
  • Idaho
  • Mississippi
  • Montana
  • Pennsylvania
  • Alaska
  • Florida
  • Kansas
<Set query=insurance_companies type=insurance_company />

<!-- L&L template for dropdown -->

<!-- Dynamic Dropdown Label -->
<div><label for="insurance" class="coverage-label">Insurance company</label></div>
<!-- Dynamic Dropdown for Insurance Company Name -->
<select name="insurance" id="insurance" aria-label="Select an insurance company to see which states they cover">
  <option value="" selected disabled>Select from this list</option>
  <Loop query=insurance_companies>
    <option value="{Field name}"><Field title /></option>

<!-- L&L Template for content -->

<!-- Dynamic Content Label -->
  <label class="coverage-label" for="state-list">States covered</label>
<!-- None selected text -->
<div id="state-instructions">
  Select a company to see state coverage.
<!-- List of states (state taxonomy) for each insurance company -->
<div id="state-list">
  <Loop query=insurance_companies>
    <ul id="{Field name}-states" class="insurance-state">
      <Loop taxonomy=state post=current>
          <Field title />
  1. The content is pulled from a CPT called insurance_company. That CPT has a taxonomy called state. Using Loops & Logic, we will output a <select> containing the insurance companies.
  2. Next to that, we will output a list of divs, one for each insurance company with their corresponding covered States.
  3. Then with the JS, we will hide all those divs, leaving an instructional div showing when nothing is selected. When an insurance company is selected, we will find the matching div and display it.