Develop Reference

Foundation Menu button not switching classes

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.

jQuery AddClass/RemoveClass/Attr Isn't Working

There is a nearby location on the property listing page. I want to show is collapsed on the page load.
I tried add/removeclass and attr but didn't work.
Theme dynamically removes "in" to collapseFive class + "collapsed" to panel-title class
Original code, not collapsed
<div class="panel-wrapper yelp_wrapper">
<a class="panel-title" id="yelp_details" data-toggle="collapse" data-parent="#yelp_details" href="#collapseFive"><span class="panel-title-arrow"></span>Yakınlarda Neler Var</a>
<div id="collapseFive" class="panel-collapse collapse in">
Original code, collapsed
<div class="panel-wrapper yelp_wrapper">
<a class="panel-title collapsed" id="yelp_details" data-toggle="collapse" data-parent="#yelp_details" href="#collapseFive" aria-expanded="false"><span class="panel-title-arrow"></span>Yakınlarda Neler Var</a>
<div id="collapseFive" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
Add class
$(document).ready(function(){
$("#yelp_details").addClass("collapsed");
});
Remove class
$(document).ready(function(){
$("#collapseFive").removeClass("in");
});
Attr
$(document).ready(function(){
$("#collapseFive").attr("class", "panel-collapse collapse");
});

I assume this is a boostrap collapse. If that's right, you need to use:
.collapse('show'): hows a collapsible element.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="panel-wrapper yelp_wrapper">
<a class="panel-title" id="yelp_details" data-toggle="collapse" data-parent="#yelp_details"
href="#collapseFive"><span class="panel-title-arrow"></span>Yakınlarda Neler Var</a>
<script>
$(function () {
$('#collapseFive').collapse('show');
});
</script>
<div id="collapseFive" class="panel-collapse collapse in">
<div class="well">
1
2
3
4
</div>
</div>
</div>

Nav bar accordion link not working

I have a nav bar that contains another page of my site, the page listed in the nav bar has a drop down list that is going to be linked to an accordion on the specific page. I'm having trouble implementing it, that if one of the drop down list items is click, then you will be taken to the page and the particular accordion linked to the item will be open.
For testing purposes I only have the nav bar list item "Monitoring" accordion linked right now; when I click "Monitoring" it takes me to the right page, but the accordion is still closed.
Here's my nav bar:
<nav class="navbar navbar-inverse navbar-fixed-top" style="background-color: #6F9824; text-align:center ">
<div class="navbar-header" align="center">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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" style="color:white;" align="center"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" style="color:white;" align="center">
<li>
<a asp-page="/Index" style="color:white;">Home</a>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" style="color:white;">
Centrify
<span class="caret"></span>
<ul class="dropdown-menu">
<li>Centrify Home</li>
<li>Monitoring</li>
<li>Patching</li>
<li>Onboarding</li>
<li>Disaster Recovery</li>
<li>Reporting</li>
</ul>
</li>
</div>
</nav>
Accordion I'm trying to open:
<div id="Accordion1" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="2">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Vault Status
</a>
</h5>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="2">
<div class="card-block">
<div class="form-group">
<label for="exampleFormControlSelect2">Select Environment</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>RTP</option>
<option>OMA</option>
<option>BGI</option>
<option>BG2</option>
<option>CLD</option>
<option>WRKSTN</option>
<option>QA</option>
</select><br />
<button>Submit</button>
</div>
</div>
</div>
</div>
JavaScript:
$(function() {
$("#Accordion1").accordion();
});
function getParam(name) {
var query = location.search.substring(1);
if (query.length) {
var parts = query.split('&');
for (var i = 0; i < parts.length; i++) {
var pos = parts[i].indexOf('=');
if (parts[i].substring(0, pos) == name) {
return parts[i].substring(pos + 1);
}
}
}
return 0;
}
$(function() {
var defaultPanel = parseInt(getParam('panel'));
$("#Accordion1").accordion({
active: defaultPanel
});
});

I don't know if that's what's causing the problem, but the end of you'r <ul> and first <li> is missing on you'r first HTML code

How do you expect your accordion to work if there are no headers? According to jQuery UI documentation, your HTML should look something like
<div id="accordion">
<h3>First header</h3>
<div>First content panel</div>
<h3>Second header</h3>
<div>Second content panel</div>
</div>
but it does not. You need pairs header-content in order for it to work.

collapse in hide or show do it from js

