Develop Reference

Access Div Based on Another in JQUERY

How do I access the <a ....>General</a> base on this div I'm getting below on "test"?
test
<div
role="tabpanel"
class="panel-collapse collapse"
id="collapseGeneral"
aria-labelledby="collapseGeneral"
style="height: auto"
>
<div class="panel-body">
...
</div>
</div>
GIVEN
<div class="panel panel-default">
<div role="tab" class="acc-heading" id="headingGeneral">
<a
data-toggle="collapse"
role="button"
aria-expanded="false"
data-parent="#accordion"
class=""
href="#collapseGeneral"
aria-controls="collapseGeneral"
>General</a
>
</div>
<div
role="tabpanel"
class="panel-collapse collapse"
id="collapseGeneral"
aria-labelledby="collapseGeneral"
style="height: auto"
>
<div class="panel-body">
...
</div>
</div>
</div>
code
console.log(jQuery(test).parent(), "parent");

Looks like you want to find the matching aria-controls element for your <div>
Try this
// Find the matching aria-control
const control = $(`a[aria-controls="${test.id}"]`);
// Add the "collapsed" class
control.addClass("collapsed");
You could also match it by href but it wasn't exactly clear what your selection criteria was
const control = $(`a[href="#${test.id}"]`);
Here's a runnable demo...
// You don't need to redefine `test`,
// this is just emulating the variable in your question
// to make my answer runnable.
// IGNORE THIS LINE
const test = document.querySelector("#collapseGeneral");
// Find the matching aria-control
const control = $(`a[aria-controls="${test.id}"]`);
// now do something with `control`...
control.addClass("collapsed");
.collapsed { color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<!-- minified HTML -->
<div class="panel panel-default"> <div role="tab" class="acc-heading" id="headingGeneral"> <a data-toggle="collapse" role="button" aria-expanded="false" data-parent="#accordion" class="" href="#collapseGeneral" aria-controls="collapseGeneral" >General</a > </div><div role="tabpanel" class="panel-collapse collapse" id="collapseGeneral" aria-labelledby="collapseGeneral" style="height: auto" > <div class="panel-body"> ... </div></div></div>

Bootstrap collapse panel keeping a div open after a submit

I have an accordion div (panel-collapse), at the end of the panel I have a submit button, initially, all the panel div are closed, I want to keep the state of the div the same after the submit reload.
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse2">Collapsible panel</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>

On a regular form submit the page gets reloaded and resets everything, but if you submit the form Asynchronously using ajax nothing will change on your page. Using php + jQuery, you could do something like this:
$(document).on("click","#submitButton",function(e) {
e.preventDefault();
var formData = $("#formID").serialize();
$.post("your_php_file.php",formData,function(response) {
console.log(response);
});
});

Only way to preserve setting without async requests is using cookies.
You can set them via Javascript:
(http://www.w3schools.com/js/js_cookies.asp)
Probably like assigning an array of active collapse panels
var active_panels=[0,1,2];
$.cookie('active_panels', JSON.stringify(active_panels))
Without jQuery see W3C specification

Bootstrap accordion not collapsing

I'm developing a bootstrap accordion for my website but it's not working in dreamweaver cc and when I publish it in my browser.
Looks like it works on JSFiddle. Here is a link: JSFiddle
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<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" class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#one1" aria-expanded="false" aria-controls="one1" >SHOP LIST</a>
</h4>
</div>
<div id="one1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne" >
<div class="panel-body">
<table width="903" border="0">
<tbody>
<tr style="font-size: 10px">
<td width="293" align="center" valign="top" style="font-size: 10px">
<p1>HOKKAIDO<br>GRAN SAC'S 苫小牧 0144-53-5355</p1><br><br>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
I've been looking for a solution for hours but still can't figure out what's wrong with my accordion.

Here is example please check where is your mistake and still you have doubt please give comment.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<div class="container">
<div class="row">
<article class="content col-sm-12 col-md-12">
<p>Some Text </p>
<br>
<div class="clearfix"></div>
<div class="filter-box accordions-filter">
<div class="panel-group filter-elements" id="accordion">
<div class="panel panel-default panel-bg web-design">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
<i class="fa fa-circle"></i> Text 1
</a>
</div>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<p>No worries. Just let us know your preferred time slot. We will call you 1 hour before to know your availability. It is possible to reschedule the call; your time is valuable to us.</p>
</div>
</div>
</div>
<div class="panel panel-default panel-bg web-design">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
<i class="fa fa-circle"></i> Text 2
</a>
</div>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<p>We are one call away to help you out. Your emergency is our priority.</p>
</div>
</div>
</div>
<div class="panel panel-default panel-bg web-design">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
<i class="fa fa-circle"></i>Text 3
</a>
</div>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<p>Yes. We are working through the week. Your weekends are our peak days as we value your time :)</p>
</div>
</div>
</div>
<div class="panel panel-default panel-bg web-design">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse4">
<i class="fa fa-circle"></i>Text 4
</a>
</div>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">
<p>Any small work of around 30 mins is included in this minimum charge. It also includes an inspection and visit to your place so that Zimmber Champ will understand your requirement and will offer best available solution to suit your budget requirement. These visiting charges will be waived off, if you avail of our services. But minimum charges will be applicable in case of no show.</p>
</div>
</div>
</div>
<div class="panel panel-default panel-bg web-design">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse5">
<i class="fa fa-circle"></i>Text 6
</a>
</div>
</div>
<div id="collapse5" class="panel-collapse collapse">
<div class="panel-body">
<p>You can mention your discount code when placing the order on the website or mobile app. As per the applicability & terms of the discount coupon, discount amount will be deducted from the total amount. Please note multiple discount coupons cannot be applied on the same order or with any other discounts offered to customers.</p>
</div>
</div>
</div>
<div class="panel panel-default panel-bg web-design">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse6">
<i class="fa fa-circle"></i> Text 7
</a>
</div>
</div>
<div id="collapse6" class="panel-collapse collapse">
<div class="panel-body">
<p>You can mention your discount code when placing the order on the website or mobile app. As per the applicability & terms of the discount coupon, discount amount will be deducted from the total amount. Please note multiple discount coupons cannot be applied on the same order or with any other discounts offered to customers.</p>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</div>

Bootstrap Accordion in Modal only works once

I have a problem with an accordion in a bootstrap modal dialog.
I made it to implement it in durandal (v2.1) by adding this code to the standard 'dialog.js':
dialog.addContext('bootstrap', {
addHost: function (dialogInstance) {
var body = $('body'),
host = $('<div class="modal fade"><div class="modal-dialog"><div class="modal-content"></div></div></div>');
host.appendTo(body);
dialogInstance.host = host.find('.modal-content').get(0);
dialogInstance.modalHost = host;
},
removeHost: function (dialogInstance) {
$(dialogInstance.modalHost).modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
},
compositionComplete: function (child, parent, context) {
var dialogInstance = dialog.getDialog(context.model),
$child = $(child);
$(dialogInstance.modalHost).modal({backdrop: 'static', keyboard: false, show: true});
//Setting a short timeout is need in IE8, otherwise we could do this straight away
setTimeout(function () {
$child.find('.autofocus').first().focus();
}, 1);
if ($child.hasClass('autoclose') || context.model.autoclose) {
$(dialogInstance.blockout).click(function () {
dialogInstance.close();
});
}
}
});
//rebind dialog.show to default to a new context
var oldShow = dialog.show;
dialog.show = function (obj, data, context) {
return oldShow.call(dialog, obj, data, context || 'bootstrap');
};
Looks nice and responsive, but the accordion works only once... the 2nd time it gets called nothing happens.
The Modal ist called by this function:
function clickAktion() {
var kunden = selectedCustomers();
var updates = availableItems.updates();
updates[0].text = '(Bitte auswählen)';
app.showDialog('viewModels/aktion', {kunden: kunden, updates: updates});
}
Any suggestions would be nice. I guess the mistake is anywhere in the dialog.js implementation. I tried a fiddle with pure jquery and bootstrap and there it worked...

The error was somewhere in die custom dialog implementation, didn't figure out where exactly. I switched to BootstrapModalDurandalJS and called it in my existing js function:
// some js function 'onClick'
app.showBootstrapDialog('viewModels/aktion', {customer: customer, updates: updates});
The corresponding view of the viewmodel, that i handed over, needs to look like this:
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
this is some header content
<!-- maybe some closing button etc. -->
</div>
<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 1 Heading
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Panel 1 Content
</div>
</div>
<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 2 Heading
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Panel 2 Content
</div>
</div>
</div>
</div>
</div>
</div>
</div>

bootstrap accordion icon change in click

I am using bootstrap accordion in my code. On click on every list I will display Data and Icon will change.
<i class="fa fa-plus-square"></i>
will change to
<i class="fa fa-minus-square"></i>
My code:-
<div class="priority-lists">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#waterMindDistrictMeteres">
<h2 class="panel-title accordion-toggle">
<i class="fa fa-minus-square"></i>
WaterMind District Meters
</h2>
</div>
<div id="waterMindDistrictMeteres" class="panel-collapse collapse">
<div class="panel-body">
<div class="row">
<div id="servicePointsGrid" watermind-priority-lists kendo-grid k-options="watermindDetailGridOptions" k-rebind="watermindDetailGridOptions"></div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#waterMindPressurePoints">
<h2 class="panel-title accordion-toggle">
<i class="fa fa-minus-square"></i>
WaterMind Pressure Points
</h2>
</div>
<div id="waterMindPressurePoints" class="panel-collapse collapse">
<div class="panel-body">
<div class="row">
<div id="servicePointsGrid" watermind-priority-lists kendo-grid k-options="watermindDetailGridOptions" k-rebind="watermindDetailGridOptions"></div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#waterMindServicePoints">
<h2 class="panel-title accordion-toggle">
<i class="fa fa-minus-square"></i>
WaterMind Service Points
</h2>
</div>
<div id="waterMindServicePoints" class="panel-collapse collapse in">
<div class="panel-body">
<div class="row">
<div id="servicePointsGrid" watermind-priority-lists kendo-grid k-options="watermindDetailGridOptions" k-rebind="watermindDetailGridOptions"></div>
</div>
</div>
</div>
</div>
</div>
</div>
I tried to use some code:
My jsFiddle code
I will see icon are not working properly. I am looking for solution in CSS or JavaScript or jQuery.

You have to add .collapsed to your panel-headings! The first time .collapsed is not on that element, but bootstrap updated it on a click.
It does work fine by me now.
Updated fiddle

Please check on this link
Js Fiddle
You must add a class "collapsed" next to "panel-heading". your problem will be solved

You should init your icons with : fa-plus-square, not fa-minus-square.