HTML5 Boilerplate provides a class called no-js that gets replaced with a class called js, when JavaScript is detected by Modernizr on the html tag. Using this class name, you can craft the style for how the website should look when JavaScript is disabled.
In our Sun and Sand Festival website, when JavaScript is not enabled, clicking on the Day 2 link produces nothing.
You can view how the site works when JavaScript is disabled on various browsers, in the following ways:
- Firefox: Go to Preferences, click on Content, and then uncheck the EnableJavaScript checkbox.
- Chrome: Download the Chrome Web Developer extension and disable JavaScript from within the extension.
- Safari: Click the Disable JavaScript menu item on the Develop menu. You can see the Develop menu when you check the Show Develop toolbar on the Advanced tab in the Safari Preferences pane.
- Internet Explorer: Click the Internet Options in the Settings menu, and click Custom Level and check the Disable in the Active scripting menu.
- Opera: Click Quick Preferences and unselect the Enable JavaScript option.
Let us make sure that the tabs do not render when JavaScript is not available, and make sure the whole listing is displayed at the same time, as shown in the following screenshot:
We can do this by editing main.css to take advantage of the no-js class. First, we need to remove the tabbed navigation, as shown in the following code:
.no-js .t-tab__nav {
display: none;
}Then, we need to make the two lists be positioned statically instead of being absolutely positioned one below the other, as shown in the following code:
.no-js .t-tab__body {
position: static;
}We need to make sure the hidden class does not get applied in this specific instance for Day 2, so we can see all the artists at once, as shown in the following code:
.no-js .t-tab__body.hidden {
display: block !important;
visibility: visible;
}Now, when you enable JavaScript again, you will notice that the tabbed navigation appears and everything functions as you expected.