I'm working on converting an existing mobile menu to AMP but noticed that the functionality without AMP is behaving strangely, (note that this is not a question about amp, in fact the amp for this menu and button is functioning correctly).
So the desired functionality is you click the hamburger, it then switches its class and morphs into a cross and the menu is shown. When the cross is clicked the button morphs back to a hamburger and the menu is hidden.
However what is happening is the first time the hamburger is clicked it shows the menu and changes the hamburger to a cross as expected but then when the cross is clicked the menu is hidden but the button remains a cross, clicking the button again will open the menu but the button is now a hamburger. So in effect the menu is working with each click but the button is changing on every 2 clicks.
The site is using wordpress if that matters. Following is a simplified version of the html rendered during each button click. First after page load:
<a type="button" id="menu-toggle" class="menu-toggle offcanvas__menu__toggle" data-toggle="offCanvas" aria-expanded="false" aria-controls="offCanvas">
{content removed for brevity}
</a>
<div class="off-canvas position-right is-transition-overlap is-closed" id="offCanvas" style="top:62px" data-off-canvas="ji0gvo-off-canvas" data-transition="overlap" aria-hidden="false">
{content removed for brevity}
</div>
After the first click:
<a type="button" id="menu-toggle" class="menu-toggle offcanvas__menu__toggle active" data-toggle="offCanvas" aria-expanded="true" aria-controls="offCanvas">
{content removed for brevity}
</a>
<div class="off-canvas position-right is-transition-overlap is-open" id="offCanvas" style="top:62px" data-off-canvas="ji0gvo-off-canvas" data-transition="overlap" aria-hidden="false">
{content removed for brevity}
</div>
After the second click:
<a type="button" id="menu-toggle" class="menu-toggle offcanvas__menu__toggle active" data-toggle="offCanvas" aria-expanded="false" aria-controls="offCanvas">
{content removed for brevity}
</a>
<div class="off-canvas position-right is-transition-overlap is-closed" id="offCanvas" style="top:62px" data-off-canvas="ji0gvo-off-canvas" data-transition="overlap" aria-hidden="false">
{content removed for brevity}
</div>
After the third click:
<a type="button" id="menu-toggle" class="menu-toggle offcanvas__menu__toggle" data-toggle="offCanvas" aria-expanded="true" aria-controls="offCanvas">
{content removed for brevity}
</a>
<div class="off-canvas position-right is-transition-overlap is-open" id="offCanvas" style="top:62px" data-off-canvas="ji0gvo-off-canvas" data-transition="overlap" aria-hidden="false">
{content removed for brevity}
</div>
After the fourth click:
<a type="button" id="menu-toggle" class="menu-toggle offcanvas__menu__toggle active" data-toggle="offCanvas" aria-expanded="false" aria-controls="offCanvas">
{content removed for brevity}
</a>
<div class="off-canvas position-right is-transition-overlap is-closed" id="offCanvas" style="top:62px" data-off-canvas="ji0gvo-off-canvas" data-transition="overlap" aria-hidden="false">
{content removed for brevity}
</div>
Hopefully from the above you can see the pattern. I have to click the menu button twice to toggle the button animations but the menu itself is showing and hiding with each click.
my $(document).foundation() is like this with no options
So does anybody have any ideas what could be stopping the class in the burger button from switching correctly?
Is there another way I should be doing this?
thanks
In the end the mobile menu was redisgned and the issue stopped.
Related
document.write(
'<button class="list" href="#X1" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Home </button>'+
'<div class="collapse list-unstyled" id="X1">'+
'<a href="'+myArray[0][0]+'" class="'+myArray[0][1]+'" > Site 1 </a> '+
'<a href="'+myArray[1][0]+'" class="'+myArray[1][1]+'" > Site 2 </a> '+
'</div>'
);
I have a Navigation Menu with submenus full of links. Whichever page the user is currently in, i want the particular submenu to be expanded (By Default it will be compressed)
In the above code, when the user clicks on a menu item, the submenus will open up. Is there anyway i can open up this submenu without user clicking on it. Using BOOTSRAP SideNav for Navigation, so a bit confused
Setting aria-expanded="false" to aria-expanded="true" does not work
You can add class show to the div.collapse that you want to expand.
Example:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Menu
</a>
<div class="collapse show" id="collapseExample">
<div class="card card-body">
Submenu
</div>
</div>
Someone please help me, how to add "active" class after "careers-menu-container" class and remove existing another active class when click button(a)?.
please check my code below!.
Thanks a lot off.
<div class="container" id="myCollapse">
<div class="col-sm-12 col-md-4 order-sm-1 order-md-1">
<div class="careers-menu-container careers-menu-container__img1">
<a data-toggle="collapse" href="#collapseExtension1" role="button" aria-expanded="false" aria-controls="collapseExtension">APPLY NOW <i class="fas fa-caret-right"></i>
</a>
</div>
</div>
<div class="collapse" id="collapseExtension1" data-parent="#myCollapse">
<p>lorem ipsum</p>
</div>
<div class="col-sm-12 col-md-4 order-sm-3 order-md-2">
<div class="careers-menu-container careers-menu-container__img1">
<a data-toggle="collapse" href="#collapseExtension2" role="button" aria-expanded="false" aria-controls="collapseExtension">APPLY NOW <i class="fas fa-caret-right"></i>
</a>
</div>
</div>
<div class="collapse" id="collapseExtension2" data-parent="#myCollapse">
<p>lorem ipsum</p>
</div>
</div>
$(".collapse.show").each(function(){
// show active class here
});
// Toggle plus minus icon on show hide of collapse element
$(".collapse").on('show.bs.collapse', function(){
// show active class and remove another active class
}).on('hide.bs.collapse', function(){
// remove class here and show another active class
});
You can access .careers-menu-container via .collapse using .parent():
$(".collapse").on('show.bs.collapse', function(){
$(this).parent().addClass('active')
}).on('hide.bs.collapse', function(){
$(this).parent().removeClass('active')
});
I have a bootstrap website. At first, my links were concatenating (e.g. if I were to click on the home index page three times it would show instastatus.live/index.html/index.html/index.html) every time I clicked a link.
The issue has been solved, but now the link won't go through. For example, if I click one of the nav bar items such as "Services", the URL shows the correct address: instastatus.live/services/index.html. However, it won't go to the page until I click on the URL bar and hit enter (only then will it take me to the appropriate page). Otherwise, it does nothing.
<nav class="cb-navbar">
<div class="cb-container">
<div class="cb-navbar-inner">
<div class="cb-navbar-left">
<a href="index.html" class="cb-navbar-back">
<i class="cb-icon -long-arrow-left"></i>
</a>
</div>
<div class="cb-navbar-right">
<div class="cb-navbar-nav">
<a href="/services/index.html" id="navbar-services" class="cb-navbar-nav-item">
<span class="cb-navbar-nav-item-icon">
<i class="cb-icon -cog"></i>
</span>
<span class="cb-navbar-nav-item-text">Services</span>
</a>
<a href="/projects/index.html" id="navbar-projects" class="cb-navbar-nav-item">
<span class="cb-navbar-nav-item-icon">
<i class="cb-icon -bars"></i>
</span>
<span class="cb-navbar-nav-item-text">Projects</span>
</a>
<a href="/contacts/index.html" onclick="yaCounter.reachGoal('contacts')" id="navbar-contacts" class="cb-navbar-nav-item">
<span class="cb-navbar-nav-item-icon">
<i class="cb-icon -contacts"></i>
</span>
<span class="cb-navbar-nav-item-text">Contacts</span>
</a>
</div>
</div>
</div>
</div>
</nav>
I have used Bootstrap collapse for three different div for different requirments.
First Collapse div : I need to change "glypicon-left and bottom icon" of "showing text and hide".
<div class="col-md-12">
<span class="badge">
<span>0</span>
</span>
<span> Function</span>
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1" class="fb_down_arrow">
<span class="glyphicon glyphicon-triangle-bottom"></span>
</a>
</div>
<ul class="fb_list_option collapse in" id="collapse1">
<li>
<input type="checkbox" id="c5" name="cc">
<label for="c5"><span></span>Corporate Real Estate</label>
</li>
</ul>
Second Collapse div : I need to change "glypicon-plus and minus" icon of "showing text and hide".
<li>
<input type="checkbox" id="c92" name="cc">
<label for="c92"><span></span>Construction (###)</label>
<a href="" data-toggle="collapse" data-target="#fb_plus_one" class="" >
<span class="glyphicon glyphicon-plus fb_list_plus_arrow"></span>
</a>
<ul id="fb_plus_one" class="collapse in" aria-expanded="true">
<li>
<input type="checkbox" id="c01" name="cc">
<label for="c01"><span></span>Child 1</label>
</li>
</ul>
</li>
Third Collapse div : I need to change "glypicon-left and bottom icon" and also change Text of "show more" , "less more" of showing text and hide.
See more detail <span class="glyphicon KB_glyphicon glyphicon-triangle-left"></span>
<div class="row collapse in" id="demo1" aria-expanded="true">
</div>
Script:
I am using below script archiving first collapse div requirement.kindly advise how to to archive second & third collapse.
// Collapse Start
$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-triangle-left")
.removeClass("glyphicon-triangle-left")
.addClass("glyphicon-triangle-bottom");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-triangle-bottom")
.removeClass("glyphicon-triangle-bottom")
.addClass("glyphicon-triangle-left");
});
// Collapse End
Please try this
$('.collapse').on('shown.bs.collapse', function(){
e.stopImmediatePropagation()
$(this).parent().find(".glyphicon-triangle-left").first().removeClass("glyphicon-triangle-left").addClass("glyphicon-triangle-bottom");
}).on('hidden.bs.collapse', function(){
e.stopImmediatePropagation()
$(this).parent().find(".glyphicon-triangle-bottom").first().removeClass("glyphicon-triangle-bottom").addClass("glyphicon-triangle-left");
});
My HTML is:
<div id="accordion-container">
<div class="accordion" id="navaccordion">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#navaccordion" href="#collapseMenu">
<strong>My Menus</strong>
</a>
</div>
<div id="collapseMenu" class="accordion-body collapse in">
<div class="accordion-inner">
<div class="navigation" id="navigationcontainer">
<span id="menutree">
MenuTree
</span>
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#navaccordion" href="#collapseQuickLinks">
<strong>Quick Links</strong>
</a>
</div>
<div id="collapseQuickLinks" class="accordion-body collapse">
<div class="accordion-inner">
<div class="quicklinks" id="quicklinkscontainer">
<span id="quicklinkslist">
QuickLinks
</span>
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#navaccordion" href="#collapseQueue">
<strong>Queue</strong>
</a>
</div>
<div id="collapseQueue" class="accordion-body collapse">
<div class="accordion-inner">
<div class="queue" id="queuecontainer">
<span id="queuetree">
Queue
</span>
</div>
</div>
</div>
</div>
</div>
</div>
My example is here: http://jsfiddle.net/pdavis68/Xut4C/2/
If you remove the JavaScript code, you'll notice that the toggling of the collapse operates properly. If you click "Quick Links", "My Menus" closes and "Quick Links" opens.
If you leave the JS in, you'll notice that opening "My Menus" or "Quick Links" doesn't cause anything else to collapse, but if you open "Queue", it will still cause the others to collapse.
It doesn't seem to matter if I use "toggle", "show" or "hide" command in the collapse, it will break the toggling functionality.
Also, in the example, what ought to happen (by my reckoning, at least) is that that "My Menus" should toggle closed (which it does) and then "Quick Links" ought to toggle open (which it does NOT do.)
So, 2 questions:
How do I programmatically show/hide groups without breaking the toggle functionality?
How do I toggle things open?
1.Try to use collapse() with options, the 'parent' is important
$("#collapseMenu").collapse({"toggle": true, 'parent': '#navaccordion'});
$("#collapseQuickLinks").collapse({"toggle": true, 'parent': '#navaccordion' });
Fiddle: http://jsfiddle.net/hieuh25/Xut4C/6/
2.Basically you have 2 ways:
Add class in to that div, e.g: <div id="collapseMenu" class="accordion-body collapse in"> cause that div to open.
Use collapse() with option 'toggle': true as above, when the div is closed.
Hope it helps.
Try activating your content as a collapsible element first. I skimmed over this part when reading the documentation and it really stumped me.
$('#myCollapsible').collapse({
toggle: false
})
After you activate it you can hide and show it as usual.
$('#myCollapsible').collapse('hide');
$('#myCollapsible').collapse('show');
http://getbootstrap.com/javascript/#collapse-methods
You also can add data-parent="#navaccordion" to <div id="collapseMenu" class="accordion-body collapse" data-parent="#navaccordion"> and call without addional key 'parent' like .collapse({"toggle": true});