https://github.com/imelgrat/tab-collapse
While Bootstrap's Collapse component (accordions) can be very useful and works well in mobile websites, tab-based navigation usually works better in desktop screens. This component provides a way to integrate both tabs and accordions using some extra CSS and Javascript.
https://github.com/imelgrat/tab-collapse
accordion bootstrap bootstrap-collapse bootstrap-collapse-component bootstrap-components collapse collapse-component css css3 javascript jquery js navigation tab-navigation tabs
Last synced: about 2 months ago
JSON representation
While Bootstrap's Collapse component (accordions) can be very useful and works well in mobile websites, tab-based navigation usually works better in desktop screens. This component provides a way to integrate both tabs and accordions using some extra CSS and Javascript.
- Host: GitHub
- URL: https://github.com/imelgrat/tab-collapse
- Owner: imelgrat
- License: mit
- Created: 2017-12-27T19:32:18.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-12-27T21:59:06.000Z (over 8 years ago)
- Last Synced: 2025-01-20T22:53:12.881Z (over 1 year ago)
- Topics: accordion, bootstrap, bootstrap-collapse, bootstrap-collapse-component, bootstrap-components, collapse, collapse-component, css, css3, javascript, jquery, js, navigation, tab-navigation, tabs
- Language: HTML
- Size: 8.79 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Tab/Collapse
While Bootstrap's Collapse component (accordions) can be very useful and works well in mobile websites, tab-based navigation usually works better in desktop screens. This component provides a way to integrate both tabs and accordions using some extra CSS and Javascript.
Developed by [Ivan Melgrati](https://imelgrat.me) [](https://twitter.com/imelgrat)
License: [](https://github.com/imelgrat/tab-collapse/blob/master/LICENSE)
Status: [](https://github.com/imelgrat/tab-collapse) [](https://github.com/imelgrat/tab-collapse/issues) [](https://github.com/imelgrat/tab-collapse/network) [](https://github.com/imelgrat/tab-collapse/stargazers)
Requirements
------------
* jQuery >= 3.0
* Bootstrap >= 3.3
Installation
------------
While most of the code required to make tabs and accordions work comes from Bootstrap, it is necessary to add some extra code to make the "component switch" between tabs and accordions view and navigation work.
After adding both jQuery and Bootstrap, it's necessary to add the component's CSS rules and JavaScript code
```html
```
Usage
------------
For the Tab/Collapse to work, it's necessary to create three blocks. The *vertab-container* div (the whole component's container, used as CSS and JS selector), the *vertab-menu* section (tab navigation links) and the *vertab-accordion* section (accordion and content sections).
For each content section, it's necessary to create a link inside the *list-group* block and a *vertab-content* block.
```html
This is Heading 1
Here goes the content
.........
```
Feedback
--------
Please open an issue to request a feature or submit a bug report. Or even if
you just want to provide some feedback, I'd love to hear. I'm also available on
Twitter as [@imelgrat](https://twitter.com/imelgrat).
Contributing
------------
1. Fork it.
2. Create your feature branch (`git checkout -b my-new-feature`).
3. Commit your changes (`git commit -am 'Added some feature'`).
4. Push to the branch (`git push origin my-new-feature`).
5. Create a new Pull Request.
Links
====
* Article/Tutorial: https://imelgrat.me/javascript/integrate-bootstrap-tabs-accordions/
* Live example: https://codepen.io/imelgrat/details/wpGgpN/