JQuery loop through dynamic elements and get data-value - javascript

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.

Related

Bootstrap panel collapse onclick event and glyphicons

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

Multiple bootstrap accordion panels - only one open at a time

I'm trying to figure out why my bootstrap accordions won't collapse when another has been opened. I coded it two separate way based on other stackoverflow examples I've seen, as well as bootstrap's docs and I still can't figure out why it's not functioning properly. Bootstrap JS is 3.3.7
The idea is that despite whatever <a class="button collapsed"> is clicked, only that content is displayed, the rest should hide.
Example 1 uses separate panel groups
js fiddle DEMO
<div data-quickedit-entity-id="paragraph/84" class="panel-group" id="accordion-84" role="tablist" aria-multiselectable="true" data-quickedit-entity-instance-id="0">
<div class="panel panel-default consortia">
<div class="panel-heading" role="tab" id="heading-abc">
<div class="row panel-title">
<div class="col-sm-12 col-offset-130">
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-84" href="#abc-1" aria-expanded="false" aria-controls="abc-1">btn1
</a>
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-84" href="#abc-2" aria-expanded="false" aria-controls="abc-2">btn2
</a>
</div>
</div>
</div>
<div id="abc-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-abc" style="height: 1px;" aria-expanded="false">
<div class="panel-body">
test2
</div>
</div>
<div id="abc-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-abc" style="height: 1px;" aria-expanded="false">
<div class="panel-body">
test3
</div>
</div>
</div>
</div>
<div data-quickedit-entity-id="paragraph/87" class="panel-group" id="accordion-87" role="tablist" aria-multiselectable="true" data-quickedit-entity-instance-id="0">
<div class="panel panel-default consortia">
<div class="panel-heading" role="tab" id="heading-def">
<div class="row panel-title">
<div class="col-sm-12 col-offset-130">
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-87" href="#def-1" aria-expanded="false" aria-controls="def-1">btn1
</a>
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-87" href="#def-2" aria-expanded="false" aria-controls="def-2">btn2
</a>
</div>
</div>
</div>
<div id="def-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-def">
<div class="panel-body">
test
</div>
</div>
<div id="def-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-def">
<div class="panel-body">
test2
</div>
</div>
</div>
</div>
Example 2 uses the same panel-group
js fiddle DEMO
<div data-quickedit-entity-id="paragraph/90" class="panel-group" id="accordion-90" role="tablist" aria-multiselectable="true" data-quickedit-entity-instance-id="0">
<div class="panel panel-default consortia">
<div class="panel-heading" role="tab" id="heading-tes">
<div class="row panel-title">
<div class="col-sm-12 col-offset-130">
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-90" href="#tes-1" aria-expanded="false" aria-controls="tes-1">btn1
</a>
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-90" href="#tes-2" aria-expanded="false" aria-controls="tes-2">btn2
</a>
</div>
</div>
</div>
<div id="tes-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-tes" style="height: 1px;" aria-expanded="false">
<div class="panel-body">
<p>test1</p>
</div>
</div>
<div id="tes-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-tes" style="height: 1px;" aria-expanded="false">
<div class="panel-body">
<p>test2</p>
</div>
</div>
</div>
<div class="panel panel-default consortia">
<div class="panel-heading" role="tab" id="heading-test2">
<div class="row panel-title">
<div class="col-sm-12 col-offset-130">
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-90" href="#test2-1" aria-expanded="false" aria-controls="test2-1">btn1
</a>
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-90" href="#test2-2" aria-expanded="false" aria-controls="test2-2">btn2
</a>
</div>
</div>
</div>
<div id="test2-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-test2" aria-expanded="false">
<div class="panel-body">
<p>test21</p>
</div>
</div>
<div id="test2-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-test2" aria-expanded="false">
<div class="panel-body">
<p>test23</p>
</div>
</div>
</div>
</div>

The code below should work as you would expect.
I think the reason it wasn't working before is because you didn't have the id selector in the "data-parent" attribute.
<div data-quickedit-entity-id="paragraph/90" class="panel-group" id="accordion-90" role="tablist" aria-multiselectable="true" data-quickedit-entity-instance-id="0">
<div class="panel panel-default consortia">
<div class="panel-heading" role="tab" id="heading-tes">
<div class="row panel-title">
<div class="col-sm-12 col-offset-130">
<a class="button collapsed" data-toggle="collapse" data-parent="#accordion-90" href="#tes-1" aria-expanded="false" aria-controls="tes-1">btn1
</a>
<a class="button collapsed" data-toggle="collapse" data-parent="#accordion-90" href="#tes-2" aria-expanded="false" aria-controls="tes-2">btn2
</a>
</div>
</div>
</div>
<div id="tes-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-tes" style="height: 1px;" aria-expanded="false">
<div class="panel-body">
<p>test1</p>
</div>
</div>
<div id="tes-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-tes" style="height: 1px;" aria-expanded="false">
<div class="panel-body">
<p>test2</p>
</div>
</div>
</div>
<div class="panel panel-default consortia">
<div class="panel-heading" role="tab" id="heading-test2">
<div class="row panel-title">
<div class="col-sm-12 col-offset-130">
<a class="button collapsed" data-toggle="collapse" data-parent="#accordion-90" href="#test2-1" aria-expanded="false" aria-controls="test2-1">btn1
</a>
<a class="button collapsed" data-toggle="collapse" data-parent="#accordion-90" href="#test2-2" aria-expanded="false" aria-controls="test2-2">btn2
</a>
</div>
</div>
</div>
<div id="test2-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-test2" aria-expanded="false">
<div class="panel-body">
<p>test21</p>
</div>
</div>
<div id="test2-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-test2" aria-expanded="false">
<div class="panel-body">
<p>test23</p>
</div>
</div>
</div>
</div>

angular draggable and sortable divs without ng-repeat

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?

How to open specific collapsible panel inside bootstrap modal by clicking in link

I'm trying to make a login/registration modal, but i can not create links to appropriate panels in this modal.
buttons:
<div class="btn-group">
<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle activation-menu-cta" aria-expanded="false">Btn <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right-fix">
<li><a id="panelOne" type="btn" data-toggle="modal" href="#myModal">panel one</a></li>
<li><a id="panelTwo" type="btn" data-toggle="modal" href="#myModal">panel two</a></li>
</ul>
modal:
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
panel one
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">text 1</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
panel two
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">text 2</div>
</div>
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/gmoefesr/1/

This may help you.
$(document).ready(function () {
$('.collapse').collapse();
$('#panelOne').click(function () {
$('#collapseOne').collapse('show');
$('#collapseTwo').collapse('hide');
});
$('#panelTwo').click(function () {
$('#collapseTwo').collapse('show');
$('#collapseOne').collapse('hide');
});
});
http://jsbin.com/ropamajola/1/

Remove data-toggle="modal" attribute from both of your buttons, add open-modal class, and set .modal('show') method in the script section.
You should also remove type="btn" as it's not a proper attribute for anchors.
Use bootstrap modal X.bs.modal event to keep collapse animations visible when modal opens.
HTML:
<li><a class="open-modal" href="#collapseOne">panel one</a></li>
<li><a class="open-modal" href="#collapseTwo">panel two</a></li>
JS:
var panelTarget;
$('#myModal').on('shown.bs.modal', function(){
$(panelTarget).collapse('show');
});
$('.open-modal').click(function(){
panelTarget = $(this).attr('href');
$('.collapse.in').collapse('hide');
$('#myModal').modal('show');
});
JSFiddle demo

Adding a class and clearing all other instances of elements that are not siblings

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');
}
});

Categories

Resources