Responsive CSS Tabs/Accordion

css-tabs-accordion

Tutorial: Coming Soon on : prashantsani.com/spider/

Code is stripped of any styling not meant for functionality. The main focus of CSS is to show functionality.

---

File: demo1 - Simple Demo.html Features:

1. Tabs for Wider screens and Accordion for Mobile
2. CSS Only (No JS)
3. No Absolute position of any link/content
4. Variable width of Links/buttons
5. No fixed heights, content can grow naturally
6. Support for variable number of tabs

Link: https://prashantsani.github.io/css-tabs-accordion/code/demo1%20-%20Simple%20Demo.html

---

File: demo2 - With CSS Animations.html Features: (Same as above: Adding in Animations)

https://prashantsani.github.io/css-tabs-accordion/code/demo2%20-%20%20With%20CSS%20Animations.html

---

File: demo3 - With JS .html (Requires Server: Since I will be requesting JSON files)

1. Requests JSON files on each click, so does not load additional content
2. URL Updates on Each Tab Click
3. History Management (using History API).
4. Default Back/Forward buttons work as per User Session History
5. Loading tab content using URL (on Page Load)

Link: https://prashantsani.github.io/css-tabs-accordion/code/demo3%20-%20Ajax%20and%20JavaScript.html