Recently completed my bootstrap toggle hide/show feature and everything seems to be functioning correctly, except for the transition between the different contents. The borders appear jagged and not smooth when activating the toggle.
I suspect there may be something unusual with the script causing this issue. I'm unsure how to resolve it, so I'm hoping someone can assist me.
$('.testver a i').on('click', function(e) {
var currTarget = $(this).closest('a').data('target').substr(1);
$('#leftpanel').find('[id^="demo"]').not(currTarget).collapse('hide');
});#leftpanel {position: relative; }
#leftpanel h1 {font-size: 18px; font-family: 'Montserrat bold'; color:#b0a887; border-top: 1px solid #eee; font-style: normal;}
#leftpanel h2 {font-size: 18px; font-family: 'Montserrat bold'; color:#b0a887; font-style: normal;}
#leftpanel a {margin-left: 230px; position: relative; top: -40px; right: -100px;}
#demo1, #demo2, #demo3, #demo4 { color: #333; font-size: 14px; margin-top: -40px; margin-right: 5px; font-family: 'Myriad Pro 31655';}
.collapse {}
.testver { width: 370px;}
.testver hr {
}
.fa-angle-up {
display: none;
}
.testver i {
}
.testver .fa {
right:
}
.arrow[aria-expanded="true"] .fa-angle-up {
display: inline-block;
}
.arrow[aria-expanded="true"] .fa-angle-down {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="leftpanel">
<div class="testver">
<h1>Never seen before</h1>
<a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo1">
<i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i>
<i class="fa fa-angle-up"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i>
</a>
<div id="demo1" class="collapse in" aria-expanded="true">
text
</div>
<hr>
</div>
<div class="testver">
<h2>Art and technology</h2>
<a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo2">
<i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i>
<i class="fa fa-angle-up"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i>
</a>
<div id="demo2" class="collapse">
text
<hr>
</div>
<div class="testver">
<h2>Authenticity</h2>
<a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo3">
<i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i>
<i class="fa fa-angle-up"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i>
</a>
<div id="demo3" class="collapse">
text
</div>
<hr>
</div>
<div class="testver">
<h2>Level of detail</h2>
<a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo4">
<i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i>
<i class="fa fa-angle-up"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i>
</a>
<div id="demo4" class="collapse">
text
</div>
<hr>
</div>
</div>
</div>