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
Related
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>
I have a bootstrap accordion (ver. 5.0) inside of which are several buttons. When the user clicks on one of the buttons, I want the div inside of the accordion to change. I am currently using the display style property, alternating between show and hide as appropriate using javascript. The problem is that once the display property has been set to show, the div is shown even when the accordion is collapsed closed. Is there any way to solve this issue apart from writing a set of instructions to hide the div on collapse, as this would likely override the default accordion animation?
<div class="accordion-item">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#options">
<h2 class="accordion-header" id="options_heading">Options</h2>
</button>
<div id="options" class="accordion-collapse collapse" data-bs-parent="#account_info">
<button class="btn" id="password_change">Change Password</button>
</div>
<div id="p_change" class="accordion-collapse collapse" data-bs-parent="#account_info" style="display: none;">
<!-- password change form here -->
</div>
</div>
I want to switch between the div with the form and the div with the options. I'm using vanilla javascript, not jQuery.
I am trying to make Bootstrap 4 dropdown have this style: slinky.js.org
This is what I have by now: https://codepen.io/nht910/pen/yLexeEM
Main code:
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="main-container">
<div class="menu-container">
<div class="menu-1">
<span>Link-1</span>
<button class="button-1">arrow-1</button>
</div>
<div class="menu-2">
<span>Link-2</span>
<button class="button-2">arrow-2</button>
</div>
</div>
<div class="submenu-container">
<div class="submenu-1"> <!-- submenu of .menu-1 -->
<div class="arrow-back">
<button class="button-back-1">Arrow back 1</button>
</div>
<div>
<span>Child 1</span>
</div>
</div>
<div class="submenu-2"> <!-- submenu of .menu-2 -->
<div class="arrow-back">
<button class="button-back-2">Arrow back 2</button>
</div>
<div>
<span>Child 2</span>
</div>
</div>
</div>
</div>
</div>
To make dropdown has slide effect:
I set two classes .submenu-1 and .submenu-2 to display: none, and when user click on arrow button, corresponding submenu will be shown and slide to it.
when user click on arrow back, it will slide back to main menu, and after finish sliding effect, it will hide submenu.
That is what I have for now. But I don't know how to resize dropdown's height to fit content inside it (dynamic height) like slinky.js.org.
Thank you so much.
Try using hide & code when you click.
you can simply do it by using jQuery
$("selector").hide() & $("selector").show()
when user clicks your custom buttons
Solution: https://codepen.io/nht910/pen/OJMobEm
I change height of dropdown using JS with .submenu-1 is the content I want dropdown to fit:
$('.dropdown-menu').height($('.submenu-1').outerHeight());
But it got one problem. At the first time I click on arrow button (it is the first time height of dropdown changed), the transition animation doesn't work. But after that, it work perfectly. So I add another line at global to make the first time that height is changed happen on page load. And now it work perfectly for me.
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.
I have a couple of dynamically created buttons with toggle boxes below it that are created like so.
HTML
<button type="button" class="accordion-toggle btn btn-default btn-small"
data-toggle="collapse" data-parent="#accordion'+this.id+'"
href="#collapseOne'+this.id+'"><i class="icon-info"></i></button>
Here is the textbox collapse it calls to display on click
<div id="accordion'+this.id+'">
<div id="collapseOne'+this.id+'" class="collapse" style="height: auto;">
<div class="control-group control-group-notes">
<button onclick="clearMsgBox(\''+this.id+'\')" type="button" class="close" data-toggle="collapse" data-parent="#accordion'+this.id+'" href="#collapseOne'+this.id+'">x</button>
<textarea id="doGet'+this.id+'" style="width: 92%;" rows="2" placeholder="Message..."></textarea>
</div>
</div>
</div>
The button and boxes are dynamically created and works fine. The only issue I can't seem to figure out is that on load all the boxes are open and not hidden. But once I click the x button it toggles to hide just fine.
Could anyone help me out? Thank you in advance.
In bootstrap the class="in" determines the visibility of your accordion and it's probably present on all of them when it loads.
class="panel-collapse collapse in"
For those you do not want to show onload remove the "in" class.
Solved!
If anyone wants to the know what was causing it.
As stated above in class needed to be removed. also there was a height auto that needed be removed.
code as follows.
<div id="accordion'+this.id+'">
<div id="collapseOne'+this.id+'" class="collapse">
<div class="control-group control-group-notes">
<button onclick="clearMsgBox(\''+this.id+'\')" type="button" class="close" data-toggle="collapse" data-parent="#accordion'+this.id+'" href="#collapseOne'+this.id+'">x</button>
<textarea id="doGet'+this.id+'" style="width: 92%;" rows="2" placeholder="Message..."></textarea>
</div>
</div>
</div>
If you want your div to be hidden on load, you can try to set: "display:hidden;" in your CSS for this div. Then the toggle function will show it on click by changing the display attribute. (at least this is how it works with jquery)