Felix Felix - 27 days ago 5
CSS Question

Change Bootstrap Tab animation and css

I have bootstrap tab in my html and it is working fine. But here I need to change the effect of bootstrap tab. Currently when user click on tab the tab is opened.



<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>



<body>

<div class="col-md-6 col-sm-6 col-xs-12" style="overflow:hidden"><img src="http://designpieces.com/wp-content/uploads/2012/12/background-image.jpg"> </div>


<div class="col-md-6 col-sm-6 col-xs-12">

<div class="panel-group" id="accordion">
<div class="panel panel-default panel1">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" id="tab1" data-parent="#accordion" href="#collapse1">Tab1 ></a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Tab2 ></a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Tab3 ></a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse4">Tab4 ></a>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
</div>

</div>



</body>
</html>





This is js fiddle https://jsfiddle.net/felixtm/nozp2pge/2/

I want to change the effect and style of bootstrap tab like the following images

This is first image enter image description here .

When user click on tab1 ( second image) enter image description here

What i need is tab with right side arrow is needed like first image . When we click on tab then the entire tab view is replaced by the corresponding tab content with anyone of the animation with back button (like second image). when user click on back button the entire tab(first image ) need to show again.

for this i write the code but that is not completed and not perfect

<script>
$("#tab1").on("click",function(){

$(".panel").hide();
$(".panel1").show();
});

</script>


Please help to resolve this .

Answer

All of this can be done using CSS pseudo-elements.

selector:pseudo-element {
  property: value;
}

You should always try to use CSS before JavaScript or jQuery if CSS will do the job. Just add a class to the collapsed headings and style accordingly.

Notice how I added a collapsed class to the section headers that have panels that are collapsed by default.

<a data-toggle="collapse" data-parent="#accordion" href="#collapse2" class="collapsed">Tab2</a>

Then styled the headings using just CSS

.panel-title a {
  display: block;
  text-align: center;
}
.panel-title a:active,
.panel-title a:focus,
.panel-title a:hover {
  text-decoration: none;
}
.panel-title a:before {
  content: "<";
  position: absolute;
  left: 30px;
}
.panel-title a.collapsed {
  text-align: left;
}
.panel-title a.collapsed:before {
  content: "";
}
.panel-title a.collapsed:after {
  content: ">";
  position: absolute; 
  right: 30px;
}

Here's your updated fiddle with what I'm talking about https://jsfiddle.net/yongchuc/nozp2pge/4/.

EDITED

Ah, ok. I understand now. To accomplish this, you will need jQuery and will want to check which heading is being clicked and hide that panel's siblings.

$(function () {
  $('.panel-title a').on('click', function () {
    $(this).closest('.panel').siblings().toggle();
  });
});

.toggle() is used so that it shows the other panels when the heading is clicked again.

I've also added the collapsed class to the first heading so that that panel is hidden, like in your first picture above. Here's the updated fiddle with these changes for you to review. https://jsfiddle.net/yongchuc/nozp2pge/5/