Responsive Tabs

Responsive Tabs is a plugin that helps switch between tabs on desktop and a select drop down on a mobile/tablet.

View Demo · Report Bug · Request Feature

Table of Contents

• About the Project
  • Key Features
  • Built With
• Getting Started
  • Installation
• Usage
  • API
• Roadmap
• Contributing
• License
• Contact
• Acknowledgements

About The Project

• Desktop view

• Mobile view

Tabs are user interface elements that allow you to navigate between multiple documents in a single window. Regular implementations don't support responsiveness and tabs don't look polished on a mobile device. This plugin helps you to resolve that.

Key Features

• The Responsive Tabs application implements tabs with mutually exclusive content. Only one tab is active at a given time and the content corresponding to the active tab is only visible. Eg: http://liquidslider.com/

• On mobile the tabs transform into a <select> drop down. The drop-down retains all the states from the desktop tabs and vice versa (e.g. The active tab becomes the selected option).

• The app has an object oriented architecture implementing encapsulation and all the global variables & functions are attributed to a single tabSwitcher object in generateTabs.js.

• The application developed here is fully responsive & the mobile view starts when the screen size is less than 769px.

Built With

The application has been developed using HTML, CSS, JavaScript and jQuery.

For more information about jQuery, please visit the official docs.

• JQuery

Getting Started

To run the application, just open index.html in your browser.

Installation

1. Clone the repo

git clone https://github.com/nashcheez/responsive-tabs.git

2. Open index.html

Usage

The code for the tabs plugin is implemented in tabSwitcher.js & tabSwitcher.css. To configure the tabs, please look into the demo Ihat is available in generateTabs.js & generateTabs.css. Entry point for the application is in index.html at the root.

API

A tabConfiguration option has been provided to configure the tabs. It includes the following API:

API	Description
tabName	defines all the tab names in an array
commonClass	state a common class that is to be applied to all tabs
tabID	unique ids of the tabs
tabClickRequestFunction	click callback function for all tabs
customID	main tab container that is defined in the HTML
defaultTab	defines the tab that needs to be default on page load

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the project
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

@nashcheez - nashcheez@gmail.com

Project Link: https://github.com/nashcheez/responsive-tabs

Acknowledgements

• Game Of Thrones Posters For Pop Culture Characters