I'm presented with this particular element:
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
My goal is to utilize jquery (or vanilla javascript) in order to dynamically change the value of aria-expanded to alternate between true and false.
Any insights on how I can achieve this task?
Appreciate your help!
To toggle it, incorporate the use of .attr():
$("button").attr("aria-expanded","true");
For this solution, I have opted to use vanilla JavaScript instead of jQuery.
To achieve the desired effect, I have included CSS styling in the code snippet below that changes the font color of a button to red when its aria-expanded attribute is set to true.
const btn = document.querySelector('button');
btn.addEventListener('click', () => {
btn.setAttribute('aria-expanded', String(btn.getAttribute('aria-expanded') !== 'true'));
})button[aria-expanded="true"] {
color: red;
}<button type="button" aria-expanded="false>Click me!</button>Another option is to utilize setAttribute instead of prop. In this case, you would change the property name to ariaExpanded. The code would then look like this:
$("button").attr("aria-expanded", "true");
Modify Bootstrap Toggle appearance by clicking on an element. Update aria-expanded attribute after click event
$("#navbar-btn-icon").click(function(e) {
var menuItem = $(this);
if (menuItem.attr("aria-expanded") === "true") {
$(".navbar-toggler-icon").addClass('clicked');
}
else if (menuItem.attr("aria-expanded") === "false") {
$(".navbar-toggler-icon").removeClass('clicked');
}
});
Include a close button icon using CSS. Apply changes on click action
.navbar-toggler-icon.clicked{
background-image: url("close-icon.png");
transition: 0.2s ease-in;
}
Setting up JWT with my express app has been quite the challenge! Despite getting most of it working, I've encountered a strange issue. My register and login routes are generating valid tokens and authentication works fine in the '/users' rou ...
I am looking to dynamically update my database based on a condition in JavaScript. Currently, I have been using the following approach: <a href="#" onclick="hello()">Update me</a> <script> function hello(smthing) { if(smthing == true) ...
I need help figuring out how to disconnect a user when the "unload" event is triggered. $(window).bind('unload', function() { $.ajax({ url: "deconnexionUser.php", async: false }); }); The current solution works, but I want to ...
I have been struggling for the past 4 hours to find a solution to scale an image when the browser is resized. The website I am working on uses bootstrap and the image is located in the navbar-brand section. Typically, navbar-brand is used for a logo, but i ...
I've been utilizing the toast feature from Bootstrap, and it works perfectly when displaying a single toast. However, I encountered an issue when trying to display a specific toast, like an error toast, from a list of predefined toasts. It ended up sh ...
I'm attempting to utilize the before on styled components in React, but it doesn't seem to be functioning correctly. Prior to adding before, the background image was displayed, but after its inclusion, the image is no longer showing up; import st ...
Here is the HTML code snippet: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <script type='text/javascript' src='js/jquery-1.10.2.min.js'></ ...
I recently started working with Ajax and tried following a tutorial from this source However, I encountered some issues while trying to make it work. Can someone please assist me with this? Below is the HTML code that I am using: <html> <head ...
I am struggling to maintain consistent image sizes within my Bootstrap gallery. How can I ensure all images are uniform in both height and width? You can view the code on jsfiddle- here. Apologies for the lack of image visibility as I'm currently wor ...
Where should I define a function in a SPA using the options API that will be called from an HTML href? Check out this demo on Codepen where everything works fine: CODEPEN However, when I try to implement it in my single-page application: <templat ...
I've been working on recreating some JQuery tutorials by myself, but I've hit a roadblock. My goal is to create an object that moves from one position to another while changing color when it repeats. I attempted to achieve this by using an array ...
Is there a way for me to avoid having users open a lengthy script just to make simple text changes? I am considering using variables in my index.html document to modify content in my javascript file. For instance: // index.html <script type="text/j ...
<?php mysqli_connect('localhost','example','example'); $result = mysqli_query("blakesdatabase` LIMIT 0, 30 "); $num_rows = mysqli_num_rows($result); // Display the results echo $num_rows; ?> I am in the process o ...
project[col.field][selectedUserRole.value].join(',').length When attempting to use the code above within *ngIf or inside curly braces {{}}, an error occurs: ERROR TypeError: Cannot read property 'join' of undefined This error indic ...
QUESTION: What could be the reason behind my fade in/fade out not functioning as expected? How can this issue be resolved effectively? BACKGROUND STORY: Upon clicking a link, a javascript/jQuery event is meant to display or hide a series of LI's. Pre ...
I'm working with a Google Map InfoWindow and I need to set a border radius for it. Can anyone provide some guidance on how to accomplish this? Below is the code I am currently using: var latlng = new google.maps.LatLng(lat,lng); var myOptions = ...
Currently, I am diving into Angular and endeavoring to develop a Phone Message Log application utilizing directives. The concept is simple - the user inputs a message, clicks a button, and it gets displayed in a "Message" log below. The challenge I'm ...
Consider this JSON structure: { "extends": "core-range", "dependencies": [ "paper-progress", "paper-input" ], "jsdoc": [ { "description": "Triggered when the slider's value changes.", "kind": "event", "name": "co ...
Utilizing Bootstrap 4 gives me the opportunity to incorporate a unique style for the table header. By following this syntax: <table class='table table-bordered'> <thead class='thead-dark'> <!-- etc --> ...
My Simple Todo App lacks the ability to persist multiple record updates simultaneously. The client-side version can be found here: http://codepen.io/anon/pen/bVVpyN Whenever I perform an action, I send an HTTP request to my Laravel API for data persistenc ...