We Keep Coding

Change aria-expanded="true" to false on page load

This is the button that triggers the side menu open / close on Moodle boost theme. I am trying to keep the menu hidden by default on page load.
So, I need to set <button aria-expanded="true" to <button aria-expanded="false" on page load. However, all the Javascript snippets I have tried need the element to have an 'Id' or a 'Name'; and this button has neither.
Question : How to I change the <button aria-expanded="true" to <button aria-expanded="false" on page load - without changing the source code of Moodle ?
<button aria-expanded="true"
aria-controls="nav-drawer"
type="button"
class="btn nav-link float-sm-left mr-1 btn-secondary"
data-action="toggle-drawer"
data-side="left"
data-preference="drawer-open-nav">
<i class="icon fa fa-bars fa-fw "
aria-hidden="true" aria-label="">
</i>
<span class="sr-only">Side panel</span>
</button>
Tried so far : I have searched if someone has done this already. Could not find anything. Tried several onload Javascript snippets, but nothing worked. Will appreciate some guidance & help.

You can look for the icon or a more specific element since the icon can be used more than once (or select it with :nth-child) and look up the previous element with jQuery. Then change the attribute of the button accordingly.
$('.icon fa fa-bars fa-fw').prev().attr("aria-expanded","false");

Below is the link to my codepen solution written in pure javascript and here is the explanation:
var btn = document.querySelectorAll("button"), dropdownBtn;
window.onload = function(){
for (var i=0; i<btn.length; i++) {
if(btn[i].getAttribute("data-action") == "toggle-drawer") {
console.log(btn[i]);
btn[i].setAttribute("aria-expanded", "false");
break;
}
}
};
Since you don't have any unique class or id o your button so went ahead and assumed that any one of the data-attribute on your button is unique (in this case data-action). Also, I assumed that your HTML document has many buttons hence I selected all the buttons and then iterated all over them to find the data-action attribute and as soon as I found it I set its aria-expanded value to false and exited the loop.
And all these happened while the document is loading.

How to toggle one of many links with icons using JavaScript

I have several dynamically created links which rendered as buttons and the buttons texts are replaced with icons. I need to toggle one of the link button icons when clicked. The method that I am using is not working out. See code below: I do not want to use JQuery at this time unless it’s within a function.
<a class="button" onclick="command('removeFormat');" title="Remove Format"><i class="fas fa-eraser"></i></a>
<a class="button" onclick="command('fullScreen');" title="Full Screen"><i class="fas fa-expand"></i></a>
<a class="button" onclick="doToggleView();" title="Source"><i class="fa fa-code"></i></a>
<a class="button" onclick="submitForm();" title="Save"><i class="far fa-save"></i></a>
//JS
function command(cmd){
if(cmd == 'fullScreen'){
$(".fa-expand").toggleClass('fa-expand fa-compress');
}else{
$(".fa-compress").toggleClass('fa-compress fa-expand');
}
}
I also try using the following codes:
$("i").toggleClass('fa-compress fa-expand');
$("a .button").find("i").toggleClass('fa-expand fa-compress');

This is the fix to resolve the issue.
function command(cmd){
$('i.fas').toggleClass('fa-expand fa-compress');
}

Clicking a button/href with JavaScript/Jquery by class name

I'm trying to click a button that brings up an edit screen on the same page.
Eg. Click "edit user", edit screen pops up on the same page without redirecting, change name, save. This button does not redirect to a new page.
The code for this button is the following:
<i class="fa fa-pencil"></i> Edit
For some reason I can click every other button on this website that's in the same exact form but I can't click this one. There are no IDs at all so calling by the class name is the only other method I know.
This is what I've tried:
setTimeout(function() {
document.getElementsByClassName(" btn btn-xs btn-inverse btn-modify")[0].click();
}, 3000);
I tried using some Jquery instead as well but no luck. Am I doing something wrong or is this all that I can really do? The other buttons I clicked either redirected me to a different site or just brought up some information on the same screen.
Thanks in advance.
Edit:
It seems that when I try iterating through the different buttons, who all have similar starting class names, I can iterate and click every button except for the edit button. So it's safe to assume that this isn't an issue with the code, so thank you everyone for the help and suggestions.
Edit #2:
Here is the code for all three buttons:
<div class="btn-group"><i class="stm stm-goog"></i> &nbsp
<i class="fa fa-pencil"></i> Edit
<i class="fa fa-bar-chart"></i><button type="submit" class="btn btn-xs btn-danger btn-submit"><i class="fa fa-trash-o"></i></button></div>

