Fork me on GitHub

jQuery jPList plugin is deprecated. Please check pure JavaScript (ES6) jPList Library alternative instead.

Filter Dropdown Control Usage

Filter Dropdown Control

Add jPList scripts to the HEAD:

    
<!-- jPList Core -->		
<link href="jplist.core.min.css" rel="stylesheet" type="text/css" />
<script src="jplist.core.min.js"></script>	

<!-- Filter DropDown Bundle -->			
<script src="jplist.filter-dropdown-bundle.min.js"></script>

<script>
$('document').ready(function(){
	$('#demo').jplist({				
		itemsBox: '.list' 
		,itemPath: '.list-item' 
		,panelPath: '.jplist-panel'	
	});
	
});
</script>
			
	

Add basic HTML structure to the BODY:

    
<!-- demo -->
<div id="demo">
	
	<!-- panel -->
	<div class="jplist-panel">	
	
		<!-- Filter DropDown Control -->
		<div 
		   class="jplist-drop-down" 
		   data-control-type="filter-drop-down" 
		   data-control-name="category-filter" 
		   data-control-action="filter">
		   <ul>
			  <li><span data-path="default">Filter by category</span></li>
			  <li><span data-path=".architecture">Architecture</span></li>
			  <li><span data-path=".christmas">Christmas</span></li>
			  <li><span data-path=".food">Food</span></li>
			  <li><span data-path=".nature">Nature</span></li>
			  <li><span data-path=".other">Other</span></li>
		   </ul>
		</div>
		
	</div>				 
	
	<!-- HTML data -->   
	<div class="list">
		
		<!-- item 1 -->
		<div class="list-item">	
			...
		</div>
		
		<!-- item 2 -->
		<div class="list-item">	
			...
		</div>
		
		...
		
	</div>
	
	<!-- no results found -->
	<div class="jplist-no-results">
		<p>No results found</p>
	</div>
					
</div>