How to make dropdown expand clicking on the button element? - javascript

Currently the dropdown menu appears only if I click on the img tag. How to make it appear when I click on the button tag? Here is my code:
<div class="btn btn-link dropdown account-menu-btn">
<a href="#" class="dropdown-toggle icon-el" data-toggle="dropdown" role="button" aria-expanded="false">
<img src="~/Assets/profile_pic.jpg" class="img-circle">
</a>
<ul class="dropdown-menu pull-right" role="menu">
<li>
<a href="#">
Create
</a>
</li>
</ul>
</div>
I modified the code using data-target, but I still need to click on the image and not on the button to expand the dropdown menu. Any sugestions?
<div class="btn btn-link dropdown account-menu-btn" style="background-color:yellow" data-target="#myModal">
<a href="#" class="dropdown-toggle icon-el" data-toggle="dropdown" role="button" aria-expanded="false">
<img src="~/Assets/profile_pic.jpg" class="img-circle">
</a>
<ul id="myModal" class="dropdown-menu pull-right" role="menu">
<li>
<a href='#Url.Action("About", "Home")'>
Create
</a>
</li>
</ul>
</div>

I believe the answer is clearly stated in the twitter-bootstrap javascript section
Your code isn't really too far from what's on there:
<div class="btn btn-link dropdown account-menu-btn">
<a id="dLabel" data-target="#" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<img src="~/Assets/profile_pic.jpg" class="img-circle">
<span class="caret"></span>
</a>
<ul class="dropdown-menu pull-right" aria-labelledby="dLabel">
<li>
Create
</li>
</ul>
</div>
Hope this helps

You could also try to do it with Javascript and Jquery.
$( '#BUTTONID' ).click(function() {
$( '#MENUID' ).toggle();
});
This is a very condensed version, but it is ought to work.

Related

How to find multiple div ID in JavaScript code

I'm creating a dropdown accordion style in bootstrap 4 and found this useful solution using JavaScript in stack overflow (Twitter Bootstrap: How to create a dropdown button with an accordion inside it?). I modified the script to suit my website navigation style but I got stuck on how to make the JavaScript find not only ID: accordion but also ID: accordion1 and so on. Thus, when I navigate out of the menu, the accordion that open will automatically hide. Currently, the script can only hide the first panel which is ID: accordion. For this project, I can't use form tag as described in Bootstrap 4: How to create a dropdown menu with an accordion inside it?. Sample in Bootply
Also, how do I make the accordion panels open in multiples.
<div class="collapse navbar-collapse " id="navbarContent">
<ul class="navbar-nav">
<li class="nav-item dropdown dropdown-accordion " data-accordion="#accordion">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ONBOARDING
</a>
<div class="dropdown-menu ">
<div class="accordion" id="accordion">
<div>
<a class="nav-link" href="#" target="_blank">
Item 01
</a>
</div>
<div>
<a class="nav-link" data-toggle="collapse" role="button" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Item 02
</a>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne">
<div> <a class="nav-link" href="#" target="_blank">
Item 02A</a>
</div>
<div> <a class="nav-link" href="#" target="_blank">
Item 02B
</a></div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown dropdown-accordion " data-accordion="#accordion">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
OFFBOARDING
</a>
<div class="dropdown-menu ">
<div class="accordion" id="accordion1">
<div>
<a class="nav-link" href="#" target="_blank">
Item 01
</a>
</div>
<div>
<a class="nav-link" data-toggle="collapse" role="button" data-parent="#accordion1" href="#collapsetwo" aria-expanded="true" aria-controls="collapsetwo">
Item 02
</a>
<div id="collapsetwo" class="collapse px-3" aria-labelledby="headingOne">
<div> <a class="nav-link" href="#" target="_blank">
Item 02A
</a></div>
<div> <a class="nav-link" href="#" target="_blank">
Item 02B
</a></div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<script>
$('.dropdown-accordion').on('show.bs.dropdown', function(event) {
var accordion = $(this).find($(this).data('accordion'));
accordion.find('.show').collapse('hide');
});
$('.dropdown-accordion').on('click', 'a[data-toggle="collapse"]', function(event) {
event.preventDefault();
event.stopPropagation();
$($(this).data('parent')).find('.collapse.show').collapse('hide');
$($(this).attr('href')).collapse('show');
})
</script>
According to your script, you really are just hiding the div with id='accordion'. If you want to hide them all, you have to know the nr of accordions you have, and iterate through all of them.
<script>
$('.dropdown-accordion').on('show.bs.dropdown', function(event) {
for(var i = 0; i < nrAccordions; i++)
{
var accordion = $(this).find($(this).data('accordion'+i));
accordion.find('.show').collapse('hide');
}
});
</script>

Dropdown menu button doesn't close after click using angular5 and bootstrap4

