I'm fairly new to bootstraps and I am currently trying to add an onclick event for a button, which would only open my main bootstrap panel.
Here's the part of the HTML code where my bootstrap panels are located;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="panel-groupMain">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Main panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<!-- Sub panels -->
<div class="panel-group" id="accordion">
<!-- Sub panel 1 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Sub panel 1</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentOne"></p>
</div>
</div>
</div>
<!-- Sub panel 2 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Sub panel 2</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<div class="day" data-name="Tuesday"></div>
<p id="contentTwo"></p>
</div>
</div>
</div>
<!-- Sub panel 3 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse4">Sub panel 3</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentThree"></p>
</div>
</div>
</div>
<!-- Sub panel 4 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse5">Sub panel 4</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse5" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentFour"></p>
</div>
</div>
</div>
<!-- Sub panel 5 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse6">Sub panel 5</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse6" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentFive"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
As for the glyphicons I've tried this code, but it only toggles the change when you open/close the same sub panel, so is there any easy way for the glyphicon to change when you open different sub panels?
$(document).ready(function () {
$('[data-toggle="collapse"]').click(function () {
$(this).find('span').toggleClass('glyphicon-chevron-
down').toggleClass('glyphicon-chevron-up');
});
});
Any help is appreciated.
Here you go with a solution https://jsfiddle.net/mc3z6ad3/2/
$('a[data-toggle="collapse"]').click(function(){
if( $(this).closest('div.panel-heading').next('div.collapse').hasClass('in')){
$(this).next('span').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
}else{
$('a[data-toggle="collapse"]').next('span').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
$(this).next('span').addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down');
}
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="panel-groupMain">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Main panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<!-- Sub panels -->
<div class="panel-group" id="accordion">
<!-- Sub panel 1 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Sub panel 1</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentOne"></p>
</div>
</div>
</div>
<!-- Sub panel 2 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Sub panel 2</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<div class="day" data-name="Tuesday"></div>
<p id="contentTwo"></p>
</div>
</div>
</div>
<!-- Sub panel 3 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse4">Sub panel 3</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentThree"></p>
</div>
</div>
</div>
<!-- Sub panel 4 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse5">Sub panel 4</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse5" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentFour"></p>
</div>
</div>
</div>
<!-- Sub panel 5 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse6">Sub panel 5</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse6" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentFive"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
$('a[data-toggle="collapse"]').click(function(){
if( $(this).closest('div.panel-heading').next('div.collapse').hasClass('in')){
$(this).next('span').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
}else{
$('a[data-toggle="collapse"]').next('span').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
$(this).next('span').addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down');
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="panel-groupMain">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Main panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<!-- Sub panels -->
<div class="panel-group" id="accordion">
<!-- Sub panel 1 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Sub panel 1</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentOne"></p>
</div>
</div>
</div>
<!-- Sub panel 2 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Sub panel 2</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<div class="day" data-name="Tuesday"></div>
<p id="contentTwo"></p>
</div>
</div>
</div>
<!-- Sub panel 3 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse4">Sub panel 3</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentThree"></p>
</div>
</div>
</div>
<!-- Sub panel 4 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse5">Sub panel 4</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse5" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentFour"></p>
</div>
</div>
</div>
<!-- Sub panel 5 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse6">Sub panel 5</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse6" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentFive"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The span wasn't inside the a so you need to navigate up to the parent and find from there. I added parent() to your line of code. I also added logic to reset other heading panels
Related
I am trying something to accomplish my requirement with collapsible panel
$(".sport").on("click", function() {
var thisId = $(this).attr("id");
var thisChildren = $(this) + ".sportlist";
$(thisChildren).each(function(index) {
});
});
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<div style="height:600px;padding:0px;margin:0px;">
<div class="col-md-3 scroll-container" style="padding:0px;">
<div class="panel-group" id="accordionMenu" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a class="sport collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapse1" aria-expanded="true">
<small><i class="more-less glyphicon glyphicon-chevron-right"></i></small> Cricket (2 items)
</a>
</h4>
</div>
<div class="panel-collapse collapse" id="collapse1" role="tabpanel" style="height: 0px;">
<div class="sportlist" data-value="1">
Sachin
</div>
<div class="sportlist" data-value="2">
Kohli
</div>
</div>
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a class="sport collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapse2" aria-expanded="true">
<small><i class="more-less glyphicon glyphicon-chevron-right"></i></small> Other (2 items)
</a>
</h4>
</div>
<div class="panel-collapse collapse" id="collapse2" role="tabpanel" style="height: 0px;">
<div class="sportlist" data-value="3">
Bob
</div>
<div class="sportlist" data-value="4">
Willson
</div>
</div>
</div>
</div>
</div>
</div>
What I need is when I click on Cricket I need to store the data-value to an array. I tried something but couldn't accomplish
$(".sport").on("click", function() {
var thisId = $(this).attr("id");
var thisChildren = $(this) + ".sportlist";
$(thisChildren).each(function(index) {
});
});
Use the hreffrom a along with $.map:
$(".sport").on("click", function() {
let id = $(this).attr("href")
, list = $.map($(id).find(".sportlist"), function(item){
return $(item).data("value")
})
console.log(list)
});
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<div style="height:600px;padding:0px;margin:0px;">
<div class="col-md-3 scroll-container" style="padding:0px;">
<div class="panel-group" id="accordionMenu" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a class="sport collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapse1" aria-expanded="true">
<small><i class="more-less glyphicon glyphicon-chevron-right"></i></small> Cricket (2 items)
</a>
</h4>
</div>
<div class="panel-collapse collapse" id="collapse1" role="tabpanel" style="height: 0px;">
<div class="sportlist" data-value="1">
Sachin
</div>
<div class="sportlist" data-value="2">
Kohli
</div>
</div>
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a class="sport collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapse2" aria-expanded="true">
<small><i class="more-less glyphicon glyphicon-chevron-right"></i></small> Other (2 items)
</a>
</h4>
</div>
<div class="panel-collapse collapse" id="collapse2" role="tabpanel" style="height: 0px;">
<div class="sportlist" data-value="3">
Bob
</div>
<div class="sportlist" data-value="4">
Willson
</div>
</div>
</div>
</div>
</div>
</div>
Here is another approach without using id
$(".sport").click(function () {
let ids = $.map($(this).closest(".panel-heading").next(".panel-collapse").find(".sportlist"), function (element) {
return $(element).data("value")
});
console.log(ids)
});
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<div style="height:600px;padding:0px;margin:0px;">
<div class="col-md-3 scroll-container" style="padding:0px;">
<div class="panel-group" id="accordionMenu" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a class="sport collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapse1" aria-expanded="true">
<small><i class="more-less glyphicon glyphicon-chevron-right"></i></small> Cricket (2 items)
</a>
</h4>
</div>
<div class="panel-collapse collapse" id="collapse1" role="tabpanel" style="height: 0px;">
<div class="sportlist" data-value="1">
Sachin
</div>
<div class="sportlist" data-value="2">
Kohli
</div>
</div>
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a class="sport collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapse2" aria-expanded="true">
<small><i class="more-less glyphicon glyphicon-chevron-right"></i></small> Other (2 items)
</a>
</h4>
</div>
<div class="panel-collapse collapse" id="collapse2" role="tabpanel" style="height: 0px;">
<div class="sportlist" data-value="3">
Bob
</div>
<div class="sportlist" data-value="4">
Willson
</div>
</div>
</div>
</div>
</div>
</div>
jQuery closes - For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
jQuery next - Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
jQuery find - Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
jQuery map - Pass each element in the current matched set through a
function, producing a new jQuery object containing the return values.
I have an accordion which uses Bootstrap Collapse. When I click on any panel, it opens it and closes other open panels. But when I try to open a panel using JavaScript, other open panels does not close automatically.
function openBreakfast() {
$('#add-breakfast-form').collapse('show');
}
function openLunch() {
$('#add-lunch-form').collapse('show');
}
function openDinner() {
$('#add-dinner-form').collapse('show');
}
function openSnacks() {
$('#add-snacks-form').collapse('show');
}
body {
padding: 20px;
}
.m-t-20 {
margin-top: 20px;
}
<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"/>
<div id="food-tracker-accordion" role="tablist" class="panel-group m-t-20">
<div class="panel panel-default">
<div role="tab" class="panel-heading">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-breakfast-form">Add Breakfast</a>
</h4>
</div>
<div id="add-breakfast-form" role="tabpanel" class="panel-collapse collapse">
<div class="panel-body">
Add Breakfast form
</div>
</div>
</div>
<div class="panel panel-default">
<div role="tab" class="panel-heading">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-lunch-form">Add Lunch</a>
</h4>
</div>
<div id="add-lunch-form" role="tabpanel" class="panel-collapse collapse">
<div class="panel-body">
Add Lunch form
</div>
</div>
</div>
<div class="panel panel-default">
<div role="tab" class="panel-heading">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-dinner-form">Add Dinner</a>
</h4>
</div>
<div id="add-dinner-form" role="tabpanel" class="panel-collapse collapse">
<div class="panel-body">
Add Dinner form
</div>
</div>
</div>
<div class="panel panel-default">
<div role="tab" class="panel-heading">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-snacks-form">Add Snacks</a>
</h4>
</div>
<div id="add-snacks-form" role="tabpanel" class="panel-collapse collapse">
<div class="panel-body">
Add Snacks form
</div>
</div>
</div>
</div>
<div class="m-t-20">
<button onclick="openBreakfast()">Open Breakfast</button>
<button onclick="openLunch()">Open Lunch</button>
<button onclick="openDinner()">Open Dinner</button>
<button onclick="openSnacks()">Open Snacks</button>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Another interesting thing is that if I click on any panel to close, opening that panel by JavaScript closes all other open panels.
All you need to do is hide the panel which is opened before and you can do it by using $('.panel-collapse.in').collapse('hide'); like this
function openBreakfast() {
$('.panel-collapse.in').collapse('hide');
$('#add-breakfast-form').collapse('show');
}
function openLunch() {
$('.panel-collapse.in').collapse('hide');
$('#add-lunch-form').collapse('show');
}
function openDinner() {
$('.panel-collapse.in').collapse('hide');
$('#add-dinner-form').collapse('show');
}
function openSnacks() {
$('.panel-collapse.in').collapse('hide');
$('#add-snacks-form').collapse('show');
}
body {
padding: 20px;
}
.m-t-20 {
margin-top: 20px;
}
<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"/>
<div id="food-tracker-accordion" role="tablist" class="panel-group m-t-20">
<div class="panel panel-default">
<div role="tab" class="panel-heading">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-breakfast-form">Add Breakfast</a>
</h4>
</div>
<div id="add-breakfast-form" role="tabpanel" class="panel-collapse collapse">
<div class="panel-body">
Add Breakfast form
</div>
</div>
</div>
<div class="panel panel-default">
<div role="tab" class="panel-heading">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-lunch-form">Add Lunch</a>
</h4>
</div>
<div id="add-lunch-form" role="tabpanel" class="panel-collapse collapse">
<div class="panel-body">
Add Lunch form
</div>
</div>
</div>
<div class="panel panel-default">
<div role="tab" class="panel-heading">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-dinner-form">Add Dinner</a>
</h4>
</div>
<div id="add-dinner-form" role="tabpanel" class="panel-collapse collapse">
<div class="panel-body">
Add Dinner form
</div>
</div>
</div>
<div class="panel panel-default">
<div role="tab" class="panel-heading">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-snacks-form">Add Snacks</a>
</h4>
</div>
<div id="add-snacks-form" role="tabpanel" class="panel-collapse collapse">
<div class="panel-body">
Add Snacks form
</div>
</div>
</div>
</div>
<div class="m-t-20">
<button onclick="openBreakfast()">Open Breakfast</button>
<button onclick="openLunch()">Open Lunch</button>
<button onclick="openDinner()">Open Dinner</button>
<button onclick="openSnacks()">Open Snacks</button>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I want to make a cookie, when somebody click on bootstrap accordion panel.
Thanks
You can simply set a cookie in Javascript with document.cookie = 'value';
Add the code to the click event on the accordion panel.
Note: iff that's the part you're stuck at, add your code :)
yes i found solution for that
<script>
$(".openpanel").on("click", function() {
$("#panel3").collapse('show');
$.cookie("test", 1);
});
$(".closepanel").on("click", function() {
$("#panel3").collapse('hide');
});
/* ensure any open panels are closed before showing selected */
$('#accordion').on('show.bs.collapse', function () {
$('#accordion .in').collapse('hide');
});
</script>
<button type="button" class="btn openpanel">Open panel 3</button>
<button type="button" class="btn closepanel">Close panel 3</button>
<hr>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1">Panel 1</a>
</h4>
</div>
<div id="panel1" class="panel-collapse collapse">
<div class="panel-body">
Contents panel 1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2">Panel 2</a>
</h4>
</div>
<div id="panel2" class="panel-collapse collapse">
<div class="panel-body">
Contents panel 2
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel3">Panel 3</a>
</h4>
</div>
<div id="panel3" class="panel-collapse collapse">
<div class="panel-body">
Contents panel 3
</div>
</div>
</div>
</div>
Thanks
On my page I have 4 different divs. Each of them has own jstree with data from external json files.
<div class="panel frame">
<div class="panel-heading" role="tab" id="headingCorporate">
<p class="panel-title" align="center">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseCorporate" aria-expanded="false" aria-controls="collapseCorporate">
Corporate Frame <span class="caret pull-right"></span>
</a>
</p>
</div>
<div id="collapseCorporate" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingCorporate">
<div class="panel-body">
<js-tree tree-data="json" tree-src="data-tree/corporate.json"
tree-plugins="contextmenu,dnd,types,wholerow,search,state"
tree-events="changed:callback;"></js-tree>
</div>
</div>
</div>
<div class="panel frame">
<div class="panel-heading" role="tab" id="headingClinical">
<p class="panel-title panel-primary" align="center">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseClinical" aria-expanded="false" aria-controls="collapseClinical">
Clinical Hierarchy Frame <span class="caret pull-right"></span>
</a>
</p>
</div>
<div id="collapseClinical" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingClinical">
<div class="panel-body">
<js-tree tree-data="json" tree-src="data-tree/clinical.json"
tree-plugins="contextmenu,dnd,types,wholerow,search,state"
tree-events="changed:callback;"></js-tree>
</div>
</div>
</div>
<div class="panel frame">
<div class="panel-heading" role="tab" id="headingStudy">
<p class="panel-title" align="center">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseStudy" aria-expanded="false" aria-controls="collapseStudy">
Study Frame <span class="caret pull-right"></span>
</a>
</p>
</div>
<div id="collapseStudy" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingStudy">
<div class="panel-body">
<js-tree tree-data="json" tree-src="data-tree/study.json"
tree-plugins="contextmenu,dnd,types,wholerow,search,state"
tree-events="changed:callback;"></js-tree>
</div>
</div>
</div>
<div class="panel frame">
<div class="panel-heading" role="tab" id="headingIndustry">
<p class="panel-title" align="center">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseIndustry" aria-expanded="false" aria-controls="collapseIndustry">
Industry Frame <span class="caret pull-right"></span>
</a>
</p>
</div>
<div id="collapseIndustry" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingIndustry">
<div class="panel-body">
<js-tree tree-data="json" tree-src="data-tree/industry.json"
tree-plugins="contextmenu,dnd,types,wholerow,search,state"
tree-events="changed:callback;"></js-tree>
</div>
</div>
</div>
I need to drag and drop this divs. The example of ngDraggable directive is pretty close what I want to do, but it's still require ng-repeat. So my question is there any way to make draggable and sortable list of 4 different divs without ng-repeat?
I want to be able to add the class accordion-minus on click, and at the same time clear all instances of the class on all elements except this. Currently it's working, but only if I toggle one by one, if I go from one to another it breaks.
This is my markup:
HTML
<div class="panel-group panel-group-pdp" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title product-accordion-title text-uppercase">
<a id="{{content.static.productDetailsToggleId}}" class="collapsed pdp-accord-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">{{content.static.productDetailsText}}<img class="accordion-plus" src="{{meta.assetsPath}}img/plus79.png" alt="accordion content">
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body panel-body-pdp">
<ul>
{{#each content.product.details}}
<li>{{text}}</li>
{{/each}}
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title product-accordion-title text-uppercase">
<a id="{{content.static.deliveryReturnsToggleId}}" class="collapsed pdp-accord-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">{{content.static.deliveryAndReturnsText}}<img class="accordion-plus" src="{{meta.assetsPath}}img/plus79.png" alt="accordion content">
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body panel-body-pdp">
<p>
{{content.static.standardDeliveryText}}
</p>
<p>
{{content.static.expressDeliveryText}}
</p>
<p>
{{content.static.freeReturnsText}}
</p>
<p>
{{content.static.moreDeliveryInfoText}}
</p>
</div>
</div>
</div>
</div>
JS
$(".pdp-accord-toggle").click(function() {
if($('.accordion-plus').hasClass('accordion-minus') === false) {
// $(this).find('.accordion-plus').not(this).removeClass('accordion-minus');
$(this).find('.accordion-plus').addClass('accordion-minus');
} else {
$(this).find('.accordion-plus').removeClass('accordion-minus');
}
});