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:

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