1// Hiding the panel content. If JS is inactive, content will be displayed 2 jQuery('.panel-content').hide(); 3 4 // Preparing the DOM 5 6 // -- Update the markup of accordion container 7 jQuery('.accordion').attr({ 8 role: 'tablist', 9 multiselectable: 'true' 10 }); 11 12 // -- Adding ID, aria-labelled-by, role and aria-labelledby attributes to panel content 13 jQuery('.panel-content').attr('id', function(IDcount) { 14 return 'panel-' + IDcount; 15 }); 16 jQuery('.panel-content').attr('aria-labelledby', function(IDcount) { 17 return 'control-panel-' + IDcount; 18 }); 19 jQuery('.panel-content').attr('aria-hidden', 'true'); 20 // ---- Only for accordion, add role tabpanel 21 jQuery('.accordion .panel-content').attr('role', 'tabpanel'); 22 23 // -- Wrapping panel title content with a <a href=""> 24 jQuery('.panel-title').each(function(i) { 25 26 // ---- Need to identify the target, easy it's the immediate brother 27 jQuerytarget = jQuery(this).next('.panel-content')[0].id; 28 29 // ---- Creating the link with aria and link it to the panel content 30 jQuerylink = jQuery('<a>', { 31 'href': '#' + jQuerytarget, 32 'aria-expanded': 'false', 33 'aria-controls': jQuerytarget, 34 'id': 'control-' + jQuerytarget 35 }); 36 37 // ---- Output the link 38 jQuery(this).wrapInner(jQuerylink); 39 40 }); 41 42 // Optional : include an icon. Better in JS because without JS it have non-sense. 43 jQuery('.panel-title a').append('<span class="icon">+</span>'); 44 45 // Now we can play with it 46 jQuery('.panel-title a').click(function() { 47 48 if (jQuery(this).attr('aria-expanded') == 'false') { //If aria expanded is false then it's not opened and we want it opened ! 49 50 // -- Only for accordion effect (2 options) : comment or uncomment the one you want 51 52 // ---- Option 1 : close only opened panel in the same accordion 53 // search through the current Accordion container for opened panel and close it, remove class and change aria expanded value 54 jQuery(this).parents('.accordion').find('[aria-expanded=true]').attr('aria-expanded', false).removeClass('active').parent().next('.panel-content').slideUp(200).attr('aria-hidden', 'true'); 55 56 // Option 2 : close all opened panels in all accordion container 57 //$('.accordion .panel-title > a').attr('aria-expanded', false).removeClass('active').parent().next('.panel-content').slideUp(200); 58 59 // Finally we open the panel, set class active for styling purpos on a and aria-expanded to "true" 60 jQuery(this).attr('aria-expanded', true).addClass('active').parent().next('.panel-content').slideDown(200).attr('aria-hidden', 'false'); 61 62 } else { // The current panel is opened and we want to close it 63 64 jQuery(this).attr('aria-expanded', false).removeClass('active').parent().next('.panel-content').slideUp(200).attr('aria-hidden', 'true');; 65 66 } 67 // No Boing Boing 68 return false; 69 });
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.