view.html

<div class="container">
	<div class="row">
		<div class="col s12 m8">
			<ul class="collapsible" data-collapsible="expandable">
		    <li>
		      <div class="collapsible-header">CATEGORY NAME</div>
		      <div class="collapsible-body">
						<div class="row">
							<div class="col s12">
								<ul class="tabs tabs--categories">
									<li class="tab col s4"><a class="active" href="#CATEGORY-NAME-nutrients">Nutrients</a></li>
									<li class="tab col s4"><a href="#CATEGORY-NAME-yellow">Yellow</a></li>
									<li class="tab col s4"><a href="#CATEGORY-NAME-green">Green</a></li>
								</ul>
							</div>
							<div id="CATEGORY-NAME-nutrients" class="col s12 category-tab">
								<div class="row">
									<div class="col s12">
										<h4>Nutrients</h4>
										<div class="category-nutrient-chips"></div>
									</div>
								</div>
							</div>
							<div id="CATEGORY-NAME-yellow" class="col s12 category-tab">
								<div class="row sugar">
									<div class="col s4"><p>Sugar</p></div>
									<div class="col s4 input-field">
										<select>
											<option value="lt">&lt;</option>
											<option value="ltoe">&lt;=</option>
											<option value="gt">&gt;</option>
											<option value="gtoe">&gt;=</option>
										</select>
										<label>Operation</label>
									</div>
									<div class="col s4">
										<label for="sugar_value">Value (g)</label>
										<input type="number" id="sugar_value">
									</div>
								</div>
								<div class="row sodium">
									<div class="col s4"><p>Sodium</p></div>
									<div class="col s4 input-field">
										<select>
											<option value="lt">&lt;</option>
											<option value="ltoe">&lt;=</option>
											<option value="gt">&gt;</option>
											<option value="gtoe">&gt;=</option>
										</select>
										<label>Operation</label>
									</div>
									<div class="col s4">
										<label for="sodium_value">Value (g)</label>
										<input type="number" id="sodium_value">
									</div>
								</div>
								<div class="row saturated-fat">
									<div class="col s4"><p>Saturated Fat</p></div>
									<div class="col s4 input-field">
										<select>
											<option value="lt">&lt;</option>
											<option value="ltoe">&lt;=</option>
											<option value="gt">&gt;</option>
											<option value="gtoe">&gt;=</option>
										</select>
										<label>Operation</label>
									</div>
									<div class="col s4">
										<label for="satfat_value">Value (g)</label>
										<input type="number" id="satfat_value">
									</div>
								</div>
							</div>
							<div id="CATEGORY-NAME-green" class="col s12 category-tab">
								<div class="row sugar">
									<div class="col s4"><p>Sugar</p></div>
									<div class="col s4 input-field">
										<select>
											<option value="lt">&lt;</option>
											<option value="ltoe">&lt;=</option>
											<option value="gt">&gt;</option>
											<option value="gtoe">&gt;=</option>
										</select>
										<label>Operation</label>
									</div>
									<div class="col s4">
										<label for="sugar_value">Value (g)</label>
										<input type="number" id="sugar_value">
									</div>
								</div>
								<div class="row sodium">
									<div class="col s4"><p>Sodium</p></div>
									<div class="col s4 input-field">
										<select>
											<option value="lt">&lt;</option>
											<option value="ltoe">&lt;=</option>
											<option value="gt">&gt;</option>
											<option value="gtoe">&gt;=</option>
										</select>
										<label>Operation</label>
									</div>
									<div class="col s4">
										<label for="sodium_value">Value (g)</label>
										<input type="number" id="sodium_value">
									</div>
								</div>
								<div class="row saturated-fat">
									<div class="col s4"><p>Saturated Fat</p></div>
									<div class="col s4 input-field">
										<select>
											<option value="lt">&lt;</option>
											<option value="ltoe">&lt;=</option>
											<option value="gt">&gt;</option>
											<option value="gtoe">&gt;=</option>
										</select>
										<label>Operation</label>
									</div>
									<div class="col s4">
										<label for="satfat_value">Value (g)</label>
										<input type="number" id="satfat_value">
									</div>
								</div>
							</div>
		      	</div>
		      </div>
		    </li>
		  </ul>
		  <p>I'd put more, but then I'd have to change lots of ID's... you get the idea #lazydev</p>
		</div>
		<div class="col s12 m4">
			<div class="card grey darken-3">
				<div class="card-content white-text">
					<span class="card-title">Filter</span>
					<div class="row">
						<div class="col s12">
							<div class="row">
				        <div class="input-field col s12 ">
				          <input id="by-nutrient" type="text">
				          <label for="by-nutrient">By Nutrient</label>
				        </div>
				      </div>
				      <div class="row">
				        <div class="input-field col s12 ">
				          <input id="by-name" type="text">
				          <label for="by-name">By Name</label>
				        </div>
				      </div>

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

<script>
$(document).ready(function(){
  $('.collapsible').collapsible();
  $('.tabs--categories').tabs();
  $('.tab').on('click', function(e) {
  	$('.category-tab').css('display', 'none');
  	$($(this).find('a').attr('href')).css('display', 'block');
  });
  $('select').material_select();

   $('.category-nutrient-chips').material_chip({
    data: [{
      tag: 'Sugar',
    }, {
      tag: 'Sodium',
    }, {
      tag: 'Saturated Fat',
    }],
  });
});
</script>