I am in the process of replacing all my bootstrap.js components with their respective angular counterparts using UI Boostrap. So far so good, but i can't seam to figure out to keep only the active tab open while the rest are closed. Thank you for any and all assistance.
HTML CODE
<!-- Accordion -->
<uib-accordion ng-repeat="task in activeTasks track by $index">
<div ng-include="'assets/views/task_list.html'"></div>
</uib-accordionv>
ng-inlcude: task_list.html
<uib-accordion-group panel-class="panel panel-default">
<uib-accordion-heading>
<h4 class="panel-title" role="button" uib-accordion-header>{{task.title}}</h4>
</uib-accordion-heading>
{{task.description}}
</uib-accordion-group>
DEMO:
url
Your ng-repeat directive is generating a new <uib-accordion> element for each task.
You want a single <uib-accordion> element containing several <uib-accordion-group> elements (one for each task).
What is oneAtATime ?
Don't you just want to say close-others="true"
Related
I used the tab feature in Bootstrap in a different way for a high-fidelity prototype. Using it to go from one section to another but not using the tabs so the first page shows, then you just use an anchor to go from section to section. The problem I have come up with is that I need to go from one page to a specific section "tab" within another. I can't figure out how to do this. I am not great with javascript so any help would be greatly appreciated.
Page 1 - Home.cshtml
<a class="btn btn-primary" href="AlignTeam#stepAlign2" data-target="#stepAlign2">Next</a>
Page 2 - AlignTeam.cshtml
<div class="page-body myWizard">
<div class="tab-content">
<!-- STEP ONE -->
<div class="tab-pane fade in active" id="stepAlign1">
Content
</div>
<!-- STEP TWO -->
<div class="tab-pane fade" id="stepAlign2">
Content
</div>
<!-- STEP THREE -->
<div class="tab-pane fade" id="stepAlign3">
Content
</div>
</div>
You might be forgot to include .html (file extension) on AlignTeam
which is href="AlignTeam#stepAlign2". It has to be href="AlignTeam.html#stepAlign2".
You need a bit of knowledge on Javascript & JQuery to be able to achieve that.
I have provided you the solution on Plunker. You could learn more from it because you can preview it's result as well.
Let me know later if you find this helpful. Cheers !
So I am making a website as my wishlist this year. Every wish has a collapsible menu (made with Bootstrap collapse) and something is not right.
Problem illustrated in picture:
As you can see, it is like the collapsible element is overlaying or a part of the next panel that should trigger the next collapsible element.
I have looked for bugs in my code multiple times and I really can't figure out why it is doing this.
So the
<div id="collapseOne" class="collapse">
is overlaying the
<a class="panel-link" role="button" data-toggle="collapse" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<div class="panel panel-default">
<div class="panel-body">
All of my code is in a Codepen here.
My website is in Danish :)
1) First of all, you need to fix the hierarchy of HTML-tags. Which tag should be within another?
<a class="panel-link" ...>
<div class="panel panel-default">
<div class="panel-body">
...
</a>
...
<a class="#" ...>
...
</div>
</div>
</a>
2) Bootstrap's grid system involves one more hierarchy of blocks: the container contains rows and rows contain columns. So you need to wrap columns into rows.
See demo on CodePen.
I'm using a Bootstrap accordion and it works like a charm, no problem at all. However, I'd like to have a link to one of the tabs in the accordion. The idea is that once I click on the link, I'm taken to that part of teh page (the accordion is really down in the page) and open the tab.
So I used the following:
<i class="mdi-action-info"></i>
which should work. And it does in part: it opens the accordion tab just right, however, the page doesn't scroll to the anchor as it should. It just stays in the same position, but opening the accordion.
Any idea how to fix it? I have found answers related to jQuery UI accordion but nothing about BS accordion (and the jQuery UI answers didn't work either), really don't know why isn't this working
In order to scroll to the anchor, you should wait until your collapsable div is fully shown.
JQuery helps us to easily work out with that by collapse events.
$(document).ready(function() {
$("#section-two").on('shown.bs.collapse', function() {
window.location = "#section-two";
});
});
Check out Bootstrap JS Collapse Reference on w3schools.com for a quick documentation.
You can do it manually like so:
Open group 2
JS
$('#my-link').click(function(e) {
$('#collapseOne').collapse('hide');
$('#collapseTwo').collapse('show');
});
Fiddle
In my case I prefer to avoid adding JavaScript and decide to use two attributes (data-target and href) so that each of them has one job: 1)launch tab & 2)go to anchor:
<a data-toggle="collapse" data-parent="#accordion" data-target="#$foo" href="#$foo">
Building off of Michele's answer, here is an example where you can do an animated scroll to the div:
$(document).ready(function() {
$('#accordionEvent').on('shown.bs.collapse', function() {
var position = $('#accordionEvent').offset().top;
$('HTML, BODY').animate({scrollTop: position }, 500); //500 specifies the speed
});
});
Here is a working version that doesn't just force open an according but actually toggles it like you would expect. It will also scroll to the page anchor. Best of all it's dynamic so you don't need to manually code a bunch of functions for each according group.
Your webpage will look something like this:
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading accordian-button">
<h4 class="panel-title">
Section One
</h4>
</div>
<div class="accordian-body panel-collapse collapse in">
<div class="panel-body">
Section One Text
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading accordian-button">
<h4 class="panel-title">
Section Two
</h4>
</div>
<div class="accordian-body panel-collapse collapse in">
<div class="panel-body">
Section Two Text
</div>
</div>
</div>
</div>
<div>
Now for the code:
$(".accordian-button").click(function(e) {
that = $(this)
accordian = that.siblings('.accordian-body')
$(".accordian-body").not(accordian).collapse('hide')
accordian.collapse('toggle')
})
// Kludge for allowing all accordians to be collapsed to start
$(".accordian-body").collapse('hide')
Here's a working fiddle:
http://jsfiddle.net/dkcb8jLq/31/
Notice you can just click on the div to toggle it or you can click on the text to toggle and go to the link.
For sample: please check the link http://plnkr.co/edit/Q3Z669FeRHqMORcQ9v6K?p=preview.
I am working in Visual studio 2013.
I am trying to hide or based on authentication, I want to show the menu. But ng-if not working outside the ng-view.
Actually ng-if is not coming with the intellisense. Though I pasted the code, I didn't get. But ng-hide is working.
I am getting the ng-hide. But I don't like to use ng-hide, because this will just hide the element. So using inspect element, we can enable the menu.
Why I am not getting ng-if? Am I doing in the wrong way
<div id="page-wrapper" ng-controller="indexController">
<div id="page-header" class="bg-gradient-9" ng-if="!authentication.isAuth">
<div id="mobile-navigation">
<button id="nav-toggle" class="collapsed" data-toggle="collapse" data-target="#page-sidebar" aria-expanded="false" aria-controls="navbar"><span></span></button>
</div>
<!--Logo for all the screen-->
<div id="mobile-navigation">
</div>
<div id="header-logo" class="logo-bg mobile-hidden">
<a href="#/" class="logo-content-big" title="">
</a>
<a href="#/" class="logo-content-small" title="NoteReport">
NoteReport
</a>
</div>
</div>
<div id="page-content-wrapper ">
<!--Partial loading of the content-->
<div class="angular-ngview-content" ng-view>
</div>
</div>
</div>
This is the ancient old issue if child scopes created by ng-if, try:
ng-if="!$parent.authentication.isAuth"
EDIT
The ng-if directive was provided after angular 1.1.5, you are using 1.0.5. Working plunk.
This is because of ng-if creating a child scope and how prototypical inheritance works with primitives.just check once like
ng-if="authentication.isAuth"
change angularjs version to 1.3.8...It will work
Bootstrap normally closes other collapses when you click on one to open it.
Is there an option or hack to make it keep the collapses open unless explicitly closed without changing the look and layout of the panel-group?
Update 2020
Bootstrap 4
How do you make Twitter Bootstrap Accordion keep one group open?
Bootstrap 3
You can just remove the data-parent attribute that is normally used in the accordion markup.
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
...
http://bootply.com/127843
See this demo:
http://plnkr.co/edit/OxbVII?p=preview
Idea:
Just add data-toggle="collapse" and a data-target to element, to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.
2021 here:
Assuming that you're using Bootstrap 4, you can simply remove the data-parent attribute from the element with the collapse class.
Bootstrap docs:
https://getbootstrap.com/docs/4.6/components/collapse/#accordion-example
They use the following collapse element:
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
</div>
</div>
This subscribes the collapse to events on #accordionExample, which is the main accordion element, via the data-parent attribute. Remove data-parent, and the collapse will no longer close when another one is expanded.
Bootstrap 4
NO NEED JAVASCRIPT
can implements many div of id #accordion{{$i}} each accordion only having 1 child that referring 1 its parent
<div class=""
id="accordion{{$i}}">
<h3 class="" data-toggle="collapse"
data-target="#collapse{{$i}}"
aria-expanded="true"
aria-controls="collapse{{$i}}" class="mb-0">
Hai Im the clickable
</h3>
<div id="collapse{{$i}}"
class="collapse"
aria-labelledby="heading{{$i}}"
data-parent="#accordion{{$i}}">
<p>Hai Im the collapsible content</p>
</div>
</div>