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>
Related
i have dropdown menu from bootstrap 4.In adaptive small screen, I have hamburger, there has title dropdown its opens another one dropdown.So, when I open title dropdown to see what inside, dropdown automatically close full dropdown. Here`s code
<nav class="navbar navbar-expand-lg navbar-header">
<div class="container">
<div class="navbar-translate">
<a class="navbar-brand" href="./" rel="tooltip" title="Казахстанский инженерно-технологический университет" data-placement="bottom">
<img src="assets/img/logo_new.png" width="180">
</a>
<button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-bar bar1"></span>
<span class="navbar-toggler-bar bar2"></span>
<span class="navbar-toggler-bar bar3"></span>
</button>
</div>
<div class="collapse navbar-collapse" style="background-color: white;" id="navigation">
<ul class="navbar-nav mr-auto" id="testing">
<div class="nav-item dropdown">
<a class="nav-link dropdown-toggle myclass" data-toggle="dropdown" href="#" id="dropdownMenuButton" role="button" aria-haspopup="true" aria-expanded="false"><?=$m_admission[$_SESSION['lang']]?></a>
<ul class="dropdown-menu">
<a class="dropdown-item" href="?page=undergraduate"> <?=$b_undergraduate[$_SESSION['lang']]?> </a>
<a class="dropdown-item" href="?page=graduate"> <?=$b_graduate[$_SESSION['lang']]?> </a>
<a class="dropdown-item" href="https://kazetu.edu.kz/sites/dl/" target="_blank"> <?=$b_distance_learning[$_SESSION['lang']]?> </a>
<a class="dropdown-item" href="https://college.kazetu.edu.kz/"> <?=$b_college[$_SESSION['lang']]?> </a>
<a class="dropdown-item" href="https://zerde.kazetu.kz/?lang=ru" target="_blank"> <?=$zerde_kazetu_reg[$_SESSION['lang']]?> </a>
</ul>
</div>
</ul>
</div>
</div>
</nav>
</header>
I dont fount answer for my question, so, i just write it without bootstrap on clear html and css xD
I need two buttons along with the toggle button when the navbar is collapsed. As I down want these buttons to be collapsed with menu items. So I have put the buttons inside the button group with toggle button. now the toggle button is not working anymore.
Here is the code. Please let me know what mistake I'm making. Thank you in advance.
<nav class="navbar navbar-expand-md navbar-dark sticky-top" style="background-color: #0a0a0a; margin-bottom: 0 !important; min-height: 60px;">
<div class="container">
<div class="nav navbar-header">
<img src="images/logo.png" class="logo" alt=""/>
</div>
<div class="collapse navbar-collapse flex-column " id="navbar">
<ul class="navbar-nav w-100 justify-content-center px-3">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Courses
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Classes
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
USP
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Contact
</a>
</li>
</ul>
</div>
<div class="btn-group" role="group" aria-label="Basic example" style="color: white;">
<button type="button" class="btn .btn-primary-outline border-right" style="color: white;">Sigh In</button>
<button type="button" class="btn btn-danger"><i style="color: white;" class="fa fa-search" aria-hidden="true"></i></button>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</nav>
here with navbar id
<button class="navbar-toggler" data-toggle="collapse" data-target="#**navbarNav**">
Must be the same here
<div class="collapse navbar-collapse flex-column " id="**navbar**">
also don't forget to call these js on your page
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
The "data-target" on your navbar-toggler button is set to "navbarNav" this needs to be set to the ID of your navigation which is just "navbar".
<div class="collapse navbar-collapse flex-column" id="navbar"> <!-- NOTE: id="navbar" -->
<!-- Navigation List -->
</div>
<div class="btn-group">
<!-- buttons -->
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbar">
<!-- NOTE: data-target = "#navbar" (these should be identical) -->
<span class="navbar-toggler-icon"></span>
</button>
</div>
I am using boostrap 4 drop down menu with tabs inside. Here is the codepin
I found this link useful to stop click event propagation so that the drop down menu does not close on click inside itAvoid dropdown menu close on click inside
But clicking on tabs does not work.
code pin:boostrap 4 tabs inside drop down menu
is there any solution or another approach so that tabs work inside drop down menu
HTML
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
Navbar
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
</button>
<div id="navbarNavDropdown" class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">
Home
<span class="sr-only">
(current)
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Features
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Pricing
</a>
</li>
<li class="nav-item dropdown">
<a id="navbarDropdownMenuLink" class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<div class="container">
<ul id="tabs" class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a id="tab-A" class="nav-link active" role="tab" href="#pane-A" data-toggle="tab">
–A–
</a>
</li>
<li class="nav-item">
<a id="tab-B" class="nav-link" role="tab" href="#pane-B" data-toggle="tab">
–B–
</a>
</li>
<li class="nav-item">
<a id="tab-C" class="nav-link" role="tab" href="#pane-C" data-toggle="tab">
–C–
</a>
</li>
</ul>
<div id="content" class="tab-content" role="tablist">
<div id="pane-A" class="card tab-pane fade show active" role="tabpanel" aria-labelledby="tab-A">
<div id="heading-A" class="card-header" role="tab">
<h5 class="mb-0">
<a href="#collapse-A" data-toggle="collapse" data-parent="#content" aria-expanded="true" aria-controls="collapse-A">
Collapsible Group Item A
</a>
</h5>
</div>
<div id="collapse-A" class="collapse show" role="tabpanel" aria-labelledby="heading-A">
<div class="card-body">
[Tab content A]
</div>
</div>
</div>
<div id="pane-B" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-B">
<div id="heading-B" class="card-header" role="tab">
<h5 class="mb-0">
<a class="collapsed" href="#collapse-B" data-toggle="collapse" data-parent="#content" aria-expanded="false" aria-controls="collapse-B">
Collapsible Group Item B
</a>
</h5>
</div>
<div id="collapse-B" class="collapse" role="tabpanel" aria-labelledby="heading-B">
<div class="card-body">
[Tab content B]
</div>
</div>
</div>
<div id="pane-C" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-C">
<div id="heading-C" class="card-header" role="tab">
<h5 class="mb-0">
<a class="collapsed" href="#collapse-C" data-toggle="collapse" data-parent="#content" aria-expanded="false" aria-controls="collapse-C">
Collapsible Group Item C
</a>
</h5>
</div>
<div id="collapse-C" class="collapse" role="tabpanel" aria-labelledby="heading-C">
<div class="card-body">
[Tab content C]
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
JS
$('.dropdown-menu').on("click.bs.dropdown", function (e) { e.stopPropagation(); e.preventDefault(); });
Is there possible solution ?
The simplest way is to wrap it inside a form since the form will prevent the Dropdown from closing on click...
<nav>
...
<li class="nav-item dropdown">
<form>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
....
</div>
</form>
</li>
...
</nav>
https://www.codeply.com/go/GzekeuWnSg
The other method is using jQuery to like this:
$('.dropdown-menu .nav-tabs .nav-link').on("click.bs.dropdown", function (e) {
$(this).tab('show');
e.stopPropagation();
});
https://www.codeply.com/go/iEDxVGTzAZ
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.
I have this dropdown menu which works great:
<div class="btn-group pull-left">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-map-marker icon-large"></i> Change Site
<span class="caret"></span>
</a>
<ul class="dropdown-menu" id="arSiteList">
<li>
<a href='#'><b>Select a site</b></a>
</li>
<li class="divider"></li>
</ul>
</div>
When the list of dropdown items is longer than the screen, scrolling the mouse wheel will scroll down through the list of items. This is perfect.
However, when I moved the dropdown menu into the nav bar, it stopped working:
<div class="navbar navbar-fixed-top" >
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="http://portal.parworksapi.com/ar/mars/portal/developer">PAR Works</a>
<div class="btn-group pull-left">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-map-marker icon-large" ></i> My Sites <span class="caret"></span>
</a>
<ul class="dropdown-menu" id="arSiteList" style="overflow: scroll;">
<li><a href='#'><b>Select a site</b></a></li>
<li class="divider"></li>
</ul>
</div>
</div>
</div>
The dropdown still opens, but when the list of items is too long it's impossible to scroll through them.
How can I make scrolling work inside the nav bar?
Check all parent elements of your menu on existing "overflow: hidden;" property in CSS