Skip to content

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.

License

Notifications You must be signed in to change notification settings

imelgrat/tab-collapse

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 Twitter

License: GitHub license

Status: GitHub release GitHub issues GitHub forks GitHub stars

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

<link rel="stylesheet" href="../dist/css/tabcollapse-style.css" crossorigin="anonymous">
<script src="../dist/js/tabcollapse-script.js" crossorigin="anonymous"></script>

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.

<div class="col-lg-12 vertab-container">
	<div class="col-lg-3 col-md-3 col-sm-3 vertab-menu">
		<div class="list-group">
			<a href="#" class="list-group-item text-left"> This is Tab 1 </a>
			.......
		</div>
	</div>
	<div id="accordion" class="col-lg-9 col-md-9 col-sm-9 col-xs-12 vertab-accordion panel-group">
		<div class="vertab-content">
			<div class="panel-heading">
				<h4 class="panel-title" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1"> This is Heading 1 </h4>
			</div>
			<div id="collapse1" class="panel-collapse collapse">
				<div class="panel-body">
					Here goes the content
				</div>
			</div>
		</div>
		......... 
	</div>
</div>

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.

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

About

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.

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Languages