Link text toggle jquery (Collapsible Panels) - javascript

I have several Collapsible panels on one page triggered by a href links, and using php the first is set to active(open) when the user lands on the page.
Using jquery I'm trying to toggle the text in the links.
$(".btn[data-toggle='collapse']").click(function() {
$(this).text($(this).text() == 'Close' ? 'More' : 'Close');
});
But the first link which is open is working in reverse, so when the user clicks(to collapse the panel) it displays Close instead of More.
Any help would be greatly appreciated.
HTML:
<a class="btn" id="collapsible" data-toggle="collapse" data-parent="#accordion" href="#collapse535">Close</a>
<div id="collapse535" class="panel-collapse collapse in">
<!--Content-->
</div>
<a class="btn" id="collapsible" data-toggle="collapse" data-parent="#accordion" href="#collapse536">More</a>
<div id="collapse536" class="panel-collapse collapse ">
<!--Content-->
</div>
<a class="btn" id="collapsible" data-toggle="collapse" data-parent="#accordion" href="#collapse537">More</a>
<div id="collapse537" class="panel-collapse collapse ">
<!--Content-->
</div>

Toggle it on load:
$(function() {
$(".btn[data-toggle='collapse']:first").text("Close");
});

Related

Bootstrap collapsible breaks on combox select change

My collapsible div looks like this and it collapse/expand on clicking btnCollapse.
As soon as I change the selection in dropdown, the collapsible div stop expanding. What am I doing wrong ? Any hints please ?
<div class="panel-heading" style="padding-bottom:20px;">
<h4 class="panel-title">
<a data-toggle="collapse" id="btnCollapse" href="#collapse1" style="float:right;">Hide Filter</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="col-sm-6">
#Html.DropDownListFor(m=>m.SelectedCat,new SelectList(Model.Cat, "Id", "Name"),"Select ..",new { #class= "form-control" })
</div>
</div>

Dynamic Form Collapsible with individually collapse Jquery

