Picadilly Paradise Picadilly Paradise - 12 days ago 4
CSS Question

jQuery accordion like tabs

I'm using Bootstrap and a jQuery accordion. I have to do tabs in a similar style, using the accordion. I mean, the clickable items should to be inline (like the tabs style), and not like a list (one below the other).

Is there any way to do this?

Answer

For your specific requirements, I think you need to use Syden's answer, with a tiny bit of customization.
Use bootstraps Collapse component.

<p>
 <a class="btn btn-primary btn1" aria-expanded="false" aria-controls="collapseExample">
Link with href
  </a>
  <button class="btn btn-primary btn2" type="button" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
 </button>
   </p>
  <div class="collapse" id="collapseExample1">
 <div class="card card-block">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
<div class="collapse" id="collapseExample2">
 <div class="card card-block">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>

then, with javascript, make a custom click function so that when you have one collapse open, it first hides all the others, then shows the one you clicked - so that you don't have to click twice.

$(".btn1").on("click", function(){
$(".collapse").collapse('hide')
$("#collapseExample1").collapse('show')
});
 $(".btn2").on("click", function(){
$(".collapse").collapse('hide')
$("#collapseExample2").collapse('show')
});

Note: you will need to add an on-click function for each of your buttons for this to work.

Comments