megamenu dropdown bootstrap mobile collapse - html

Question

So I have a dropdown that works and scales down perfectly fine thanks to Bootstrap.
The client however wants the collapse to act like an accordion.
I'm trying to get to something like this. Avada's main nav menu-scaled down into mobile: Note how the 'Home Samples' header goes missing and becomes a toggle with the list items as its dropdown. How could I find out what was used to create this?A push in the right direction would be appreciated.
This is a fiddle of what i got.
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown" id="header1"> Apparel
<ul class="dropdown-menu mega-dropdown-menu row mega-dropdown-menu-1">
<div class="dropimg"><img class="img-responsive" src="images/dropdown.jpg"> </div>
<li class="col-sm-2">
<ul>
<li class="dropdown-header">APPAREL</li>
<li class="dropdown-header_a">ALL PRODUCTS
<ul class="dropdown-menu">
<li>Bottoms</li>
<li>Formal Wear</li>
<li>Golfers</li>
<li>Jackets</li>
<li>Knitwear</li>
<li>Shirts</li>
<li>Sweaters</li>
<li>Tracksuits</li>
<li>T-Shirts</li>
</ul>
</li>
</ul>
</li>
<li class="col-sm-2">
<ul>
<li class="dropdown-header"> </li>
<li class="dropdown-header_a">BRANDS</li>
<li>Altitude</li>
<li>Birdi</li>
<li>Chefworks</li>
<li>Drimac</li>
<li>Flexfit</li>
<li>Lexor</li>
<li>SA Rugby</li>
<li>Underarmour</li>
</ul>
</li>
<li class="col-sm-2">
<ul>
<li class="dropdown-header"> </li>
<li class="dropdown-header_a">CATEGORY</li>
<li>Activewear</li>
<li>Hospitality</li>
<li>Locally Produced</li>
<li>Outdoor</li>
<li>Supporters</li>
<li>Team Wear</li>
<li>Workplace</li>
</ul>
</li>
<li class="col-sm-2">
<ul>
<li class="dropdown-header"> </li>
<li class="dropdown-header_a">CLEARANCE</li>
</ul>
</li>
<li class="col-sm-1">
<ul>
<li class="dropdown-header"> </li>
<li class="dropdown-header_a">SPECIALS</li>
</ul>
</li>
</ul>
</li>
</ul>
In the fiddle. the first in the dropdown, i've tried to make it a dropdown like normal. Is there a way to make it work without the use of java?

Answer 1

[EDITED]
With a little research and patience, I managed to add a slightly similar accordion-like transition effect to the bootstrap dropdown. I also managed to fix a visual bug that happened when the dropdown slided up too fast.
With bootstrap 3, they exposed quite a few javascript events for us to tinker with. The events that we will use are: 'show.bs.dropdown' and 'hide.bs.dropdown'. Learn more about their javascript events. Or check out the Dropdown events.
Inside each event, we will add a few jquery lines to give the dropdown our desired effect. The jquery events are: slideDown and slideUp.
All there is left for you is to overwrite bootstrap's default navbar color and add your own styles to it.
Here is the result (Click the phone icon on the far right): Bootply example
Javascript/Jquery:
$(function(){
//Add OnResize event
window.onresize = myResize;
myResize();
});
//This finction will fire each time the browser is resized
function myResize(){
//Get browser/device height and width
var bWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var bHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
//If viewport is lower than ipad, hence mobile
if(bWidth < 768){
// ADD SLIDEDOWN ANIMATION TO DROPDOWN //
$('.dropdown').on('show.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
// ADD SLIDEUP ANIMATION TO DROPDOWN //
$('.dropdown').on('hide.bs.dropdown', function(e){
e.preventDefault();
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(400, function(){
//On Complete, we reset all active dropdown classes and attributes
//This fixes the visual bug associated with the open class being removed too fast
$('.dropdown').removeClass('open');
$('.dropdown').find('.dropdown-toggle').attr('aria-expanded','false');
});
});
}
}
HTML/Bootstrap navbar:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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="#">Brand</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="dropdown">
APPAREL <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Bottoms</li>
<li>Formal Wear</li>
<li>Golfers</li>
<li>Jackets</li>
<li>Knitwear</li>
<li>Shirts</li>
<li>Sweaters</li>
<li>Tracksuits</li>
<li>T-Shirts</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown">
BRANDS <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Altitude</li>
<li>Birdi</li>
<li>Chefworks</li>
<li>Drimac</li>
<li>Flexfit</li>
<li>Lexor</li>
<li>SA Rugby</li>
<li>Underarmour</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown">
CATEGORY <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Activewear</li>
<li>Hospitality</li>
<li>Locally Produced</li>
<li>Outdoor</li>
<li>Supporters</li>
<li>Team Wear</li>
<li>Workplace</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li>CLEARANCE</li>
<li>SPECIALS</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>