I write some control unit that switch couple of containers by using "collapse" class from bootstrap like list with anchors that has special for my hidden containers "href" attribute, here is example of two list elements that can describe behaviour:
<div id="my_list">
<ul>
<li class="active">
<a onclick="return false" data-parent="#switch_tables" href="#collapse1">One</a>
</li>
<li>
<a onclick="return false" data-parent="#switch_tables" href="#collapse2">Two</a>
</li>
</div>
Then in html code i use some container:
<div id="switch_tables" class="panel">
<div id="collapse1" class="collapse in"> SOME IN HERE </div>
<div id="collapse2" class="collapse"> SOMETHING ELSE</div>
</div>
So when i use this stuff and first elemet of list is active the first container is shown too because i add "in" class after "collapse" class. When I switch to the other list element, then first container should dissappear and the second one should be shown. Of course I has more list links and more hidden containers than just 2 but it's just an example. The thing that I want to do is to prevent default behaviour and to forbid active elemet to hide by clicking on it.
So I switch the "active" list element by clicking on list items and also show or hide exact container that has same id that the list has, so the containers is linked with list items, this thing is done by js code:
$(function(){
$('ul li a').on('click', function(){
$(this).parent().addClass('active').siblings().removeClass('active');
var to_toggle = $(this).attr('href');
$('.collapse.in').collapse('hide');
$(to_toggle+':not(".in")').collapse('show');
});
});
And now I see when I switch between list items, the containers appear and hide correctly.
When I click on second link, I see how first container is hiding and the second one is appear, and vice versa.
Idea is that if there is open containers, the ones that has "collapse in" class should be closed by js, but how to forbid closing an active container?
For example I click on second link in list, my first container is hiding, second one is appear, I click on second link again and second container dissappear so I dont see anything on screen. but the list item is active.
So the question is how to modify js so only one container can have "collapse in" class at a time, and nothing can remove it until the user will switch it to other container so class "in" will move to other container that is coming from anchor attribute "href" and can't be removed in this place?

If you are using bootstrap , so you can use bootstrap collapse feature for example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Collapse</title>
<link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Collapse <small>Bootstrap Visual Test</small></h1>
</div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Collapse one content
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Collapse two content
</div>
</div>
</div>
</div>
</div>
<!-- JavaScript Includes -->
<script src="../vendor/jquery.min.js"></script>
<script src="../../transition.js"></script>
<script src="../../collapse.js"></script>
</body>
</html>

So I solve my problem by point from #Zigri2612 but use little different approach:
$(function(){
$('ul li a').on('click', function(){
$(this).parent().addClass('active').siblings().removeClass('active');
var to_toggle = $(this).attr('href');
$("#switch_tables").find('div').each(function(){
if ( ('#'+$(this).attr("id")) != to_toggle )
$(this).filter('.collapse.in').collapse('hide');
});
$(to_toggle+':not(".in")').collapse('show');
});
});

Here is a working example for collapse hide and show. here the plus and minus icons are changing. you can alter it for your need.
$(document).ready(function(){
// Add minus icon for collapse element which is open by default
$(".collapse.show").each(function(){
$(this).prev(".card-header").find(".fa").addClass("fa-minus").removeClass("fa-plus");
});
// Toggle plus minus icon on show hide of collapse element
$(".collapse").on('show.bs.collapse', function(){
$(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus");
}).on('hide.bs.collapse', function(){
$(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus");
});
});
.bs-example{
margin: 20px;
}
.accordion .fa{
margin-right: 0.5rem;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
</style>
<div class="bs-example">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button type="button" class="btn btn-link" data-toggle="collapse" data-target="#collapseOne"><i class="fa fa-plus"></i> What is HTML?</button>
</h2>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. Learn more.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button type="button" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo"><i class="fa fa-plus"></i> What is Bootstrap?</button>
</h2>
</div>
<div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
<p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. Learn more.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button type="button" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree"><i class="fa fa-plus"></i> What is CSS?</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
<p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. Learn more.</p>
</div>
</div>
</div>
</div>
</div>

how to check if "true or false = expanded area?"

I have the following list in bootstrap
<i class="fa fa-plus rgh-i" data-toggle="collapse" data-target="#field-1"></i>
<i class="fa fa-plus rgh-i" data-toggle="collapse" data-target="#field-2"></i>
<i class="fa fa-plus rgh-i" data-toggle="collapse" data-target="#field-3"></i>
I use bootstrap to toggle a div.
Each element html i has a aria-expanded="true" when I want to show my div and aria-expanded="false" when I want to hide my div.
I want to check if there are already elements that aria-expanded="true"..and whether there next to hide the previous open.
$( "i" ).on( "click", function() {
if(There are elements of that property aria-expanded="true")
{
hide previous item before you open the current one
}else{
//something
}
});
I tried to make an example jsdfiddle but unfortunately we did ... I hope that you have understood what I want to do.
Basically ... I briefly before hiding the previous item to display the next and not be allowed to be open more than one element.
Thanks in advance!

if(this.attr('aria-expanded') === "true"){
// hide previous item before you open the current one
}

You need to use attribute equals selector:
Selects elements that have the specified attribute with a value exactly equal to a certain value
var areaexpandedtrue = $('[aria-expanded=true]');
if(areaexpandedtrue.length){
areaexpandedtrue.hide();
}

you can also get the value first, and then compare.
var value = $('#aria-expanded').val(); // jQuery func.
if (value =='true'){
//do some stuff
}
else{
//do some stuff
}

If you are trying to make accordion in bootstrap then try this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Accordion</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. Learn more.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Bootstrap?</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<p>Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. Learn more.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. What is CSS?</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. Learn more.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
you can write your code by referencing this.

<i class="test fa fa-plus rgh-i" data-toggle="collapse" aria-expanded="false" data-target="#field-1"></i>
This jquery call returns boolean if aria-expanded is true or false, if you use a jquery onclick you can pass the first parameter as this.
$('.test').attr('aria-expanded');
$( ".test" ).click(function() {
if ($(this).attr('aria-expanded')) {
//your code here
} else {
//your code here
}
});