When searching for elements by class, it's better to use:
document.querySelector(); // Finds first matching element only
and
document.querySelectorAll(); // Finds all matching elements
instead of document.getElementsByClassName() as this returns a "live node list" and hinder performance.
When searching for classes with these methods, remember to include the dot (.) to signify classes and when multiple classes are used, do not include spaces. The spaces are only used when setting multiple classes.
Also, if there is only one class that is unique to the element you wish to find, you only need to search on that one class.
Lastly, only use a elements for navigation. If you simply need something to click, just about any object can have a click event handler.
var edit = document.querySelector(".btn-modify");
edit.addEventListener("click", function(){ console.log("clicked")});
setTimeout(function() {
edit.click();
}, 3000);
// Addtional test
var edit = document.querySelectorAll(".btn.btn-xs.btn-inverse")[1];
edit.addEventListener("mouseover", function(){
console.log("moused over");
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="btn-group">
<a href="https://google.com" target="_blank" class="btn btn-xs btn-inverse">
<i class="stm stm-goog">X</i> <!-- <-- You missed a semi-colon here. -->
</a>
<a href="#" data-id="29508"
class="btn btn-xs btn-inverse btn-modify">
<i class="fa fa-pencil"></i> Edit
</a>
<a href="#" data-page-modal="https://*randomwebsite*.com/manage/stats/301&q=11"
class="btn btn-xs btn-inverse">
<i class="fa fa-bar-chart">X</i>
</a>
<button type="button" class="btn btn-xs btn-danger btn-submit"><i class="fa fa-trash-o"></i>TEST</button></div>

Because you are trying to select the element by its class you need to loop through the elements.
So if you wanna use jQuery you would do like so:
$(".btn-modify").each(function(){
$(this).click(function(){
your code here
});
});

If you want to fetch the element having all the class, try this:
JQuery
$(".btn.btn-xs.btn-inverse.btn-modify")
Plain JavaScript
document.querySelectorAll(".btn.btn-xs.btn-inverse.btn-modify")
Giving a space in between a class names in a css like selector meant that (next one) is a nested element in any depth. use . to indicate its a class, and write them together (without a space) you are searching for elements having all the lasses. And getElementsByClassName is not a css like selector, its can take only a class name and all those element having that class.

Angularjs - Making a button behave like a checkbox

Im trying to make ngstyle give an interface a list view for the users easily and have encountered an issue someone may be able to assist with.
I am trying to use ngstyle and ngmodel to both alter the style and hide icons when a button is clicked, ideally I would like a button that allow you to switch between list and tile view modes.
Here is the checkbox system as it stands (which is clunky and not user friendly, but works).
<p style="color:black; font-size:14px; margin-left:50px;" class="label">List View
<input type="checkbox" ng-model="visible" aria-label="Toggle ngShow" style="margin-left:5px;" ng-click="myStyle={width:'100%', height:'30px', 'text-align':'left', top:'7px', 'font-size':'14px'}">
</p>
<p style="color:black; font-size:14px;" class="label">Tile View
<input type="button" ng-model="unchecked" aria-label="Toggle ngShow" style="margin-left:5px;" ng-click="myStyle={}">
</p>
And here is what ive done to the icons so they hide when checked:
.hideItem {
visibility: hidden;
}
<i ng-class="{'hideItem': visible}" class="icon fa fa-bookmark-o"></i>
What I need is for preferably a single button that is "Change View" which accomplishes the same task Im achieving here but easier.
Any assistance or ideas would be greatly appreciated.
Mant thanks in advance

You could use ng-show directly as it is a directive built into Angular to toggle state between two buttons - the tile view button and the list view button. The one that is displayed can be toggled by an expression
<button type="button" ng-model="unchecked" ng-show="expression" ng-click="changeView()">List View</button>
<button type="button" ng-model="unchecked" ng-show="expression" ng-click="changeView()">Title View</button>
The expression in ng-show if truthy will display the button and if falsy will hide the button. You can use the same expression in each of these button tags and just invert the expression using !
In the Javascript, you would toggle the expression to/from truthy with changeView()
Here is a link to the documentation on ng-show:
https://docs.angularjs.org/api/ng/directive/ngShow

Ended up using ng-class as below:
<ul uib-dropdown-menu role="menu" aria-labelledby="simple-btn-keyboard-nav" class="dropdown-menu">
<li role="menuitem"><a ng-click="tog=1" style="text-transform: initial;" uib-tooltip="New List View" ng-model="tileView">List View</a>
<!--a(ng-click="myStyle={width:'100%', height:'30px', 'text-align':'left', top:'5px', 'font-size':'14px', 'margin-left':'5px',}" style="text-transform: initial;", uib-tooltip="New List View", ng-model="listView") List View-->
</li>
<li role="menuitem"><a ng-click="tog=2" style="text-transform: initial;" uib-tooltip="Original Tiled View" ng-model="tileView">Tile View</a></li>
</ul>
And bound it using the following:
<a uib-tooltip="{{item.Title}}" ng-repeat="item in linkList = (WorkspaceCtrl.workspaceLinkStore.list | filter:{Active:true} | limitTo:WorkspaceCtrl.itemsPerCategory)" ng-href="{{item.Url}}" target="_blank" ng-class="{items:tog==1}" class="item">
<p class="title">{{item.Title}}</p></a>

Changing Bootstrap Glyphicon on click

I'm wanting to swap the second class of Bootstraps 'glyphicon' span, but instead of toggling the class, It's adding it behind, thus not changing the class at all.
I'm new(ish) to jQuery / Javascript and I just can't get my head around this.
Heres the
<nav class="navbar navbar-top" style="position:fixed; width:100%;">
<a class="navbar-brand" href="#">Project name</a>
<a class="navbar-brand" href="#" style="float:right;">
<span class="glyphicon glyphicon-tasks" id="whiter"></span>
</a>
And the script is below:
$('.glyphicon').click(function(){
$(this).toggleClass('glyphicon-chevron-up');
I get all the classes instead of just glyphicon-chevron-up, Im getting:
<span class="glyphicon glyphicon-tasks glyphicon-chevron-up"></span>
Removing the glyphicon-tasks class on Element inspect displays the Chevron, so some how it is being blocked and the tasks glyph isnt being swapped.

I think you want to swap glyphicon-tasks and glyphicon-chevron-up. You need to toggle both class like following.
$(this).toggleClass('glyphicon-tasks glyphicon-chevron-up');

This is because your function is set to class, which mean all elements with the given class.
To focus a specific element, provide, for example, an unique ID.
Here, you already got one.
$('#whiter').click(function() {
$(this).toggleClass('glyphicon-chevron-up');
});

I guess this can help
$('.glyphicon').click(function(){
$(this).removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-up');
}

If you want to have a bit more control, use jQuery to its fullest, apply a data variable to multiple glyphicons (chances are that you'll be checkboxes, folder icons, tree icons):
<nav class="navbar navbar-top" style="position:fixed; width:100%;">
<a class="navbar-brand" href="#">Project name</a>
<a class="navbar-brand" href="#" style="float:right;">
<span><i class="glyphicon glyphicon-tasks" data-tasks="firstCollection" data-mycolor="white" data-icontype="taskIcon"></i></span>
</a>
...plus, elsewhere in your page, another glyphicon, for example (this will not be used, affect or be affected by our code):
<i class="glyphicon glyphicon-unchecked" id="checkbox_Analytics" data-foldername="group_Analytics" data-icontype="groupCheckbox"></i>
...while, on the other hand, this will be affected by our code (because of foldername match):
<i class="glyphicon glyphicon-check" data-foldername="2014" data-icontype="childCheckbox"></i>
...and in JS, toggle their values without affecting each and every other glyphicon:
$('i[data-icontype="taskIcon"]').on('click', function() {
$('i[data-tasks="firstCollection"]').toggleClass('glyphicon-tasks glyphicon-chevron-up');
console.log("current state now displays CHEVRON UP (true/false)? ["+$(this).hasClass('glyphicon-chevron-up')+"]");
});
...
$('i[data-icontype="childCheckbox"]').on('click', function() {
$('i[data-foldername="2014"]').toggleClass('glyphicon-check glyphicon-unchecked');
// Notice that you can also access the `data-foldername` variable directly for each element which has it
var layerFolderName = $(this).closest('i').data('foldername');
console.log("Changed glyphicon chevron in: "+layerFolderName);
});
NOTE1: one style of using glyphicons, places them inside <i> tags and references them directly thusly.
NOTE2: "white" is not, in general, a good idea for an id. I recommend another data variable, data-mycolor, which might in turn be germane to your code's logic. In this example, it is set, but not really used.