I have the simple example with Bootstrap and toggling divs by click. Here is markup:
<div class="accordion-heading">
<a class="accordion-toggle"
data-toggle="collapse"
data-parent="#accordion2"
href="#collapseOne">Open!</a>
</div>
<div id="collapseOne" class="accordion-body">
<div class="span6">
<div class="well well-small">
<div class="accordion-toggle">
...some text...
</div>
</div>
</div>
<div class="span2"></div>
</div>
When user clixks link with title 'Open!' underlying div expands or collapses. Div is expanded initially and when user clicks first time it has no effect. Then if user clicks second time, div collapses.
In the original example div is collapsed initially but I would like it to be opened. How could I fix the problem?
Just add class 'collaspe in' to class="accordion-body".
Check example code at CODEPEN
HTML:
<div class="accordion-heading">
<a class="accordion-toggle"
data-toggle="collapse"
data-parent="#accordion2"
href="#collapseOne">Open!</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="span6">
<div class="well well-small">
<div class="accordion-toggle">
...some text...
</div>
</div>
</div>
<div class="span2"></div>
</div>
I hope this will fix your issue.
Enjoy :)
I had this problem, and in my case I had foolishly inserted two "class" attributes in the div I wanted to collapse like so:
<div class="something" id="mydiv" class="collapse in"> <div>
The browser seems to eliminate the second class attribute instead of merging them.
My problem was fixed by "merging" together the two class attributes:
<div id="mydiv" class="something collapse in"> <div>
<a class="btn btn-primary" data-toggle="collapse" href="#collapsePanel" role="button" aria-expanded="false" aria-controls="collapsePanel">Collapse</a>
<div id="collapsePanel" class="collapse show"><!-- Content Here --></div>
This will make it collapsible, but show the panel by default. When you click the Collapse button, it will collapse the panel on the first click.
I'm only adding this here for if anyone is looking to do it either way. I found this link when searching for its inverse. Hope it helps!
You should only call bootstrap.min.js one. Make sure that you're calling bootstrap files only once in the <head> section.
If you're using Bootstrap with Laravel or any kind of framework, keep in mind that npm run dev compiles bootstrap js files in app.js. That could be the case.
<div id="collapseOne" class="accordion-body collapse">
This will also make it close by default and open when clicked
I had this problem too. Set id and data-bs-parent
Related
I'm creating a dashboard,and created sidebar menu using bootstrap grid.Now I want when I click any sidebar menu's routerLink. my objective is open that link in next column of the row,as usually happens in dashboards/admin panel.
But here in my case,when I click the link it goes to next page.
<div class="row">
<div class="col-sm-2">
<div class="list-group">
<a routerLink="dashboard" class="list-group-item active"> Dashboard</a>
<div>
<a class = "list-group-item" data-toggle="collapse"
href="#collapse1">Accessories</a>
<div id="collapse1" class="panel-collapse collapse bgColor">
<div class="list-group">
<a routerLink ="add-new" class="list-group-item">Add new Accessory</a>
<a routerLink ="view-accessories" class="list-group-item">View Accessories</a>
</div>
</div>
</div>
</div>
</div>
<div class="col">
</div>
</div>
I expect the output that link should be open in next column of row.
but here in my case it goes to next page. how to resove this.[enter image description here][1]
[1]: https://i.stack.imgur.com/DVyLQ.jpg
That it usually achieved by having a layout where constant elements (like dashboard) are outside the router outlet. Say, in your AppComponent:
<app-navbar></app-navbar>
<app-vertical-nav></app-vertical-nav>
<router-outlet></router-outlet>
<app-footer></app-footer>
Couldn't find anything that addressed this exact issue; it seems simple enough but I haven't been able to get it to work.
Basically, I just want a normal accordion except that instead of a series of buttons to press to expand panels of text, I want the options to be selectable from a single dropdown. I already have that working, but now I can't figure out how to apply the data-parent attribute so only 1 panel is open at a time.
I've been looking at working normal accordion code and trying to apply the same concept to my dropdown, but the different structure means I can't just copy and paste the relevant code and I'm not sure of the fine details of how data-parent is meant to work with accordions.
This is what I have so far:
<div class="container">
<div class="col-md-12">
<div class="col-md-3"></div>
<div class="panel-group col-md-6 text-center" id="accordion">
<div class="col-md-12 text-center">
<div class="dropdown btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Choose a Section
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Section A</a></li>
<li><a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Section B</a></li>
<li><a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Section C</a></li>
</ul>
</div>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
Text A
</div>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
Text B
</div>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
Text C
</div>
</div>
</div>
<div class="col-md-3"></div>
</div>
</div>
(I hope the divs are nested correctly... I think they are but it's hard to follow at times...)
As you can see, it's all inside of a div with an id of "accordion". The dropdown selections open and close the text sections below it properly, but even though I have their data-parent set to "#accordion", they don't close unless closed manually. I've tried putting data-parent in the text blocks' divs too but that didn't work either. It looks very similar to my normal working accordion but grouped differently, which it obviously has to be when I'm using a dropdown instead of separate buttons.
I assume it's probably a matter of reorganizing the divs a bit, or moving the id or data-parent around but I haven't been able to make any progress. Unless custom Javascript would be required to get this working? It seemed like quite a minor change to use a dropdown instead of a series of buttons, but maybe it's more complicated than it seems...
This is similar to my answer here: https://stackoverflow.com/a/19426220/171456
The accordion behavior depends on the panel class, and the panel must be the direct child of the data-parent element.
Applying these rules to your scenario would look like this...
<div class="panel-group row text-center">
<div class="col-md-12 text-center" id="accordion">
<div class="panel">
<div class="dropdown btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Choose a Section
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Section A</a></li>
<li><a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Section B</a></li>
<li><a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Section C</a></li>
</ul>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
Text A
</div>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
Text B
</div>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
Text C
</div>
</div>
</div>
</div>
</div>
http://www.codeply.com/go/cPGVLuAh4j
On a separate note, in the Bootstrap grid col-* should always be the immediate child of a row.
Here's a fiddle of the functionality that I'd like:
https://jsfiddle.net/jo6cfr7b/2/
I have three accordion panels. Two of them contain a submenu, one of them contains nothing but instead links elsewhere on click (using href).
When I try and link through href on my first accordion group, I lose the ability to collapse all panels on click. It just doesn't work anymore.
<div>
<div id="accordion"> <!-- accordion 1 -->
<div class="panel">
<a data-toggle="collapse" data-parent="#accordion" href="#accordionOne">
Need this to link outside
</a>
<div id="accordionOne">
</div>
</div>
<div class="panel"> <!-- accordion 2 -->
<a data-toggle="collapse" data-parent="#accordion" href="#accordionTwo">
Collapsible Accordion 2
</a>
<div id="accordionTwo" class="collapse">
<div class="panel-body">
Change does not roll in on the wheels of inevitability,
but comes through continuous struggle.
And so we must straighten our backs and work for
our freedom. A man can't ride you unless your back is bent.
</div>
</div>
</div>
<div class="panel"> <!-- accordion 3 -->
<a data-toggle="collapse" data-parent="#accordion" href="#accordionThree">
Collapsible Accordion 3
</a>
<div id="accordionThree" class="collapse">
<!-- panel body -->
<div class="panel-body">
You must take personal responsibility.
You cannot change the circumstances,
the seasons, or the wind, but you can change yourself.
That is something you have charge of.
</div>
</div>
</div>
</div>
TLDR; How can I maintain the collapse functionality when clicking any of the accordion group anchors, while being able to link externally on the first accordion panel?
You can use both data-target and href...
Just use data-target="" for the collapsing behavior, and href=".." for the external on the first collapse link.
<a data-toggle="collapse" data-parent="#accordion" data-target="#accordionOne" href="/">
Need this to link to another page (but collapse any currently open submenus)
</a>
Codeply Demo
When hovering my social buttons the hyperlink appears and the link can be launched by right clicking and choosing an option, but not on a single click. They were built differently in html to help my troubleshooting but I can't get either of them to send me to the respective social pages. They are located in the 4 wide column in the social row. I went a little crazy nesting columns to keep everything centered. Any help is appreciated.
test site can be found here: http://www.tedrmoke.com/cjs
<div class="jumbotron">
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li>Sawmill</li>
<li>Purchase</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Jumbotron -->
<div class="row text-center jumbo">
<h1>Hello! We are <br/><span>CJ Sawmill & Lumber</span></h1>
<h3>We specialize in coming to you and cutting your lumber in the central NJ area. We also have a selection of quality cured cuts available for purchase.</h3>
<div class="row">
<div class="col-xs-2"></div>
<div class="col-xs-8 social">
<div class="col-sm-8">
<div class="collapse-group"> Contact Us.
<form class="collapse" name="contactform" method="post" action="http://www.cjsawmill-lumber.com/send_form_email.php">
<table class"col-lg-12 text-left" >
...
</table>
</form>
</div>
</div> <!-- row -->
<div class="col-sm-4">
<div class="btn btn-default twi_btn"></div>
<a class="btn btn-default fb_btn" href="http://www.facebook.com/cjsawmill"></a>
</div>
</div> <!-- col-6 button row -->
<div class="col-xs-2"></div>
</div> <!-- button row -->
</div>
</div> <!-- container -->
</div> <!-- end jumbotron -->
That's because in your javascript :
// JavaScript Document
$('.row .btn').on('click', function(e) {
e.preventDefault();
var $this = $(this);
var $collapse = $this.closest('.collapse-group').find('.collapse');
$collapse.collapse('toggle');
});
, you are preventing the default event whenever an element with class btn is clicked inside an element of class row.
Notice in your HTML, that both your hyperlinks and divs for facebook and twitter respectively are of the class btn due to which, whenever they are clicked, the default event (that is redirecting to their href) is prevented which is why the links dont work on a single click, but they do work on right click, since the right click only uses the href attribute to redirect you to the new link.
Try removing the e.preventDefault(); from being applied to your hyperlinks or divs inside hyperlinks and then the social buttons should work just fine on a single left click as well.
Your Javascript says
$('.row .btn').on('click', function(e) {
e.preventDefault();
# . . .
});
So I would target that to just the specific 'Contact Us' button, not all butons.
Bootstrap can be restrictive in a way that won't let you wrap your button in an a tag. Like you could in regular html. Here is a solution that I used to a similar issue I had, structure you a tag like this and you should still get a button that functions.Place in your class names of course.
<a class="btn btn-default glyphicon glyphicon-hand-up"></a>
Basically Currently I have html code which builds a layout of panels and I want to basically expand and collapse these panels , for some reason when i load the assets and run my app , the panels appear collapsed but does not expand when i click the panel title the code is below , i am using angular js with html5 . if someone can help quick i would appreciate that.
<div class="row clearfix" >
<div ng-repeat="i in ctrl.coreControlpanelItems" class="col-md-12 column" >
<div ng-class="{'panel-primary': hover}" ng-mouseenter="hover = true" ng-mouseleave="hover = false" class="panel panel-default animated fadeInUp">
<div class="panel-heading">
<i class="pull-left {{i.icon}}"/>
<h5 class="panel-title">
<a href="#" ng-model="collapsed" ng-click="collapsed=!collapsed">
<a ui-sref="{{i.ref}}">{{i.group}}</a>
</a>
</h5>
</div>
<div ng-show="collapsed">
<div class="panel-body ">
<ul>
<li ng-repeat="s in i.items"><a ui-sref="{{s.ref}}">{{s.name}}<a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
First of all, you have nested a tags in your panel-title element. That's a no-no.
Second, you're can't put ng-model on an a tag.
Third, your panel-title is supposed to expand something but you also have a link inside of it which if clicked on would negate what you're trying to do with the expanding...