Skip to content

Instantly share code, notes, and snippets.

@ScarletPonytail
Last active May 9, 2018 09:50
Show Gist options
  • Save ScarletPonytail/e66a0ab230f321b0c29627d361dc45dd to your computer and use it in GitHub Desktop.
Save ScarletPonytail/e66a0ab230f321b0c29627d361dc45dd to your computer and use it in GitHub Desktop.
jQuery - Use an appended dropdown to hide content using classes
// Loops through the tabs and if true, run function to create dropdown
$( '.tab-wrap > .panel' ).each(function( index, value ) {
if ( $( '.header-only', value ).length > 1 ) {
yearsfilter( value );
}
})
function yearsfilter( panel ) {
// Creates dropdown
$( panel ).prepend('<div class="contact-filter"><div class="sc-filtering"><select class="theyears filters-select"><option value="">Show All</option></select></div></div>');
// Loops through each section finding the title
$( '.header-only', panel ).each(function( index, value ) {
// Creates the option for the dropdowbn
$('.theyears', panel ).append( '<option value="' + $( value ).text().trim() + '">' + $( value ).text().trim() + '</option>');
// When option is selected, goes up through the divs to find the group class
$( '.fl-module-ctas-download-bar-columns', $( value ).closest( '.fl-col-group' ).next( '.fl-col-group' ) ).each(function( iindex, ivalue ) {
// Adds class to the group container with the year its title shows
$( ivalue ).addClass( 'filteritem_' + $( value ).text().trim() );
// Adds class to the title with the year it shows
$( value ).addClass( 'filteritem_' + $( value ).text().trim() );
});
});
};
// Hides not selected years
$('.theyears').change(function() {
// Variable for the select year
var selectedyear = $( this ).val();
// Show All option
if ( selectedyear == "" ) {
$( '.header-only' ).show();
$( '.fl-module-ctas-download-bar-columns' ).show();
} else {
// Hide group panel of years not selected
$( '.fl-module-ctas-download-bar-columns', $( this ).closest( '.panel' ) ).hide();
// Hide titles of years not selected
$( '.header-only', $( this ).closest( '.panel' ) ).hide();
// Show group panel of years not selected
$( '.fl-module-ctas-download-bar-columns.filteritem_' + selectedyear, $( this ).closest( '.panel' ) ).show();
// Show titles of years not selected
$( '.header-only.filteritem_' + selectedyear, $( this ).closest( '.panel' ) ).show();
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment