Develop Reference

How do you show only one collapsible element at a time?

Its all in the title. Basically, I'm working with the first example from this Bootstrap page. There is no example on this page that shows how to collapse other elements when you click and expand a different element. I basically want this to work similarly to an accordion, when you click on another element, the one you had open is hidden (closing it), and the one you clicked on expands. Please help me with this I'm really trying to figure this out, but I'm struggling. Here's some demo code from Bootstrap 5. How would I get this so these are two unique elements with unique content, and when you click on one, it expands, and the other one that's open closes. Thank you so much for your help - Demo Code Below - the link to this example is attached above. These both buttons have unique content, but they can both be opened at the same time - I don't want this, I want only so one opens at a time, and the other closes on click. Thanks - Any solution is appreciated
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>

Wrap your collapse in one div with id. And use data-target attribute with parent id.
<div id="abc">
<p>
<a
class="btn btn-primary"
data-bs-toggle="collapse"
href="#multiCollapseExample1"
role="button"
aria-expanded="false"
aria-controls="multiCollapseExample1"
>Toggle first element</a
>
<button
class="btn btn-primary"
type="button"
data-bs-toggle="collapse"
data-bs-target="#multiCollapseExample2"
aria-expanded="false"
aria-controls="multiCollapseExample2"
>
Toggle second element
</button>
</p>
<div class="row">
<div class="col">
<div
class="collapse multi-collapse"
id="multiCollapseExample1"
data-bs-parent="#abc"
>
<div class="card card-body">
Some placeholder content for the first collapse component of this
multi-collapse example. This panel is hidden by default but
revealed when the user activates the relevant trigger.
</div>
</div>
</div>
<div class="col">
<div
class="collapse multi-collapse"
id="multiCollapseExample2"
data-bs-parent="#abc"
>
<div class="card card-body">
Some placeholder content for the second collapse component of this
multi-collapse example. This panel is hidden by default but
revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>
</div>

Can't get element nested within Boostrap popover in jQuery

I am trying to alert when I click on an anchor tag with id small-text.
The element is inside a Bootstrap popover. However, when I remove it and put it anywhere outside the popover, the alert starts workings whenever I click on the link.
I have no idea what's happening.
DEMO https://jsfiddle.net/08sa99uk/4/
HTML
<div class="article-links">
<span class="font">
<a href="#"
data-container="body"
data-toggle="popover"
data-html="true">
<i class="fa fa-font fa-2x"></i>
</a>
<span class="font-size" style="display: none">
S
</span>
</span>
</div>
Javascript
// This is the function that allows me to use an external div for the popover content
$('.font a').on('click', function(e) {e.preventDefault(); return true; }).popover({
html: true,
placement: 'bottom',
content: function() {
return $('.font-size').html();
}
});
$('a#small-text').on('click', function() {
alert('clicked');
});

The problem is that the element in question does not exist when the DOM is rendered. If you inspect the rendered popup (typically, F12 in the browser or right click and Inspect Element), that Bootstrap is creating, it's copying your template and appending it to the DOM inside the popup wrapper:
<div class="popover fade bottom in" role="tooltip" id="popover192086" style="top: 27px; left: 0px; display: block;">
<div class="arrow" style="left: 31.7073%;"></div>
<h3 class="popover-title" style="display: none;"></h3>
<div class="popover-content">
S
</div>
</div>
Since this occurs, you need to delegate the second click event:
$(document).on('click', 'a#small-text', function() {
alert('clicked');
});
DEMO
Note: It should be noted that delegating at the document level is inefficient. You'll want to replace document in the code above with the closest parent code that exists in the DOM prior to initialization.
EDIT:
Regarding the latest comment below about the delegation not working with span.font, here is the fully rendered DOM layout that Bootstrap creates:
<body>
<!-- Your original code -->
<div class="article-links">
<span class="font">
<a href="#" data-container="body" data-toggle="popover" data-html="true" data-original-title="" title="" aria-describedby="popover186211">
<i class="fa fa-font fa-2x"></i>
</a>
<span class="font-size" style="display: none">
S
</span>
</span>
</div>
<!-- Bootstrap added code -->
<div class="popover fade bottom in" role="tooltip" id="popover186211" style="top: 27px; left: 0px; display: block;">
<div class="arrow" style="left: 31.7073%;"></div>
<h3 class="popover-title" style="display: none;"></h3>
<div class="popover-content">
S
</div>
</div>
</body>
Notice that in the Bootstrap rendered code, there is not a span.font. UI libraries tend to extract user created templates and then add additional code to make them perform in the desired way. In this case, you'd have to add the delegation code to the next outer element, possibly body. For your use case, it's probably fine to use document this once. I would not make a habit of it though.

Bootstrap toggle button collapse Flot piechart

I'm trying to add a Bootstrap toggle button that when is pressed collapses a chart. I've first added the same button for a datatable and it worked but when I added it to my chart on the first click the panel where the chart is in it shrink, on the second click it hides the chart and on the third (when it should open it) it opens but it's shrink (out of the panel).
<div class="mypanel" id="PanelA">
<div class="panel panel-default">
<div class="panel-body">
<div class="demo-container">
<div id="ChartA" class="demo-placeholder"></div>
</div>
<div class="demo-container" data-bind="visible:dataList().length>0">
<br />
<div class="btn-group" style="padding-right:10px; padding-left:10px">
<button type="button" class="btn btn-default pull-left" data-toggle="collapse" id="BtnCA">
<span class="fa fa-bar-chart" aria-hidden="true"></span>
<span class="btnFont">Show Chart</span>
</button>
</div>
<div id="ChartA-Overview" style="width: 100%; min-height:100px" class="demo-placeholder"></div>
</div>
</div>
</div>
</div>
Is there any way to collapse/show a Flot chart whenever the toggle button is pressed?