Here is the code
some.component.html
<div class="btn-group dropdown" normalizePosition ng-click="toggle()">
<button class="dropdown-toggle btn btn-sm btn-primary"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
<i class="fa fa-cog"></i><span class="caret"></span> {{l("Edit")}}
</button>
<ul class="dropdown-menu">
<li>
<a (click)="openReport(id)">{{l('Run Report')}}</a>
</li>
</ul>
some.component.ts
openReport(id): void {
this.router.navigate(['/app/main/sale/viewer', id]);
}
When you are navigated to the sale viewer page in the browser the button is still showing and I'm not sure how to remove this after it's been clicked. Does anyone have ideas?

On click aria-expanded="false" not change and 'show' class also not addes in bootstrap dropdown Angular 5

I am using the bootstrap dropdown in my Angular project. but on click is not showing dropdown-menu. actually, after clicking, the show class not added in the drop-down and aria-expanded="false" is not change into "true
<div class="dropdown>
<button class="btn btn-secondary dropdown-toggle f-f-r f-14" type="button" id="dropdown123" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Save Button
<span class="caret"></span>
</button>
<div class="dropdown-menu f-f-r f-14 p-t-12 p-b-12" aria-labelledby="dropdown123">
<a class="dropdown-item"
<button>S1 </button>
</a>
<a class="dropdown-item">
<button>S2 </button>
</a>
<a class="dropdown-item">
<button>S3 </button>
</a>
</div>
</div>
I tried your code without your custom style classes and only added a missing " at <div class="dropdown"> and a missing > at < class="dropdown-item"> and it worked for me.
Here is the working code with the missing stuff and without your custom css.
<div class="dropdown">
<button class=" btn btn-secondary
dropdown-toggle" type="button" id="dropdown123"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Save Button <span class="caret"></span>
</button>
<div class="dropdown-menu"
aria-labelledby="dropdown123">
<a class="dropdown-item">
<button>S1</button>
</a> <a class="dropdown-item">
<button>S2</button>
</a> <a class="dropdown-item">
<button>S3</button>
</a>
</div>
</div>
If it does not work please check if you are using Bootstrap 4, maybe it was different with V3 but I dont think so, not sure though.

Bootstrap 4 - Dropdown AND Tooltip on Button?

Is there a way to specify that a button acts as both a dropdown trigger AND a tooltip source?
I've been able to get it to do one or the other, but not both. My code below works as a dropdown, but if I reposition the data-toggle="dropdown" to before the one for tooltip, then it renders a tooltip instead:
<button class="btn btn-sm dropdown-toggle"
data-toggle="tooltip" data-toggle="dropdown"
data-placement="bottom"
title="Test Tooltip">
You can initialize the tooltip through any attribute, id or class to avoid crossover with dropdown.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-toggle-second="tooltip" data-placement="right" title="Tooltip on right">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
$('[data-toggle-second="tooltip"]').tooltip();
https://www.codeply.com/go/aFEQgHs1sC
In such cases I find it easiest to simply put the label of the button within a span that has the tooltip itself
<button class="btn btn-sm dropdown-toggle" data-toggle="dropdown">
<span data-toggle="tooltip" title="Test Tooltip">
Button label
<span>
</button>
This way the button has the toggle action for the click event (including on the label) but the label has the tooltip event, and the two data-toggle attributes are on different elements so don't clash.
You could try making something like this where you have the button as data-toggle="tooltip" And add a dropdown
<ul class="nav navbar-nav">
<li class="btn btn-sm dropdown" id="example" data-toggle="tooltip" data-placement="right" title="Test Tooltip" >
<a id="dropdown" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Im a drop down with a tooltip <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdown">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Link or whatever</a></li>
</ul>
</li>
</ul>
$('#example').tooltip();
http://jsfiddle.net/h56xw8wq/67/

Javascript how to put a checkmark for the list item that was picked

I have this html code. There is two buttons each of the buttons have list item under them. Here is the html code:
<div class="col-xs-8">
<div class="dropdown pull-left">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
View
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a data-bind="click: function() { format('sgml_as_html') }">
Show Tags
</a>
</li>
<li role="presentation">
<a data-bind="click: function() { format('html') };">
Quick View
</a>
</li>
<li role="presentation">
<a data-bind="click: function() { format('show_link_targets') };">
Show Link Targets
</a>
</li>
<li role="presentation">
<a data-bind="click: function() { format('show_all_link_targets') };">
Show All Link Targets
</a>
</li>
</ul>
</div>
<div class="dropdown pull-left" style="margin-left: 10px;">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdown_menu_preview" data-toggle="dropdown" aria-expanded="true">
Preview
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdown_menu_preview">
<li>
<a data-bind="click: function() { format('bwd_preview') };">
BWD Preview
</a>
</li>
<li>
<a data-bind="click: function() { format('blaw_preview') };">
BLAW Preview (Coming Soon)
</a>
</li>
<li>
<a data-bind="click: function() { format('print_preview') };">
Print Preview (default Notif Format)
</a>
</li>
</ul>
</div>
</div>
I would like to see how in java script i can add a check mark for the list item thats picked. Here is the html Unicode character i would like to use the check mark listed in the link: http://www.w3schools.com/charsets/ref_utf_dingbats.asp
figured it out. You have to do something like this.
<span data-bind="visible: format() == 'show_link_targets'"><i class="fa fa-check"></i></span>

Categories