Last active
May 9, 2018 09:50
-
-
Save ScarletPonytail/e66a0ab230f321b0c29627d361dc45dd to your computer and use it in GitHub Desktop.
jQuery - Use an appended dropdown to hide content using classes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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