手动调用 collapse 在特定时间不会触发
Calling collapse manually doesn't trigger at certain times
点击我同意，当前面板折叠，下一个面板打开。
但是假设您单击菜单项 3，然后单击菜单项 4，然后返回菜单项 3 并单击 我同意，菜单项 3 照常折叠，但菜单项 4 不显示在应该的时候起来。
知道为什么这是错误的吗？
document.addEventListener('DOMContentLoaded', (event) =>
{
$('#agreements-1,#agreements-2,#agreements-3,#agreements-4,#agreements-5,#agreements-6').on("change", function(e)
{
let currentIndex = parseInt(e.target.id.slice(-1));
console.log("currentIndex = " + currentIndex);
$("#collapse-" + currentIndex).collapse('hide');
$("#collapse-" + (currentIndex + 1)).collapse('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="false">
<div class="panel panel-default" id="panel-1">
<div class="panel-heading" role="tab" id="heading-1">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-1">
Menu Item 1
</a>
</h4>
</div>
<div id="collapse-1" class="panel-collapse collapse in" role="tabpanel">
<div class="panel-body">
<div>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="radio">
<label>
<input type="radio" name="agreements-1" id="agreements-1" />
I Agree
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-default" id="panel-2">
<div class="panel-heading" role="tab" id="heading-2">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-2">
Menu Item 2
</a>
</h4>
</div>
<div id="collapse-2" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<div>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="radio text-left">
<label>
<input type="radio" name="agreements-2" id="agreements-2" />
I Agree
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-default" id="panel-3">
<div class="panel-heading" role="tab" id="heading-3">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-3">
Menu Item 3
</a>
</h4>
</div>
<div id="collapse-3" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<div>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="radio text-left">
<label>
<input type="radio" name="agreements-3" id="agreements-3" />
I Agree
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-default" id="panel-4">
<div class="panel-heading" role="tab" id="heading-4">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-4">
Menu Item 4
</a>
</h4>
</div>
<div id="collapse-4" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<div>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="radio text-left">
<label>
<input type="radio" name="agreements-4" id="agreements-4" />
I Agree
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-default" id="panel-5">
<div class="panel-heading" role="tab" id="heading-5">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-5">
Menu Item 5
</a>
</h4>
</div>
<div id="collapse-5" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<div>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="radio text-left">
<label>
<input type="radio" name="agreements-5" id="agreements-5" />
I Agree
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-default" id="panel-6">
<div class="panel-heading" role="tab" id="heading-6">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-6">
Menu Item 6
</a>
</h4>
</div>
<div id="collapse-6" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<div>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="radio text-left">
<label>
<input type="radio" name="agreements-6" id="agreements-6" />
I Agree
</label>
</div>
</div>
</div>
</div>
</div>
我很难描述，但这与一次只打开一个面板的 built-in 行为（正在使用）与脚本中语句的近乎即时执行相冲突，而一个或另一个被动画化为折叠或未折叠状态。
可能在动画完成时设置面板内部“折叠”或“未折叠”的 属性。
（RESCINDED：“因此，此解决方案使用回调来执行您的 javascript 以获得所需的行为。”）
而不是回调，让插件通过 jquery 向下一个面板发送点击事件来处理行为，就像用户所做的那样。
document.addEventListener('DOMContentLoaded', (event) =>
{
$('#agreements-1,#agreements-2,#agreements-3,#agreements-4,#agreements-5,#agreements-6').on("change", function(e)
{
let currentIndex = parseInt(e.target.id.slice(-1));
console.log("currentIndex = " + currentIndex);
// EDIT CHANGES FOLLOWS:
$("#panel-" + (currentIndex + 1)).find("a").click();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="false">
<div class="panel panel-default" id="panel-1">
<div class="panel-heading" role="tab" id="heading-1">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-1">
Menu Item 1
</a>
</h4>
</div>
<div id="collapse-1" class="panel-collapse collapse in" role="tabpanel">
<div class="panel-body">
<div>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="radio">
<label>
<input type="radio" name="agreements-1" id="agreements-1" />
I Agree
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-default" id="panel-2">
<div class="panel-heading" role="tab" id="heading-2">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-2">
Menu Item 2
</a>
</h4>
</div>
<div id="collapse-2" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<div>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="radio text-left">
<label>
<input type="radio" name="agreements-2" id="agreements-2" />
I Agree
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-default" id="panel-3">
<div class="panel-heading" role="tab" id="heading-3">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-3">
Menu Item 3
</a>
</h4>
</div>
<div id="collapse-3" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<div>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="radio text-left">
<label>
<input type="radio" name="agreements-3" id="agreements-3" />
I Agree
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-default" id="panel-4">
<div class="panel-heading" role="tab" id="heading-4">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-4">
Menu Item 4
</a>
</h4>
</div>
<div id="collapse-4" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<div>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="radio text-left">
<label>
<input type="radio" name="agreements-4" id="agreements-4" />
I Agree
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-default" id="panel-5">
<div class="panel-heading" role="tab" id="heading-5">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-5">
Menu Item 5
</a>
</h4>
</div>
<div id="collapse-5" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<div>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="radio text-left">
<label>
<input type="radio" name="agreements-5" id="agreements-5" />
I Agree
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-default" id="panel-6">
<div class="panel-heading" role="tab" id="heading-6">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-6">
Menu Item 6
</a>
</h4>
</div>
<div id="collapse-6" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<div>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="radio text-left">
<label>
<input type="radio" name="agreements-6" id="agreements-6" />
I Agree
</label>
</div>
</div>
</div>
</div>
</div>
点击我同意，当前面板折叠，下一个面板打开。
但是假设您单击菜单项 3，然后单击菜单项 4，然后返回菜单项 3 并单击 我同意，菜单项 3 照常折叠，但菜单项 4 不显示在应该的时候起来。
知道为什么这是错误的吗？
document.addEventListener('DOMContentLoaded', (event) =>
{
$('#agreements-1,#agreements-2,#agreements-3,#agreements-4,#agreements-5,#agreements-6').on("change", function(e)
{
let currentIndex = parseInt(e.target.id.slice(-1));
console.log("currentIndex = " + currentIndex);
$("#collapse-" + currentIndex).collapse('hide');
$("#collapse-" + (currentIndex + 1)).collapse('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="false">
<div class="panel panel-default" id="panel-1">
<div class="panel-heading" role="tab" id="heading-1">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-1">
Menu Item 1
</a>
</h4>
</div>
<div id="collapse-1" class="panel-collapse collapse in" role="tabpanel">
<div class="panel-body">
<div>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="radio">
<label>
<input type="radio" name="agreements-1" id="agreements-1" />
I Agree
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-default" id="panel-2">
<div class="panel-heading" role="tab" id="heading-2">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-2">
Menu Item 2
</a>
</h4>
</div>
<div id="collapse-2" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<div>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="radio text-left">
<label>
<input type="radio" name="agreements-2" id="agreements-2" />
I Agree
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-default" id="panel-3">
<div class="panel-heading" role="tab" id="heading-3">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-3">
Menu Item 3
</a>
</h4>
</div>
<div id="collapse-3" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<div>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="radio text-left">
<label>
<input type="radio" name="agreements-3" id="agreements-3" />
I Agree
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-default" id="panel-4">
<div class="panel-heading" role="tab" id="heading-4">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-4">
Menu Item 4
</a>
</h4>
</div>
<div id="collapse-4" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<div>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="radio text-left">
<label>
<input type="radio" name="agreements-4" id="agreements-4" />
I Agree
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-default" id="panel-5">
<div class="panel-heading" role="tab" id="heading-5">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-5">
Menu Item 5
</a>
</h4>
</div>
<div id="collapse-5" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<div>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="radio text-left">
<label>
<input type="radio" name="agreements-5" id="agreements-5" />
I Agree
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-default" id="panel-6">
<div class="panel-heading" role="tab" id="heading-6">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-6">
Menu Item 6
</a>
</h4>
</div>
<div id="collapse-6" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<div>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="radio text-left">
<label>
<input type="radio" name="agreements-6" id="agreements-6" />
I Agree
</label>
</div>
</div>
</div>
</div>
</div>
我很难描述，但这与一次只打开一个面板的 built-in 行为（正在使用）与脚本中语句的近乎即时执行相冲突，而一个或另一个被动画化为折叠或未折叠状态。
可能在动画完成时设置面板内部“折叠”或“未折叠”的 属性。
（RESCINDED：“因此，此解决方案使用回调来执行您的 javascript 以获得所需的行为。”）
而不是回调，让插件通过 jquery 向下一个面板发送点击事件来处理行为，就像用户所做的那样。
document.addEventListener('DOMContentLoaded', (event) =>
{
$('#agreements-1,#agreements-2,#agreements-3,#agreements-4,#agreements-5,#agreements-6').on("change", function(e)
{
let currentIndex = parseInt(e.target.id.slice(-1));
console.log("currentIndex = " + currentIndex);
// EDIT CHANGES FOLLOWS:
$("#panel-" + (currentIndex + 1)).find("a").click();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="false">
<div class="panel panel-default" id="panel-1">
<div class="panel-heading" role="tab" id="heading-1">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-1">
Menu Item 1
</a>
</h4>
</div>
<div id="collapse-1" class="panel-collapse collapse in" role="tabpanel">
<div class="panel-body">
<div>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="radio">
<label>
<input type="radio" name="agreements-1" id="agreements-1" />
I Agree
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-default" id="panel-2">
<div class="panel-heading" role="tab" id="heading-2">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-2">
Menu Item 2
</a>
</h4>
</div>
<div id="collapse-2" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<div>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="radio text-left">
<label>
<input type="radio" name="agreements-2" id="agreements-2" />
I Agree
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-default" id="panel-3">
<div class="panel-heading" role="tab" id="heading-3">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-3">
Menu Item 3
</a>
</h4>
</div>
<div id="collapse-3" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<div>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="radio text-left">
<label>
<input type="radio" name="agreements-3" id="agreements-3" />
I Agree
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-default" id="panel-4">
<div class="panel-heading" role="tab" id="heading-4">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-4">
Menu Item 4
</a>
</h4>
</div>
<div id="collapse-4" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<div>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="radio text-left">
<label>
<input type="radio" name="agreements-4" id="agreements-4" />
I Agree
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-default" id="panel-5">
<div class="panel-heading" role="tab" id="heading-5">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-5">
Menu Item 5
</a>
</h4>
</div>
<div id="collapse-5" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<div>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="radio text-left">
<label>
<input type="radio" name="agreements-5" id="agreements-5" />
I Agree
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-default" id="panel-6">
<div class="panel-heading" role="tab" id="heading-6">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-6">
Menu Item 6
</a>
</h4>
</div>
<div id="collapse-6" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<div>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="radio text-left">
<label>
<input type="radio" name="agreements-6" id="agreements-6" />
I Agree
</label>
</div>
</div>
</div>
</div>
</div>