First thing is you're missing an ending double-quote in your ID. You'll want to also add class="collapse" to the div if you want the div to start off collapsed.
<div id="ChartA-Overview ...
It should be <div id="ChartA-Overview" class="collapse" ... >
Since you're using a <button>, add the data-target attribute to target the div's ID that you want to collapse and expand (i.e. data-target="ChartA-Overview").
Edit 2
Sometimes the Id's come from data-bind... its' something like ""ChartA-Overview"+Id(),
If this is the case, you can use jQuery to get the div ID to add the data-target attribute. Here's a codepen for you to review.
http://codepen.io/yongchuc/pen/QGLdez

Hiding button after collapse is toggled in bootstrap

Given the following code from the bootstrap website for the collapse functionality:
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<div class="collapse" id="collapseExample">
<div class="well">
...
</div>
</div>
What I would like to do is hide the link, that invokes the collapse functionality once its open, does anyone know of a way I can do this without adding additional Js?

I used this to hide the button after it was clicked:
HTML (just added a class "hide-me"):
<button class="btn btn-default hide-me" data-toggle="collapse" data-target="#search" id="search-display">My Button</button>
CSS:
.hide-me[aria-expanded="true"] {display: none;}

This is what I was really looking for', without any CSS or JavaScript of my own, simply leveraging Bootstrap:
<a class="btn btn-primary hook in" data-toggle="collapse" href=".hook" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<div class="collapse hook">
<div class="well">
...
</div>
</div>
Heres the fiddle:
http://jsfiddle.net/hptrpaxh/1/

Add this:
$('.btn').toggle();
I recommend you add an additional class to this button or give it an id to distinguish it from other buttons.

Sorry didn't see you were trying to do it without extra js.
Here's an easy CSS trick. You can obviously modify it as well
give the button a class like hidden-button
Then use this CSS
.hidden-button {
position:relative;
z-index:0;
}
.well {
position:relative;
margin-top:-33px;
z-index:10000;
}
Here's a fiddle http://jsfiddle.net/cp5Lvtdo/4/

This can be done in Bootstrap 5 (and presumably 4) using the native Accordion functionality. Place the button and the content in separate accordion item elements, and set the parent on the collapsible content per the docs.
Notice that I've hidden the accordion item borders with b-0.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="accordion m-4" id="accordionArea">
<div class="accordion-item border-0">
<div class="accordion-collapse collapse show">
<button class="btn btn-primary" role="button"
data-bs-toggle="collapse" data-bs-target="#content"
aria-expanded="false" aria-controls="content">Toggle button & content
</button>
</div>
</div>
<div class="accordion-item border-0">
<div id="content" class="accordion-collapse collapse"
data-bs-parent="#accordionArea">
<div>Some content.</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

If you would like to be able to collapse the content and show the link again without reloading the page you can wrap the whole content section (your <div>) in the <a> element.
Place some link content before the actual collapsible content and give it a class or id. Then add a custom CSS class to the <a> tag as explained in the previous answer but add a child selector like this:
.toggle-hide[aria-expanded="true"] > /* your link content class or id here */ {
display: none;
}
This will make the link less visible but you'll be able to click the content itself to collapse it and show back just the link.

JQuery not working on elements inside ng-view

I'm new to angular, been trying to fix this for about an hour now but can't get it working. I have some html code:
<li class="notification-dropdown hidden-xs hidden-sm">
<a href="#" class="trigger">
<i class="icon-warning-sign"></i>
<span class="count">8</span>
</a>
<div class="pop-dialog">
<div class="pointer right">
<div class="arrow"></div>
<div class="arrow_border"></div>
</div>
<div class="body">
...
The notification pop-dialog is hidden by default and the following JQuery shows it when the .notification-dropdown is clicked
$(document).on("click", ".notification-dropdown", function (e) {
e.preventDefault();
e.stopPropagation();
// hide all other pop-dialogs
$(".notification-dropdown .pop-dialog").removeClass("is-visible");
$(".notification-dropdown .trigger").removeClass("active");
var $dialog = $(this).children(".pop-dialog");
$dialog.toggleClass("is-visible");
});
For some reason, this code does not work when I put the html into AngularJS's ng-view loaded as a partial into a main html document.
I've already loaded the JQuery lib before Angular.
I've tried to shorten the code for simplicity, I can show more code if needed.

Best try to avoid using jQuery with AngularJS completely. Using both together in this fashion is a common mistake among those new to Angular, coming form a jQuery background. Here is a great answer on that topic: "Thinking in AngularJS" if I have a jQuery background?
You could just use ui bootstrap´s dropdown.
Alternatively, there are ngShow and ngIf. If you still want to use your own css class to hide it, just set the class with ngClass.
Then, you can use ngClick to recieve the click event.
Here is how it would look (HTML only, you dont even have to write any JS for this):
<li class="notification-dropdown hidden-xs hidden-sm" ng-click="showDialog = !showDialog">
<a href="#" class="trigger">
<i class="icon-warning-sign"></i>
<span class="count">8</span>
</a>
<div class="pop-dialog" ng-show="showDialog">
<div class="pointer right">
<div class="arrow"></div>
<div class="arrow_border"></div>
</div>
<div class="body">
<!-- body content -->
</div>
</div>
</li>
EDIT : Added Code
EDIT : working plunk