trying to animate the margin-left property of the panel-title on bootstraps accordion component. I've tried using .toggle() but it just does some weird bug. I've tried a few different methods but none seem to work. you can check it out here codepen
//Method Onee By Adding A Class
$('.panel-title').click(function() {
$(this).addClass('open-panel')
})
$('.panel-title').click(function() {
$(this).removeClass('open-panel')
})
//Method Two By Click but just animates open and closes right after another
$('.panel-title').click(function(){
$(this).animate({"margin-left": '+=20'});
}),
$('.panel-title').click(function(){
$(this).animate({"margin-left": '-=20'});
});
//Method Three the panels shrink among themselves cause of toggle()
$(".panel-title").toggle(
function () {
$(this).animate({"margin-left": "+50px"});
},
function () {
$(this).animate({"margin-left": "0px"});
});
Change your CSS
part as:
.panel-title {
margin-left: 0px;
transition: all 1s;
}
.open-panel {
margin-left: 30px;
}
Also your Method one
as:
//Method One
$('.panel-title').on('click', function() {
var $this = $(this);
$(".panel-title").not($this).removeClass('open-panel');
$this.toggleClass('open-panel')
});
Is that what you want?
Update I realized you updated your pen, so you need to comment out some other JS to my mentioned code works correctly, here is updated pen
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.