Louis Lazaris on impressivewebs write tutorial about how to create content switcher without javascript. Normally, with JavaScript disabled, this type of content switcher (or content slider) will just display one item, or else display all items, without allowing any “switching” functionality. After some poking around, he realized it’s not a very difficult thing to do. The switcher utilizes in-page anchors and overflow: hidden to keep the switchability intact.

The key part of the code is the <div> with the id “content-slider”. Normally, that element would not be necessary, as it seems to be doing nothing. In this case, however, it’s needed in order to hide the unselected content inside the list nested inside it. Also, each list item inside the content switcher is given a unique id, which is needed for the switching to work even without JavaScript.

Demo: http://www.impressivewebs.com/demo-files/content-switcher/content-switcher.html

Incoming search terms for the article:

• javascript content slider
• slider without javascript
• content slider without javascript
• html5 content switcher
• html5 no-javascript without javascript -video
• css content slider
• contentslider js
• html5 content slider
• switcher js
• content slider css without javascript