I have the following HTML:
<div class="multi-field-wrapper">
<div class="multi-fields">
<div class="multi-field">
<a class="panel-heading collapsed" role="tab" id="headingOne"
data-toggle="collapse"
data-parent="#accordion"
href="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne">
<h4>Add Data</h4>
<i class="fa fa-chevron-circle-down"></i>
</a>
<div id="collapseOne"
class="panel-collapse collapse in"
role="tabpanel"
aria-labelledby="headingOne">
<div class="panel-body">
Content Here
</div>
</div>
</div>
</div>
<button type="button" class="add-field">Add field</button>
</div>
and the following JavaScript using jQuery:
$('.multi-field-wrapper').each(function () {
var $wrapper = $('.multi-fields', this);
$(".add-field", $(this)).click(function (e) {
$('.multi-field:first-child', wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
});
$('.multi-field .remove-field', $wrapper).click(function () {
if ($('.multi-field', $wrapper).length > 1) {
$(this).parent('.multi-field').remove();
}
});
});
The problem is, when collapsible is only one the href="#collapseOne will target tabpanel collapseOne, but when I've added one or more multi-fields the href="#collapseOne" will target all tabpanel's id because it has same name.
Is there any way to make the #href and tabpanel's id different each time we press the 'Add field' button or using this alternative script at this jsfiddle?

AngularJS and jquery to collapse / expand multiple bootstrap panels

I have multiple panels that can be opened and closed (expanded and collapsed), when you click on the panel header. I also have a button that can open and close all panels. It kind of works, but not 100%.
If you click on the header of one of the three panels, then the button to open and close all panels. Then two of the panels will open, and one will close. I would like it to close all panels or open all panels.
Also, sometimes the panel close, but the content of the panel is still visible.
Also, if you click on the header of the panel twice, opening and closing the panel, then the button to open and close all panels won't affect it anymore... Lots of bugs..
Made a fiddle to illustrate.
https://jsfiddle.net/fiddlejan/qz30pvjk/
HTML:
<body ng-app="app">
<div ng-controller="controller as c" style="padding:10px;">
<button class="btn" ng-click="add()" style="margin-bottom:5px;">
add panel
</button>
<button class="btn" ng-click="collapseAllPanels()" style="margin-bottom:5px;">
expand / collapse all panels
</button>
<!-- childeren -->
<div class="panel-group">
<div class="panel panel-info fadein fadeout " ng-repeat="p in panels">
<div class="panel-heading" data-toggle="collapse" data-target="#test_{{p}}" style="cursor:pointer">
<h4 class="panel-title">
open / close - {{p}}
<span class="glyphicon glyphicon-remove topright" ng-click="close(p, $event)"></span>
</h4>
</div>
<div id="test_{{p}}" class="panel-collapse collapse node-panel" aria-expanded="false">
<div class="panel-body">
hello {{p}}
</div>
</div>
</div>
</div>
</div>
</body>
The Jquery, triggered by AngularJS
$scope.collapseAllPanels = function() {
console.log("collapse / expand all panels");
$('.node-panel').slideToggle("medium", function() {
console.log("slide animation complete");
});
}
Try this
<div class="panel-group">
<div class="panel panel-info" ng-repeat="p in panels">
<div class="panel-heading" style="cursor:pointer" ng-click="openSinglePanel(this)">
<h4 class="panel-title">
open / close - {{p}}
<span class="glyphicon glyphicon-remove topright" ng-click="close(p, $event)"></span>
</h4>
</div>
<div id="test_{{p}}" class="panel-collapse collapse node-panel" aria-expanded="false">
<div class="panel-body">
hello {{p}}
</div>
</div>
</div>
</div>
$scope.openSinglePanel = function (panel) {
$(panel).slideToggle("medium", function() {
});
}
$scope.collapseAllPanels = function() {
$.each($('.node-panel'), function (key, panel){
$(panel).slideToggle("medium", function() {
//console.log("slide animation complete");
});
});
}

How can we handle multiple click events using one function in angularjs?

I am trying to handle multiple click events of bootstrap accordion tab in one function, but unable to handle that. I want the functionality Like that:-
(1) If user click on any accordion tab then the icon should be change to minus(-).
(2) If user click on any accordion tab then all other opened tab should be closed.
I am able to do this using different function for every tab. but I have to handle this using only one function as I have Multiple tabs.
here is my html code:-
<div ng-controller="TabController">
<div class="panel panel-default">
<div class="panel-heading">
<a class="accordion-toggle" ng-click="clickOnTab($event,'FirstTab')" data-toggle="collapse" data-parent="#accordion" href="javascript:void(0),#collapseOne">
<div class="mid-col">
<h5>First Tab</h5>
</div>
<div class="right-col">
<div ng-class="{false:'glyphicon glyphicon-plus',true:'glyphicon glyphicon-minus'}[tabicon == 'FirstTab']"></div>
</div>
</a>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
This is content of First Tab<br/>
1. When The Tab is open the Icon Should be Minus (-). It is working Fine When you are playing with only one tab. But when you try to open another tab while this tab is currently open then Iam getting issue.
<br/> 2. When you open tab all other (Opened) tab should be closed.
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a class="accordion-toggle" ng-click="clickOnTab($event,'SecondTab')" data-toggle="collapse" data-parent="#accordion" href="javascript:void(0),#collapseTwo">
<div class="mid-col">
<h5>Second Tab</h5>
</div>
<div class="right-col">
<div ng-class="{false:'glyphicon glyphicon-plus',true:'glyphicon glyphicon-minus'}[tabicon == 'SecondTab']"></div>
</div>
</a>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
This is content of Second Tab<br/>
1. When The Tab is open the Icon Should be Minus (-). It is working Fine When you are playing with only one tab. But when you try to open another tab while this tab is currently open then Iam getting issue.
<br/> 2. When you open tab all other (Opened) tab should be closed.
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a class="accordion-toggle" ng-click="clickOnTab($event,'ThirdTab')" data-toggle="collapse" data-parent="#accordion" href="javascript:void(0),#collapseThree">
<div class="mid-col">
<h5>First Tab</h5>
</div>
<div class="right-col">
<div ng-class="{false:'glyphicon glyphicon-plus',true:'glyphicon glyphicon-minus'}[tabicon == 'ThirdTab']"></div>
</div>
</a>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
This is content of Third Tab<br/>
1. When The Tab is open the Icon Should be Minus (-). It is working Fine When you are playing with only one tab. But when you try to open another tab while this tab is currently open then Iam getting issue.
<br/> 2. When you open tab all other (Opened) tab should be closed.
</div>
</div>
</div>
</div>
Here is the Controller:-
var myapp = angular.module('plunker', []);
myapp.controller("TabController",function($scope){
$scope.clickOnTab = function($event,val){
console.log($event);
//console.log($event.currentTarget);
$scope.tabrighticon = !$scope.tabrighticon;
console.log($scope.tabrighticon);
if($scope.tabrighticon)
$scope.tabicon = val;
else
$scope.tabicon = 1;
};
});
Here is the plnkr

Collapse nested accordion groups based on custom class

I'm using Twitter Bootstrap 2.3.2 with Asp.net MVC.
I have a set of nested accordions on a tab pane and other accordions on other tab panes.
The External accordions are in an accordion-group and the Internal accordions are in another group, nested inside each External accordion.
The colours are applied using CSS rules on custom classes.
.accordion-toggle.outcome {
background-color:#d9edf7;
}
.accordion-toggle.outcome.collapsed {
background-color:White;
}
.accordion-toggle.achievement {
background-color:#dff0d8;
}
.accordion-toggle.achievement.collapsed {
background-color:White;
}
I need to force the full collapse of the open accordions depending on which new accordion is selected. If an internal accordion is selected then I only want the other internal accordions to close. If an external accordion is selected I want the internal and external accordions to close.
Closing means assigning the 'collapsed' class to the accordion-toggle, which determines the highlight colour of the accordion-heading.
I have the following javascript which needs amending to select the different levels of accordion. The class of 'outcome' for External and 'achievement' for internal are currently the only difference between the two.
I've tried a variety of if/else combinations but none of them seem to work. I've included the javascript I use when changing tabs as this might change how I need to approach this.
<script type="text/javascript">
//need to collapse all when tab changes
$('a[data-toggle="tab"]').on('shown', function (e) {
$('.accordion').find('.accordion-toggle').addClass('collapsed');
$('.accordion').find('.accordion-body').removeClass('in');
$('.accordion').find('.accordion-body').height('0px');
}
);
//collapse accordion depending on class
// from https://github.com/twbs/bootstrap/issues/7213#issuecomment-18547519
$('.collapse').on('hide', function () {
//do something to select internal or external accordion here...
$('[href="#' + $(this).attr('id') + '"]').addClass('collapsed');
});
</script>
The HTML for the above accordion set is as follows:
<div class="accordion" id="interventions">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle outcome collapsed" data-toggle="collapse" data-parent="#interventions" href="#collapse12">
<label for="">Test Finance</label>
</a>
</div>
<div id="collapse12" class="accordion-body collapse">
<div class="accordion" id="intervention0">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle achievement" data-toggle="collapse" data-parent="#intervention0" href="#collapse012">
<label for="">Achievement Finance 3</label>
</a>
</div>
<div id="collapse012" class="accordion-body collapse">
<div class="accordion-inner">
<div class="accordion-group">Test group</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle achievement" data-toggle="collapse" data-parent="#intervention0" href="#collapse111">
<label for="">Achievement Finance 2</label>
</a>
</div>
<div id="collapse111" class="accordion-body collapse">
<div class="accordion-inner">
<div class="accordion-group">Test group</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle outcome collapsed" data-toggle="collapse" data-parent="#interventions" href="#collapse10">
<label for="">Huge Money</label>
</a>
</div>
<div id="collapse10" class="accordion-body collapse">
<div class="accordion" id="intervention1">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle achievement" data-toggle="collapse" data-parent="#intervention1" href="#collapse010">
<label for="">Achievement Finance 1</label>
</a>
</div>
<div id="collapse010" class="accordion-body collapse">
<div class="accordion-inner">
<div class="accordion-group">Test group</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I managed to sort this out using the following javascript. The custom classes are only used by the CSS to apply the correct colour to an accordion-toggle when it is open or collapsed.
The css is amended to:
.accordion-toggle.outcome {
background-color:#d9edf7;
}
.accordion-toggle.achievement {
background-color:#dff0d8;
}
.accordion-toggle.collapsed {
background-color:transparent;
}
Thanks to Ammu for helping with this related question.
Javascript
//function to collapse all accordions when changing tabs
function tabCollapse() {
$('.accordion').find('.accordion-toggle').addClass('collapsed');
$('.accordion').find('.accordion-body').removeClass('in');
$('.accordion').find('.accordion-body').height('0px');
}
//function to fully collapse accordion on same page
function pageCollapse(inner) {
$('#' + inner).find('.accordion-toggle').addClass('collapsed');
$('#' + inner).find('.accordion-body').removeClass('in');
$('#' + inner).find('.accordion-body').height('0px');
}
//collapse all when tab changes
$('a[data-toggle="tab"]').on('shown', function () {
tabCollapse();
});
//collapse inner accordion on same page
$('.accordion').on('hidden', function (e) {
var inner = e.target.id;
pageCollapse(inner);
});
//on hide remove colour
$('.accordion').on('hide', function (e) {
var selected = e.target.id;
$('#' + selected).siblings().find('.accordion-toggle').addClass('collapsed');
});

Categories