How can I append html based on the selected filter using jQuery/AJAX?

Forums AJAXHow can I append html based on the selected filter using jQuery/AJAX?
Staff asked 2 years ago

Answers (1)

Add Answer
Het Patel Marked As Accepted
Staff answered 2 years ago

You can enter a filter on your page concerning the below example.

Please insert the below HTML code.

<ul id="color-filter">    
  <li data-filter="black">
    <span class="label">Black</span>
  </li>    
  <li data-filter="blue">
    <span class="label">Blue</span>
  </li>    
  <li data-filter="brown">
    <span class="label">Brown</span>
  </li>    
  <li data-filter="green">
    <span class="label">Green</span>
  </li>     
</ul>
<div class="filter-color-data">
  <div class="black"> Black is active </div>
  <div class="blue"> Blue is active </div>
  <div class="brown"> Brown is active </div>
  <div class="green"> Green is active </div>
</div>

 

Please insert the below jQuery code.

jQuery( '.filter-color-data > div' ).hide();
jQuery( document ).on( 'click', '#color-filter li', function() {
    var filter = jQuery( this ).data( 'filter' );
    jQuery( '.filter-color-data > div' ).hide();
    jQuery( '.' + filter ).show();
});

 

You will get the below output.

Subscribe

Select Categories