// executes the following functions after the document has beeen loaded $(document).ready(function() {
// -- TAG-FILTER -------- //if a button with the class 'tag' is clicked... $('.tag').on('click', function(e){ // ...don't redirect the browser e.preventDefault(); // ...save the id of the button in a variable (it contains the name of the tag) var selectedTag = this.id; // ...remove the class 'selected' (which highlights the buttons) from all buttons with the class 'tag' $('.tag').removeClass('selected'); // ...add the class 'selected' (which highlights the buttons) to the button that has been clicked on $(this).addClass('selected'); // ...if the clicked button is the 'show-all'-button, then show all posts (by removing the class 'hidden' from all posts) in the post list if ( $(this).hasClass('show-all') ) { $('.post').removeClass('hidden'); // ...if the clicked button is not the 'show-all'-button, then hide all posts (by adding the class 'hidden' to all posts) and then show (by removing the class 'hidden' again) the posts only, which have the id of the clicked button (which is the selected tag value) in there class list (and therefore belong to that tag) } else { $('.post').addClass('hidden'); $('.' + selectedTag).removeClass('hidden'); } }); // -- ACCORDION -------- // initializes the jQuery UI Accordion Functionality for every element with the id of 'accordion' $( function() { $( "#accordion" ).accordion({ heightStyle: "content" }); }); // -- TOGGLE BUTTON FOR THE MOBILE NAV -------- // if the toggle button is clicked... $('.menu-button').on('click', function() { // ...close the mobile nav if the html element has the class 'mobile-menu-open' (which means, that the mobile nav is open) if ( $('html').hasClass('mobile-menu-open') ) { $('.mobile-nav-content li').css('opacity', '0'); $('.mobile-nav-content').fadeOut(); $('.mobile-nav-content li').css('transform', 'translateX(-10px)'); // ...open the mobile nav if the html element doesn't have the class 'mobile-menu-open' (which means, that the mobile nav is closed) } else { // fades in the container $('.mobile-nav-content').fadeIn(); // fades in and slides in the nav links with a timeout that gets bigger with each link, so that they are displayed one after another $('.mobile-nav-content li').each(function(i) { setTimeout(function() { $('.mobile-nav-content li').eq(i).css('opacity', '1').css('transform', 'translateX(0)'); }, 100 * (i+1)); }); } // toggles the class 'mobile-menu-open' on the html element, which is used for case sensitive (nav open or closed) styling of child elements and for determining wether the mobile nav is visible or not $('html').toggleClass('mobile-menu-open'); }); // -- WINDOW RESIZE EVENTS -------- // when the window is resized while the mobile nav is open, the mobile nav gets closed. This is for preventing bugs when having the mobile menu opened and then crossing responsive breakpoints while resizing the window $(window).resize(function() { $('html').removeClass('mobile-menu-open'); $('.mobile-nav-content li').css('opacity', '0'); $('.mobile-nav-content').fadeOut(); $('.mobile-nav-content li').css('transform', 'translateX(-10px)'); });
});