"Tabs and accordion collaboration"
Bootstrap 4.0.0 Snippet by juned_shaikh

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body>
<!-- main site wrapper -->
<div class="site_wrapper">
<!-- content sec -->
<div class="content_sec">
<!-- launch -->
<section class="tab_sec" id="tab-sec">
<div class="container-fluid tab_first">
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
<ul class="nav panel-tabs">
<li><a class="aa actives" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" onclick="ga('send', 'event', 'Button', 'Click', 'Program Overview', 1);">Program Overview</a></li>
<li><a class="collapsed bb" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" onclick="ga('send', 'event', 'Button', 'Click', 'Program Eligibility', 1);" >Program Eligibility</a></li>
<li><a class="collapsed cc" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree" onclick="ga('send', 'event', 'Button', 'Click', 'Why NMIMS', 1);" >Program Arrangement</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="tab_in_sec">
<h2><span></span><strong>Tabs and accordion collaboration using trigger click .</strong></h2>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
font-family: 'Calibri', 'TimesNewRomanPSMT';
font-size: 14px;
overflow-x: hidden !important;
line-height: 1;
margin: 0;
padding: 0;
background: #fff;
}
a {
color: #658ad0;
transition: all 0.5s ease;
}
a:hover {
color: #3e6cc4;
text-decoration: none;
}
a:active {
outline: none;
text-decoration: none;
}
a:focus {
outline: none;
text-decoration: none;
}
button:focus {
outline: none;
text-decoration: none;
}
img {
line-height: 0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
//use trigger click to call the parent class
$(document).ready(function (e) {
$(".tab_in_sec .panel-default>.panel-heading a").click(function () {
if ($(this).is('.active')) {
$(this).removeClass("active");
} else {
$(".tab_in_sec .panel-default>.panel-heading a.active").removeClass("active");
$(this).addClass("active");
}
});
$('.aa').on('click', function () {
$('#headingOne a').trigger('click');
});
$('.bb').on('click', function () {
$('#headingTwo a').trigger('click');
});
$('.cc').on('click', function () {
$('#headingThree a').trigger('click');
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: