Develop Reference

Accordion inside Dropdown without jQuery?

I want to have an accordion inside my dropdown menu. However, when clicking on the accordion to open/close it, the entire dropdown collapses. Instead, I want the dropdown to remain open and the accordion to open/close freely.
Check out a demo here
<div class="btn-group dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button type="button" class="btn btn-link" data-toggle="collapse" data-target="#collapseOne">
Collapsible Test
</button>
</h5>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<button class="dropdown-item" type="button">Test</button>
</div>
</div>
</div>
</div>
</div>
</div>
There seem to be many similar questions out there but I cannot find the right solution. A lot of answers suggest using jQuery to solve this issue. Is there a way to do it without?
I believe using data-boundary or data-parent may be the way to do this but I can't figure out how.

You can achieve this by adding an onclick event to the button that prevents the click from propagating down to the dropdown. Then you need to manually handle adding the relevant collapse or collapse.show classes to the accordion content in the onclick function like so:
function toggleAccordion(event) {
event.stopPropagation();
var collapsable = document.getElementById('collapseOne');
var classList = collapsable.classList;
if(classList.contains('collapse')) {
classList.replace('collapse', 'collapse.show');
} else if (classList.contains('collapse.show')) {
classList.replace('collapse.show', 'collapse');
}
}
and the HTML with the click event added:
<div class="btn-group dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button type="button" class="btn btn-link" onclick="toggleAccordion(event)">
Collapsible Test
</button>
</h5>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<button class="dropdown-item" type="button">Test</button>
</div>
</div>
</div>
</div>
</div>
</div>
I altered your JSFiddle to show a working solution and you can find it here. Another note, I had to change the JS load type to No wrap - bottom of <head/body> to make this work.

Whilst #Jake has given a valid answer, I found a "hack" of some sorts that lets this work without writing any additional JS.
Simply replace the accordion div with a form tag.
<div class="btn-group dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
<form id="accordion">
<div id="headingOne">
<h5 class="mb-0">
<button type="button" class="btn btn-link" data-toggle="collapse" data-target="#collapseOne">
Collapsible Test
</button>
</h5>
</div>
<div id="collapseOne" class="collapse" data-parent="#accordion">
<div class="card-body">
<button class="dropdown-item" type="button">Test</button>
</div>
</div>
</form>
</div>
</div>
Unfortunately, I don't know why this works so I am unable to put the reason in the answer.

Collapse panel on button click - bootstrap

How do you make a panel collapse when pressing a normal bootstrap button? Here's my code:
<div class="panel panel-primary" style="border-color: #464646;">
<div class="panel-heading" style="border-color: #BBBBBB; height: 35px; padding-top: 3px;">
<div style="float: left; margin-top: 5px;" data-toggle="collapse" href="#collapse1">Select Object</div>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<!--Object Buttons-->
<button *ngFor="let object of objects" type="button" data-toggle="collapse" style="margin-right: 10px;" class="btn btn-primary" (click)="doThings();"</button>
</div>
</div>
</div>
The panel-body will collapse when I click the panel-heading, but I would like to have the panel-body collapse when clicking one of the 'object' buttons.

You can apply the same data-target="#collapse1" to the button as the href has.
href
<a data-toggle="collapse" href="#collapse1">Select Object</a>
Button
<button class="btn btn-danger" type="button" data-toggle="collapse" data-target="#collapse1">
Also, your button isn't closed. missing > to close it.
<button *ngFor="let object of objects" type="button" data-toggle="collapse" style="margin-right: 10px;" class="btn btn-primary" (click)="doThings();"
Example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Select Object</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapse1">
Button with the same data-target
</button> Panel Body
</div>
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse2">Select Object</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<button class="btn btn-danger" type="button" data-toggle="collapse" data-target="#collapse2">
Button with the same data-target
</button> Panel Body
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

filter groups of texts by category in bootstrap

I'm studying a way to post some articles on my site but I can not control this example code snippet I found on the net, it should filter items based on the subject , but do not know how to do this .
For example , clicking on " jobs " should only filter messages about Jobs , but that tag I define what belongs to which category? How do I filter function as it should?
Full example here code
<div class="container">
<div class="row">
<div class="col-md-3">
<h4 class="">Search</h4>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
<button type="button" class="btn btn-default btn-sm btn-block hidden-lg hidden-md" data-toggle="collapse" data-target="#demo">Refine your search <span class="caret"></span>
</button>
<div id="demo" class="collapse in">
<hr>
<div class="list-group list-group">
<h4 class="">Category</h4>
<span class="badge">14</span> Notices <span class="label label-primary">New</span>
<span class="badge">3</span> Jobs
<span class="badge">25</span> Third item
<div id="categories" class="collapse">
<span class="badge">14</span> Active item
<button class="btn btn-default btn-sm btn-block" data-toggle="collapse" data-target="#categories">More <span class="caret"></span></button>
<hr class="">
<h4 class="">Viewing Options</h4>
<span class="badge">14</span> Upcoming Sessions
<span class="badge">3</span> OnDemand
<hr class="">
Archived Courses
Courses In Development
</div>
</div>
<div class="hidden-sm hidden-xs">
<hr>
<div class="well">
<h4>Premium Membership</h4>
<p>Gain unlimited access to our entire course library.</p>
<button class="btn btn-sm btn-warning">Learn more</button>
<hr>
<p class="text-center ">Already a member? Sign in.</p>
</div>
<hr>
<div class="well">
<h4>Course Catalog</h4>
<p><img src="http://placehold.it/400X500" class="img-responsive"></p>
<p>Everything you need to know about our webinars, including speaker bios, topics, and courses.</p>
<button class="btn btn-sm btn-block btn-warning">Download</button>
</div>
<hr>
<h4 class="text-center">CPE Partners</h4>
<p><img class="center-block" src="http://placehold.it/100X100"></p>
</div>
</div>
<div class="col-md-9">
<div class="well hidden-xs">
<div class="row">
<div class="col-xs-4">
<select class="form-control">
<option>Featured</option>
<option>Recently Added</option>
<option>Next Upcoming Session</option>
<option>A-Z</option>
<option>Z-A</option>
</select>
</div>
<div class="col-xs-8">
<div class="btn-group pull-right">
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-th"></span></button>
<button type="button" class="btn btn-default active"><span class="glyphicon glyphicon-th-list"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-list"></span></button>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-4"><img src="http://placehold.it/1280X720" class="img-responsive">
</div>
<div class="col-sm-8">
<h3 class="title">How to Fight Fraud with Artificial Intelligence and Intelligent Analytics</h3>
<p class="text-muted"><span class="glyphicon glyphicon-lock"></span> Available Exclusively for Premium Members</p>
<p>Could card.</p>
<p class="text-muted">Presented by Ellen Richey</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-4"><img src="http://placehold.it/1280X720" class="img-responsive">
</div>
<div class="col-sm-8">
<h3 class="title">Big Payment Data: Leveraging Transactional Data to Ensure an Enterprise Approach to Risk Management</h3>
<p class="text-muted"><span class="glyphicon glyphicon-calendar"></span> July 23, 2014 # 1:30 PM</p>
<p> risk increases year over year, the amount of data being collected increases as well.
</p><p class="text-muted">Presented by Mike Braatz, Jonathan Eber</p>
</div>
</div>
<ul class="pagination pagination-lg pull-right">
<li>«</li>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>»</li>
</ul>
</div>
</div>
</div>

btn-block with splited button dropdown

The main idea:
Vertical buttons group list where each button fully fills parent by itself.
Problem:
split button dropdown don't do what I need. Adding .btn-block to button/button-group didn't resolve problem (dropdown moves to new line as separated button).
What I have:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="btn-group">
<button type="button" class="btn btn-info">
Button 1
</button>
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">
1
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-block btn-info">
Button 2
</button>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-block btn-info">
Button 3
</button>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Problem:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="btn-group btn-block">
<button type="button" class="btn btn-block btn-info">
Button 1
</button>
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">
1
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-block btn-info">
Button 2
</button>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-block btn-info">
Button 3
</button>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
What need to do, to solve problem with splitted dropdown button? Like that:

You can do it by adding btn-block to the btn group. and also to the button itself. but it will move the menu opener to a new line. so I made a little trick you can see here:
jsfiddle.net/u753bbsg/

AngularJS UI - On click of button collapse single div if multiple divs present

Suppose I have the following code:
<button class="btn btn-primary" ng-click="isCollapsed = !isCollapsed">Button1</button>
<div id="collapse1" collapse="isCollapsed">
<div class="well well-small">
<p ng-bind-html="b2data"></p>
</div>
</div>
<button class="btn btn-primary" ng-click="isCollapsed = !isCollapsed">Button2</button>
<div id="collapse2" collapse="isCollapsed">
<div class="well well-small">
<p ng-bind-html="b2data"></p>
</div>
</div>
How can I collapse each individually?
http://plnkr.co/edit/W26X4Iq8KrnY9cGsFvwA?p=preview

Try this out:- http://plnkr.co/edit/vPbihuL6JBE6qhwy4irP?p=preview
HTML:-
<div ng-controller="AccordionDemoCtrl">
<accordion-group heading="Static Header">
<button class="btn btn-primary" ng-click="isCollapsed1= !isCollapsed1">Button1</button>
<hr>
<div id="collapse2" collapse="isCollapsed1">
<div class="well well-small">
<p ng-bind-html="b2data"></p>
</div>
</div>
<button class="btn btn-primary" ng-click="isCollapsed2 = !isCollapsed2">Button2</button>
<hr>
<div id="collapse2" collapse="isCollapsed2">
<div class="well well-small">
<p ng-bind-html="b2data"></p>
</div>
</div>
</accordion-group>
</div>