Fork me on GitHub

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

Button Text Filter Group Control Usage

Button Text Filter Group 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>	
<!-- Toogle Filters Bundle -->			
<link href="jplist.filter-toggle-bundle.min.css" rel="stylesheet" type="text/css" />
<script src="jplist.filter-toggle-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">						
		<!-- Button Text Filters Group Control -->
		<div class="jplist-group"
		   data-control-type="button-text-filter-group"
		   data-control-action="filter"
		   data-control-name="button-text-filter-group-1">
		   <ul>
			  <li>
				 <span
					data-path=".architecture"
					data-text="architecture"
					data-button="true">
					   <i class="fa fa-caret-right"></i>
					   Architecture
				 </span>
				 <span
					data-control-type="counter"
					data-control-action="counter"
					data-control-name="architecture-counter"
					data-format="({count})"
					data-path=".architecture"
					data-mode="filter"
					data-type="path"></span>
			  </li>
			  
			  <li>										
				 <span
					data-path=".christmas"
					data-text="christmas"
					data-button="true">
					   <i class="fa fa-caret-right"></i>
					   Christmas
				 </span>
				 <span
					data-control-type="counter"
					data-control-action="counter"
					data-control-name="christmas-counter"
					data-format="({count})"
					data-path=".christmas"
					data-mode="filter"
					data-type="path"></span>
			  </li>
		   </ul>
		</div>
		<div
		   class="jplist-group"
		   data-control-type="button-text-filter-group"
		   data-control-action="filter"
		   data-control-name="button-text-filter-group-2">
		   <ul>
			  <li>
				 <span
					data-path=".nature"
					data-text="nature"
					data-button="true">
					   <i class="fa fa-caret-right"></i>
					   Nature
				 </span>
				 <span
					data-control-type="counter"
					data-control-action="counter"
					data-control-name="nature-counter"
					data-format="({count})"
					data-path=".nature"
					data-mode="filter"
					data-type="path"></span>
			  </li>
			  
			  <li>
				 <span
					data-path=".lifestyle"
					data-text="lifestyle"
					data-button="true">
					   <i class="fa fa-caret-right"></i>
					   Lifestyle
				 </span>
				 <span
					data-control-type="counter"
					data-control-action="counter"
					data-control-name="lifestyle-counter"
					data-format="({count})"
					data-path=".lifestyle"
					data-mode="filter"
					data-type="path"></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>