How can I append html based on the selected filter using jQuery/AJAX?
Answers (1)
Add AnswerYou 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.