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:
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.