Recently, when starting out on new projects I\u2019ve been working to ensure that the code I write is more generic so that it is reusable throughout both the initial build of the project as well as in the future.<\/p>\n\n\n\n
It\u2019s easy, especially when writing JavaScript\/jQuery, to write code for a section that targets specific class or id selectors that then makes it more difficult to use this code elsewhere in your website.<\/p>\n\n\n\n
Previously I\u2019ve created a generic show\/hide function<\/a> for features such as drop-down menus. This time I wanted to tackle replacement content, such as that you might see in a tabbed section.<\/p>\n\n\n\n When rebuilding the homepage for a long-term client one of our goals was to improve the loading speed of the website, and reduce the overall page weight.<\/p>\n\n\n\n The page included third-party widgets used to display Instagram and Youtube playlists that could not be replaced or edited to make them less impactful to the speed of the website. Removing them also wasn\u2019t an option.<\/p>\n\n\n\n But we could look at delaying their inclusion on the page thus reducing their impact on a number of speed metrics.<\/p>\n\n\n\n To do this we would place the widgets within a tabbed section. Traditionally this may mean that the widgets are still present in the code and so some, if not all, assets would be loaded even though they\u2019re not in view. To ensure this isn\u2019t the case we would instead utilise AJAX loading to request the content only on user selection; ensuring the page is lightweight on initial load as the widget would not be anywhere in the code.<\/p>\n\n\n\n Here is our example code. When the relevant tab is clicked the jQuery makes the request tot he server and new content replaces the existing tabbed content.<\/p>\n\n\n\n \n See the Pen \n Replace Tabs<\/a> by Kean Richmond (@keanr<\/a>)\n on CodePen<\/a>.<\/span>\n<\/p>\nUse-case<\/h2>\n\n\n\n
Building a generic script to replace the tabbed content<\/h2>\n\n\n\n