I have code for an Accordion element in my website. I had this working as I wished, I clicked on header and the selected panel opens. When I click on another header, the previous pane closes and the selected pane open. Basic Accordion functionality.
For some reason, without touching any of the code, this Accordion effect stopped working. Now, whenever I select a pane, it just opens. So if I select other panes, they will open as well but none will automatically close on opening another pane. So where did this go wrong, I can't seem to find the error.
Here's the code:
<div class="panel-group" id="accordion">
<div class="panel panel-default" ng-repeat="item in All | unique:'gebieden'">
<div class="panel-heading text-center" data-toggle="collapse" data-parent="#accordion" data-target="#{{$index}}">
<h4 class="panel-title">
{{item.gebieden}}
</h4>
</div>
<div id="{{$index}}" class="panel-collapse collapse ">
<div class="panel-body text-center">
<ul class="nav nav-tabs">
<li ng-repeat="sub in All | unique: 'onderwerpen'">
<a data-toggle="tab" data-target="#{{sub.onderwerpen}}">
{{sub.onderwerpen}}
</a>
</li>
</ul>
<div class="tab-content" style="padding:2%">
<div id="{{sub.onderwerpen}}" class="tab-pane fade">
<table class="table table-bordered text-center">
<thead>
<tr>
<th class="text-center">Jaar</th>
<th class="text-center">Waarde</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key,val) in item" ng-hide="$index<2" >
<td>{{key}}</td>
<td>{{val}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
So I just want the normal functionality back, being that there can only be 1 panel active at all times. Please help
Related
I am working on displaying data into multiple collapsible panel body dynamically to display individual data into each body on click but somehow on every click it sharing same data for each panels.
What I wanted to do is to display individual data for each item. Here is my sample code that I have written.
<span ng-repeat="t in tabledata">
<div class="bs-example">
<div class="panel-group" id="accordion">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#{{t.appSystemName}}">
<table class="table borderless">
<tr>
<td>
<span class="glyphicon glyphicon-plus"
ng-click="getDataForProdQa(t.appSystemName)"
ng-model="plus">
</span>
</td>
<td>{{t.dbName}}</td>
<td>{{t.appSystemName}}</td>
<td>{{t.Id}}</td>
<td>{{t.frequency}}</td>
<td>{{t.timeStamp}}</td>
</tr>
</table>
</a>
</h4>
</div>
</div>
<div id="{{t.appSystemName}}" class="panel-collapse collapse">
<div class="panel-body">
<table class="table table-responsive" >
<tr ng-repeat="i in innertabledata">
<td>{{i.dbName}}</td>
<td ng-model="check">{{i.appSystemName}}</td>
<td>{{i.Id}}</td>
<td>{{i.frequency}}</td>
<td>{{i.timeStamp}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</span>
Looking some assistance to fix this issue
just try to make the id="accordion" dynamic as it is under ng-repeat and everytime same id is duplicated.So make dynamic id like id="accordion{{$index}}" and also the data-parent make it dynamic.Hope this helps.
Thanks
I'm using Bootstrap dynamically toggleable tab. I have two tabs, the content of the first tab(active tab) is dynamically bind on page load and when I switch to the second tab, the contents are again dynamically bound onclick. The elements of different tab appear one below the other. How do I prevent the div from appearing one below the other?
<div id="content">
<table>
<tr>
<td >
<div id="graphArea" class="startSize">
<div>
</div>
</td>
<td id="searchArea">
<ul class="nav nav-tabs" id="resultList">
<li class="active"><a data-toggle="tab" href="#resultsArea">Results</a></li>
<li ><a data-toggle="tab" href="#facetsArea">Facets</a></li>
</ul>
<div class="tab-content">
<div class="searchsize" class="tab-pane fade in active" id="resultsArea">
<table>
<tr>
<td>
<p><b>Search Results for :</b> <p style="color:green"><b id="searchText"></b></b></p></p>
</td>
</tr>
<tr>
<td>
<div class="list-group">
<div>
<table class="table-hover" id="resultTab" style="word-break: break-all;">
<tbody id="searchResults">
//data is dynamically bound to tbody
</tbody>
</table>
</div>
<div id="pager">
<ul id="pagination" class="pagination-sm"></ul>
</div>
</div>
</td>
</tr>
</table>
</div>
<div id="facetsArea" class="tab-pane fade">
<p>Helllo</p>
</div>
</div>
</td>
</tr>
</table>
</div>
Remove the duplicate class attribute class="searchsize" from the div and make it as class="tab-pane fade in active searchsize" . It works.
I'm working on MVC application, and in one of my Views there is tab control which has three tabs, on each tab (first and second) user has to fill some data which might be seen on third tab, so for example when user fills input on first tab, he will click on another tab and user will fill input on second tab, and when user clicks Save Changes then I would like save changes to a database (by calling my method in a controller) and redirect user to a third tab
Here is an image of how that looks on my view:
And here is an html from my View (image above) for this:
<div class="" role="tabpanel" data-example-id="togglable-tabs">
<ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
<li role="presentation" class="active">
TAB 1
</li>
<li role="presentation" class="">
TAB 2
</li>
<li role="presentation" class="">
TAB 3
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div role="tabpanel" class="tab-pane fade active in" id="tab_content1" aria-labelledby="home-tab">
<div class="col-md-6 col-sm-6">
<div class="form-group">
//My inputs as text boxes
</div>
<div class="form-group">
//My inputs as text boxes
</div>
<div class="form-group">
//My inputs as text boxes
</div>
<div class="form-group">
//My inputs as text boxes
</div>
<div class="form-group">
//My inputs as text boxes
</div>
<div class="form-group">
//My inputs as text boxes
</div>
<div class="form-group">
//My inputs as text boxes
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="tab_content2" aria-labelledby="profile-tab">
<div class="table-responsive">
<table class="table table-striped jambo_table bulk_action">
<thead>
<tr class="headings">
<th class="column-title">Name </th>
<th class="column-title">Title </th>
</tr>
</thead>
<tbody>
</table>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="tab_content3" aria-labelledby="profile-tab">
<div class="row">
<div class="col-md-5 col-sm-12 col-xs-12">
</div>
<div class="col-md-7 col-sm-12 col-xs-12">
<div class="table-responsive">
<table class="table table-striped jambo_table bulk_action">
<thead>
<tr class="headings">
<th class="column-title">Name </th>
<th class="column-title">Title</th>
<th class="column-title">Value</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<div class="col-md-12">
<br />
<button type="submit" class="btn btn-warning pull-right" id="btnSaveThis"><i class="fa fa-save"></i> Save changes</button>
</div>
</div>
</div>
</div>
As you can see guys from a code there is only one "Save changes" button in this View, and it is submiting data to a server and saving it to a database, and after it is saved I ussualy redirected it to a Index page like this:
return RedirectToAction("Index", "Articles");
But now I am wondering how can I redirect user to a "TAB 3" when he is located on a TAB 2 and if he press "Save changes".
What I did for now is next, I acctually attached on click event on my button which is submiting changes to a database, and it looks like this:
$('#btnSaveThis').click(function (e) {
e.preventDefault();
$('#myTab a[href="#tab_content3"]').tab('show');
})
And this code above will open third tab when I 'm on second tab and if I press Save changes, but then my method which is located in a Controller wont be hitted because of this line: e.preventDefault();
So guys, how can I make a POST to my Controller, to save changes to a database, but also execute code from my javascript to open third tab?
Thanks guys
Cheers
It would be too complicated to solve this by Ajax, because there is a lot of items to loop throught, so I decided to solve this on another way.
What I did here was next:
Defined ViewBag in a Controller on a Method which is being invoked when form is submited on a second tab
Passed that ViewBag to this View, and checked if there is value in a ViewBag, so if yes, then set third Tab as active, soon I will post my code, because I'm writing this answer from my mobile phone right now! :)
But theoreticaly that was how I solved this
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");
});
});
}
http://jsfiddle.net/um7m89hp/10/
<div class="piGal pull-right">
Some image or <br />
images will go <br />
over here.
</div>
<div class="panel-group pull-left" id="products">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-parent="#products" href="#partnumber1">
<h4 class="panel-title">
<div>
<input type="radio" name="specs">
Some Product Title #1<br />
Some Product Subtitle
</div>
</h4>
</div>
<div id="partnumber1" class="panel-collapse collapse">
<div class="list-group">
<ul class="list-group">
<li class="list-group-item">Some product data</li>
<li class="list-group-item">Some product data</li>
</ul>
</div>
</div>
<div class="panel-heading" data-toggle="collapse" data-parent="#products" href="#partnumber2">
<h4 class="panel-title">
<div>
<input type="radio" name="specs">
Some Product Title #2 <br />
Some Product Subtitle
</div>
</h4>
</div>
<div id="partnumber2" class="panel-collapse collapse">
<div class="list-group">
<ul class="list-group">
<li class="list-group-item">Some product data</li>
<li class="list-group-item">Some product data</li>
</ul>
</div>
</div>
</div>
</div>
The radio button checks only when the text in the panel is clicked. If you click directly on the radio button itself or in the border space it will activate the panel but not check the radio button. Any help on this issue? I'm trying to keep the formatting with the radio button out to the side of the panel text.
Yes, strange behaviour. Something with the BS css on the accordion is my guess. All you need to do is change the trigger for the checking of the radio. I have it on the shown event of the collapse.
$(".panel-collapse").on("shown.bs.collapse", function(event) {
//travel up the DOM to the heading and check the radio
$(this).prev('.panel-heading').find('input').prop("checked", true);
});
here is the fiddle: http://jsfiddle.net/um7m89hp/16/