I have a navbar on the left side of my web application with each item of the menu having an expandable submenu to navigate through the pages. Unfortunately, every time I click on one of the links of a submenu the new page is loaded, but the submenu is collapsed again. I would like to have the submenu still expanded after clicking one of its links.
Here is my code:
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="nav-header panel panel-default">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<span class="glyphicon glyphicon-th"></span>Cluster
</h4>
</div>
</a>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<div class="nav-item"><span class="glyphicon glyphicon-eye-open"></span>#Html.ActionLink("overview", "ClusterAll", "Cluster", new { area = "" }, new { #class = "nav-item", style = "text-decoration:none;" })</div>
<div class="nav-item"><span class="glyphicon glyphicon-plus"></span>#Html.ActionLink("create", "ClusterCreation", "Cluster", new { area = "" }, new { #class = "nav-item", style = "text-decoration:none;" })</div>
<div class="nav-item"><span class="glyphicon glyphicon-pencil"></span>#Html.ActionLink("edit", "ClusterEdit", "Cluster", new { area = "" }, new { #class = "nav-item", style = "text-decoration:none;" })</div>
</div>
</div>
</div>
<div class="nav-header panel panel-default">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<span class="glyphicon glyphicon-hdd"></span>Applications
</h4>
</div>
</a>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<div class="nav-item"><span class="glyphicon glyphicon-ok"></span>#Html.ActionLink("verify", "ApplicationPortfolioEdit", "Applications", new { area = "" }, new { #class = "nav-item", style = "text-decoration:none;" })</div>
<div class="nav-item"><span class="glyphicon glyphicon-list-alt"></span>#Html.ActionLink("manage", "ApplicationMassEdit", "Applications", new { area = "" }, new { #class = "nav-item", style = "text-decoration:none;" })</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The actual menu has more items, this is just an example with 2 items to show you.
Any ideas what I have to do to keep the submenus expanded after clicking on its links?
I'm very new to web design, but I hope you can help me:)
If I get what you're trying to do you can pass the opened submenu as a # param in your url so when they do click a link to the new page you can have Javascript/jQuery read the # and open the proper submenu.
Something like this..
Applications
And then with Javascript & jQuery we can read it with..
$(document).ready(function() {
hash = window.location.hash;
$(hash).collapse('show');
});
We can use $(hash).collapse('show'); to show the content because you're using Bootstrap.
But this goes under the impression I understand what you're trying to say. :)
Related
At first Please see the screenshot , here i am working on Accordion text Editor, where you can add title and body text.
when i clicked ADD button multiple time then showing like this type. Not showing the title text. i thing it's problem on JS file. Does any solution??
Thanks in Advance!
$(document).ready(function() {
$('#Add_btn').click(function(){
$('#accordion_body').append($('#editableDiv').html());
var x = document.getElementById("accordion_input").value;
document.getElementById("accordion_title").innerHTML = x;
});
});
function myAccorFunction() {
var Myaccordion = `
<div class="Myacc" id="acc_main" contenteditable="false"
class="accordion-main"
style="position: relative;width: 98.5%; left: 9px;">
</div>
<div class="panel-group trash_removed" id="accordion" role="tablist"
aria-multiselectable="true"
style="margin-bottom: 7px;margin-top: 10px"
contenteditable="false">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne"
contenteditable="false">
<h4 class="panel-title">
<a id="accordion_title" role="button" data-toggle="collapse"
data-parent="#accordion" href="#expandingCol"
aria-expanded="false" aria-controls="collapseOne">
</a><div class="icon_area">
<i class="fa fa-edit" data-toggle="collapse"
data-parent="#accordion" href="#collapseOne"
aria-expanded="false" aria-controls="collapseOne">
</i>
<i onclick="myfundelete()" class="fa fa-trash">
</i>
</div>
</h4>
</div>
<div id="expandingCol" class="panel-collapse collapse"
role="tabpanel" aria-labelledby="headingOne">
<div id="accordion_body" class="panel-body" >
</div>
</div>
</div>
</div>
`;
$("#editor").append(Myaccordion);
}
<button onclick="myAccorFunction()" id="Add_btn"
class="btn btn-primary note-image-btn" role="button"
data-toggle="collapse" data-parent="#accordion"
href="#collapseOne" aria-expanded="true"
aria-controls="collapseOne">Add</button>
It appears you are using the same element ID #accordion_title more than once. As browsers assume element ID is unique within a page, document.getElementById("accordion_title").innerHTML = x; will only change the innerHTML of the first element having that ID, but not the subsequent ones that were appended by the ADD button.
Try using a Class name instead of ID for your title text element, then iterate over every element of that class to change their innerHTML.
$('.accordion_title').each(function() {
$(this).html($('#accordion_input').val());
});
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>
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?
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");
});
});
}
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");
});