I'm using bootstrap 2.2.1 and for whatever reason the data-parent attribute is not doing what is intended. It does not close a previous opened target when i click another target. Here's a fiddle with the code below, any ideas on how to fix this ?
<div id="accordion">
<ul>
<li>
<a href="#" data-toggle='collapse' data-target='#document', data-parent='#accordion'>option 1</a>
<ul id="document" class="collapse">
<li> suboption 1</li>
<li> suboption 1</li>
<li> suboption 1</li>
</ul>
</li>
<li>
option 2
</li>
<li>
option 3
</li>
<li>
<a href="#" data-toggle='collapse' data-target='#document2', data-parent='#accordion'>option 4</a>
<ul id="document2" class="collapse">
<li> suboption 1</li>
<li> suboption 1</li>
<li> suboption 1</li>
</ul>
</li>
</ul>
</div>
It says in the Bootstrap Documents:
If a selector is provided, then all collapsible elements under the
specified parent will be closed when this collapsible item is shown.
(similar to traditional accordion behavior - this is dependent on the
panel class)
so it has to be used with panel-groups, but you can override the javascript anyway.
http://getbootstrap.com/javascript/#collapse-options
I couldn't get this to work either - this may be something in the Bootstrap JS related to the fact that you are using lists rather than divs?
So to get it to work, I had to override the click event. Based on this question here: Collapsible accordion doesn't work inside a dropdpwn-menu Bootstrap
I added an accordion-toggle class to each option link, and then added the following JavaScript to get it to work:
$(document).on('click', '.accordion-toggle', function(event) {
event.stopPropagation();
var $this = $(this);
var parent = $this.data('parent');
var actives = parent && $(parent).find('.collapse.in');
// From bootstrap itself
if (actives && actives.length) {
hasData = actives.data('collapse');
//if (hasData && hasData.transitioning) return;
actives.collapse('hide');
}
var target = $this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, ''); //strip for ie7
$(target).collapse('toggle');
});
This fiddle shows it in action.
've been struggling with bootstrap collapse as well. I was trying to something do something slightly different. I wanted inline toggle behavior. See my JS fiddle below. What I found is that bootstrap seems to require the existence of the "accordion-group" div in addition to the data-parent attribute covered in their docs. So either there is a bug in the JS or their docs do not include it. I also had to zero out the styles on the accordion-group div...
http://jsfiddle.net/cssguru/SRFFJ/
<div id="accordion2">
<div class="accordion-group" style="border:0;padding:0;margin:0">
<div id="collapseOne" class="collapse in">
Foo Bar...
<a data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Show Herp Derp
</a>
</div>
<div id="collapseTwo" class="collapse">
Herp Derp...
<a data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Show Foo Bar
</a>
</div>
</div>
</div>
You have to use accordion-group class in your items, see issue https://github.com/twitter/bootstrap/issues/4988
Related
<a class="mobileSortBy-toggle_new"
data-collapsible="mobileSortBy-panel-{{type}}"
data-collapsible-disabled-breakpoint="medium"
data-collapsible-disabled-state="closed"
data-group-collapsible="main">{{lang 'common.sorter.sort_by'}}</a>
<div class="mobileSortBy-panel" id="mobileSortBy-panel-{{type}}" data-mobile-sort-by>
<h4 class="mobile-panel-heading"><span class="mobile-panel-heading-ellipse">{{lang 'common.sorter.sort_by'}}</span></h4>
<a class="mobile-panel-close" href="#" data-collapsible="mobileSortBy-panel-{{type}}" data-group-collapsible="main"><svg><use xlink:href="#icon-close" aria-hidden="true"></use></svg></a>
<div class="mobileSortBy-panel-body" data-lock-body-scroll>
<ul class="navList navList--mobileSelectList">
<li class="navList-item">{{lang 'common.sorter.relevance'}}</li>
<li class="navList-item">{{lang 'common.sorter.newest'}}</li>
<li class="navList-item">{{lang 'common.sorter.price_asc'}}</li>
<li class="navList-item">{{lang 'common.sorter.price_desc'}}</li>
</ul>
</div>
</div>
SORT BY code for the mobile version. When the user is selecting an option, the code shows the "is-active" in the class, and that places a V mark next to it.
The problem is with the first option. It ignores the If statement and doesn't show the mark.
What can be done to fix it?
I would like to know why when clicking on "Capítulo 4" also the subitems of "Capítulo 6" open?
Same happens when clicking on "Capítulo 2", subitems of "Capítulo 1" open.
CODEPEN:
https://codepen.io/ogonzales/pen/QWjmorP
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
The things happen here is because you didn't use unique id for your ul items. So whenever you trying to open/close one of your collapsable ul by referring them with anchor tag href, since their id is not unique both uls will get open. In order to fix this, give each ul a unique id and then refer to that unique id with your desired a tag. You can read more about ids here.
For more illustration, let's say we got this ul element:
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Introducción
</li>
<li>
¿Qué es la salvación?
</li>
<li>
¿Se pierde la salvación?
</li>
</ul>
and the corresponding anchor tag for this should be this one:
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
There is an id of homeSubmenu which relate to ul element and we are referring to that with href="#homeSubmenu".
So the next item should have a different id to work as expected, let's pick another one:
<ul class="collapse list-unstyled" id="homeSubmenu2">
<li>
Introducción
</li>
<li>
¿Qué es la salvación?
</li>
<li>
¿Se pierde la salvación?
</li>
</ul>
So the corresponding to that should be this one:
<a href="#homeSubmenu2" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
Here is the full working demo: codepen.io
I am not able to click on the link nestled inside a list tag.
Here is the HTML code:
<div class="sideBarContent" ng-include="'routes/sidebar/sidebar.tpl.html'">
<div id="innerSidebarContent" ng-controller="SidebarController">
<div>
<ul class="menuItems bounceInDown">
<li id="menuHome" class="" ui-sref="home" ng-click="closeMobileMenu()" href="/home/">
<li id="menuConfigurator" ui-sref="configurator" ng-click="closeMobileMenu()" href="/configurator/">
<span class="menuIcon regularImage blueHighlight activated icon-selectAndTailor"></span>
<span class="menuIcon icon-selectAndTailor_active activeImage">
<p class="mainMenuLabel multiLine">Select & Tailor Methods</p>
</li>
I tried all these ways to locate the text and click on it:
describe('Test objects in /configurator/ route', function() {
it('Click on select and tailor banner icon', function(){
//element(by.css('ul.menuItems > li[href=/configurator/]')).click();
//element(by.className('menuIcon icon-selectAndTailor_active activeImage')).click();
//element(by.css("li[#id='menuConfigurator' and #href='/configurator/']")).click();
//element(by.id('menuConfigurator')).click();
//element(by.xpath("//div[#class='sideBarContent']/p")).click();
//element(by.css("#menuConfigurator > p")).click();
//element(by.partialLinkText('Select & Tailor Methods')).click();
element(by.linkText("Select & Tailor Methods")).click();
console.log('in the configspec ...');
})});
Can someone help me resolve this?
Just had the same issue.
It turned out that wrapping the list in a < div > block was the problem.
Once the list was moved to be outside any < div > block the < a > tags worked.
li can not have href attribute
Use
<li id="menuHome" class="" ui-sref="home" ng-click="closeMobileMenu()"></li>
Or
<li id="menuHome" class="" ui-sref="home" ng-click="closeMobileMenu()" href="/home/"></li>
Instead of
<li id="menuHome" class="" ui-sref="home" ng-click="closeMobileMenu()" href="/home/"></li>
According to html this is not link.
Select it using other selectors:
element(by.className("multiLine")).click();
element(by.css(".mainMenuLabel.multiLine")).click();
element(by.css("[class='mainMenuLabel multiLine']")).click();
element(by.xpath(".//p[#class='mainMenuLabel multiLine']")).click();
I am tring to develop my own collapsible tree view as a way to learn Angular 2. I have it partly working. Right now I am stuck on how to apply the hidden property to on the specific <li> item that has been clicked on. Here is what I have so far.
This is the html that displays the items to go in the list.
<div>
<ol>
<li *ngFor="let item of videoList">
<div>
<a *ngIf="item.nodes && item.nodes.length > 0" (click)="toggle()">{{item.title}}</a>
<a *ngIf="item.nodes <= 0">{{item.title}}</a>
</div>
<ol [hidden]="!collapsed">
<li *ngFor="let subItem of item.nodes">
<a *ngIf="subItem.nodes && subItem.nodes.length > 0" (click)="toggle()">{{subItem.title}}</a>
<a *ngIf="subItem.nodes <= 0">{{subItem.title}}</a>
<ol [hidden]="!collapsed">
<li *ngFor="let video of subItem.nodes">
<a *ngIf="video.nodes && video.nodes.length > 0">{{video.title}}</a>
<a *ngIf="video.nodes <= 0">{{video.title}}</a>
</li>
</ol>
</li>
</ol>
</li>
</ol>
</div>
and here is the typescript in the component that collapses or expands the list.
collapased = false;
toggle() {
this.collapsed = !this.collapsed;
}
currently the code collapses and expands the top level elements together and the second level elements together. I need to make each item in the list independent of the other ones. I also prefer to stay away form using CSS to achieve this.
If you add a new property in your front-end model, assuming you are using a front-end model, then you can toggle the items one at a time:
export class Item {
constructor (
public nodes: Node[],
public hidden: boolean) {}
}
<div>
<ol>
<li *ngFor="let item of videoList">
<div>
<a *ngIf="item.nodes && item.nodes.length > 0" (click)="item.hidden = !item.hidden">{{item.title}}</a>
<a *ngIf="item.nodes <= 0">{{item.title}}</a>
</div>
<ol [hidden]="!item.hidden">
…
If you're not using a model like that, then the only other thing I can think of is creating a unique id tag for each by using whatever unique id comes with your data:
<a id="{{node.id}}"> </a>
Then you can hide and show based on the id property of those elements. I'm out of ideas, but I'm sure someone else will help!
I have a list of JavaScript objects "hard coded for them moment" each object has properties id: 1, title: something, collapsed: true, and nodes: [] I added the collapsed property to each node and did the following in my html.
<div>
<ol>
<li *ngFor="let item of videoList">
<div (click)="item.collapsed = !item.collapsed">
<a *ngIf="item.nodes && item.nodes.length > 0">{{item.title}}</a>
<a *ngIf="item.nodes <= 0">{{item.title}}</a>
</div>
<ol >
<li *ngFor="let subItem of item.nodes" [hidden]="item.collapsed">
<div (click)="subItem.collapsed=!subItem.collapsed">
<a *ngIf="subItem.nodes && subItem.nodes.length > 0">{{subItem.title}}</a>
<a *ngIf="subItem.nodes <= 0">{{subItem.title}}</a>
</div>
<ol>
<li *ngFor="let video of subItem.nodes" [hidden]="subItem.collapsed">
<div>
<a *ngIf="video.nodes && video.nodes.length > 0">{{video.title}}</a>
<a *ngIf="video.nodes <= 0">{{video.title}}</a>
</div>
</li>
</ol>
</li>
</ol>
</li>
</ol>
</div>
basically what is happening is I am changing the collapsed property of the selected node.
It's 3:40AM and I'm going to give up trying for tonight.
The tabs will not update the page outside of the navigation area.
The PanelController looks like this:-
app.controller('PanelController', function($scope) {
$scope.tab = 1;
$scope.selectTab = function(setTab) {
$scope.tab = setTab;
};
$scope.isSelected = function(checkTab) {
return $scope.tab === checkTab;
};
});
and the nav pane looks like this:-
<div class="navbar-collapse collapse" ng-controller="PanelController">
<ul class="nav navbar-nav navbar-right">
<li ng-class="{ active:isSelected(1) }">
<a href ng-click="selectTab(1)">Blog</a>
</li>
<li ng-class="{ active:isSelected(2) }">
<a href ng-click="selectTab(2)">About{{tab}}</a>
</li>
<li ng-class="{ active:isSelected(3) }">
<a href ng-click="selectTab(3)">Contact</a>
</li>
</ul>
</div>
and the placeholder HTML for my two tabs is as follows:-
<div ng-controller="PanelController">
<div ng-show="isSelected(1)">
<p>Hello</p>
</div>
<div ng-show="isSelected(2)">
<p>Please work</p>
</div>
</div>
As you can see, the {{tab}} next to 'About' in my navbar is updating in my view as I click the tabs, as is the active class. When I place a {{tab}} expression outside of the navbar it isn't updating whenever it's clicked. Obviously this is something related to the scope of the variable, but I am using the PanelController on the parent of both the nav and my main area.
I can't see what I'm doing wrong.
I'd appreciate a fresh pair of eyes -- I've already some help with this already and any more will be graciously accepted.
The problem diagnosis is fairly simple, 2 controllers means 2 instances that each have their own scope
You would need to use a service or events to have them communicate together