"Centering div elements on click using bootstrap accordion"
Bootstrap 3.3.0 Snippet by khurram.shafeeq

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/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container text-center">
<div class="row">
<div class="col-sm-12">
<div class="wrapper_bu" style="position:relative;">
<div class="image">
<a class="panel-heading accordion-toggle collapsed left" data-toggle="collapse"
data-parent="#accordion1,#accordion2,#accordion3" data-target="#collapseTwo">
<div id="bu1">
<img alt="" src="https://s6.postimg.org/ek5rpg6i9/karachi.png" class="img-responsive imgtransform">
<div class="title">karachi</div>
</div>
</a>
</div>
<div class="image">
<a class="panel-heading accordion-toggle collapsed left" data-toggle="collapse"
data-parent="#accordion1,#accordion2,#accordion3" data-target="#collapseOne">
<div id="bu2">
<img alt="" src="https://s6.postimg.org/kwgbljk6p/islamabad.png" class="img-responsive imgtransform">
<div class="title">islamabad</div>
</div>
</a>
</div>
<div class="image">
<a class="panel-heading accordion-toggle collapsed left " data-toggle="collapse" data-parent="#accordion1,#accordion2,#accordion3"
data-target="#collapseThree">
<div id="bu3">
<img alt="" src="https://s6.postimg.org/4wxo1zo4x/dubai.png" class="img-responsive imgtransform">
<div class="title">dubai</div>
</div>
</a>
</div>
</div>
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
a:hover
{
text-decoration:none;
}
#wrapper_bu {
position: absolute;
width: 100%;
left: -4%;
}
.txt_h1 {
font-size: 2em;
}
.holder_bu {
cursor: pointer;
}
.holder_bu_awayL1 {
position: absolute;
top: 0;
left: 0%;
width: 33.3%;
-webkit-transition: width 1s, height 1s, top 1s, left 1s;
-moz-transition: width 1s, height 1s, top 1s, left 1s;
-o-transition: width 1s, height 1s, top 1s, left 1s;
-ms-transition: width 1s, height 1s, top 1s, left 1s;
transition: width 1s, height 1s, top 1s, left 1s;
}
.holder_bu_awayL2 {
position: absolute;
top: 0;
left: 66%;
width: 33.3%;
-webkit-transition: width 1s, height 1s, top 1s, left 1s;
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
var Conclave = (function () {
var buArr = [], arlen;
return {
init: function () {
this.addCN(); this.clickReg();
},
addCN: function () {
var buarr = ["holder_bu_center", "holder_bu_awayL1", "holder_bu_awayL2", "holder_bu_awayR1", "holder_bu_awayR2"];
for (var i = 1; i <= buarr.length; ++i) {
$("#bu" + i).removeClass().addClass(buarr[i - 1] + " holder_bu");
}
},
clickReg: function () {
$(".holder_bu").each(function () {
buArr.push($(this).attr('class'))
});
arlen = buArr.length;
for (var i = 0; i < arlen; ++i) {
buArr[i] = buArr[i].replace(" holder_bu", "")
}
$(".holder_bu").click(function (buid) {
var me = this, id = this.id || buid, joId = $("#" + id), joCN = joId.attr("class").replace(" holder_bu", "");
var cpos = buArr.indexOf(joCN), mpos = buArr.indexOf("holder_bu_center");
if (cpos != mpos) {
tomove = cpos > mpos ? arlen - cpos + mpos : mpos - cpos;
while (tomove) {
var t = buArr.shift();
buArr.push(t);
for (var i = 1; i <= arlen; ++i) {
$("#bu" + i).removeClass().addClass(buArr[i - 1] + " holder_bu");
}
--tomove;
}
}
})
},
auto: function () {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

This is not working on localhost.

rajbpl () - 6 years ago - Reply 0