Implementing dynamic button functionality to toggle classes on click event

Within my interface, I have a series of buttons with the following structure:

<button id="btn1" type="button" class="btn btn-default btn-sm margin-left-1">
        <span class="glyphicon glyphicon-chevron-down"></span>
    </button>

    <button id="btn2" type="button" class="btn btn-default btn-sm margin-left-1">
        <span class="glyphicon glyphicon-chevron-down"></span>
    </button>

    ...and so on

I am looking for a way to dynamically remove the CSS class glyphicon-chevron-down upon button click and replace it with glyphicon-chevron-up. This is for a Twitter Bootstrap collapsing feature but I want to display an icon on the button itself. The ID can be embedded either in the button tag or the span tag without affecting functionality. Is there a method to check for applied CSS?

jquerycsstwitter-bootstraptwitter-bootstrap-3

Answer №1

Consider the following solution:

if( $(<#element>).hasClass("glyphicon-chevron-down") ) {
 //Your code here
}

Answer №2

Here is a suggestion you can test out:

$('.btn-default').on('click', function() {
  $(this).find('.glyphicon-chevron-down').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
});

Check out this example - http://jsfiddle.net/9NDyL/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

In Javascript, delete everything following a colon except for specific words

I have an address in the following format: "8 51209 Rge Rd 950 Road: Rural Parkland County House for sale : MLS®# E4125520" What I want to do is remove everything after the colon, but keep "Rural Parkland County" intact. So the modified address should l ...

javascriptjquery

Is it feasible to preserve the HTML form content data even after refreshing the page?

Can someone offer a suggestion that doesn't involve using Ajax? I'm wondering if there is a way to achieve this using JavaScript/jQuery or some other method. Here's my issue: When submitting a page, the action class redirects back to the sa ...

javascriptjqueryhtmlcss

Gradually colorize SVG image using CSS as if filling a progress bar

I am looking to add color to an SVG image rather than using a progress bar. This will be used for an animated infographic. Slowly fill the image below with green color to indicate it is 30% "full".<br> <img src="https://cdn.mediacru.sh/P-WOGKdN ...

jquerycsshtmlsvgprogress-bar

Internet Explorer is unable to support the 'stop' property or method for this object

Upon clicking the submit button, I encountered an error message stating "Object doesn't support property or method stop" in Internet Explorer. However, despite this error, the data was successfully added to the database. Below is the code snippet: f ...

javascriptjqueryasp.net

Experiencing a problem with JQuery Offset when a fixed position is applied to a

My website has a page layout and style similar to the example provided in this JsFiddle. When I use JQuery to click on a button, the content is displayed correctly as shown below: https://i.sstatic.net/V89qa.jpg However, if I scroll down the page first ...

javascriptjqueryhtmlcss

Learning to control the JavaScript countdown clock pause and play functionality

How can I control the countdown timer to play and pause, allowing me to resume at the exact time it was paused? At the start, the timer is set to play. Please keep in mind that the button appears empty because the font-awesome package was not imported, b ...

javascriptjquery

The element will only show up upon resizing (in Safari web browser)

I am facing a problem with a button styled using the class btn-getInfo-Ok <button class="btn-getInfo-Ok">Hello</button> in my style.css file .btn-getInfo-Ok { color:white !important; margin: 0 auto !important; height:50px; bottom:0; ...

javascriptjqueryhtmlcsssafari

Magic chest - triggered upon touch, disengaged upon tap elsewhere

Is there a way to create a div box that triggers a specific event when clicked, but only affects the time when we click somewhere else afterwards? It should be designed so that clicking multiple times in the box does not produce any additional effects. ...

jquery

Swap the content of one div with another div using client-side code only

Currently, I am in the process of developing my personal website. To enhance user experience, I have implemented a vertical navigation bar on the left side of the page. My goal is to replace the content of a specific div with content from other HTML files ...

javascriptjqueryhtmlcss

What is the best method for eliminating the border of an Angular mat-form-field when it is in a disabled state?

I've been attempting to eliminate borders from a mat-form-field when the field is disabled, but despite trying various solutions found online, I haven't been successful in removing the borders from the div. Below is the code snippet: <div ...

cssangularmat-form-field

Is there a clash between ng-if and col col-50?

Currently, I am attempting to create a table using Angular code within HTML. The structure of the table is exactly how I want it to be, and here is the code snippet representing it: <div class="row"> <div class="col col-25">Date</div> ...

htmlcssangularjs

Swapping out images by clicking on a thumbnail, featuring numerous occurrences on a single webpage

I'm currently working on a project where I need to display several large images with corresponding thumbnails. When a user clicks on a thumbnail, I want the larger version of that thumbnail to replace the current large image. While I have successfull ...

jqueryhtmlimage

onload function prevents further URL redirection

After submitting the form "View this product," a function is triggered to retrieve the product id from the form data. Although I can successfully obtain the form_data, the page does not redirect as expected. I suspect that my function may not have been pr ...

javascriptjqueryhtmlforms

The submit button is unable to initiate the ajax function

I encountered an issue with my code while attempting to separate my form function into a different PHP file and utilize an Ajax function to call the form based on the IDs. However, after separating the form function, the submit button no longer triggers th ...

javascriptphpjqueryajax

Loop through the list items using jQuery and retrieve the value of the data-imgid attribute

Multiple li elements have a unique data-id attribute, as shown below: <ul> <li data-imgid="5" class="getMe">some text</li> <li data-imgid="6" class="getMe">some text</li> <li data-imgid="7" class="getMe">some t ...

javascriptjqueryhtml

How to bypass validation for required input in jQuery validate plugin

As an example, consider the <input name="surname" id="surname" type="text">. Sometimes I want to hide this input and make it non-required. My current workaround is to set a value such as "some value" when hiding the input, and then remove this value ...

javascriptjqueryhtmljquery-validate

Enhance your AngularJS skills by incorporating multiple conditions into the ternary operations of ng-class

I am struggling to apply multiple classes when the condition in the ng-class attribute evaluates to true. Here is the code I have attempted so far, but it doesn't seem to be working: <div class="col-md-4" ng-mouseover="hoverButton=true" id="plai ...

javascriptcssangularjsternary-operatorng-class

Unlimited scrolling feature on a pre-filled div container

Looking for a way to implement infinite scroll on a div with a large amount of data but struggling to find the right solution? I've tried various jQuery scripts like JScroll, MetaFizzy Infinite Scroll, and more that I found through Google search. Whi ...

javascriptjqueryhtmlpaginationinfinite-scroll

Turn off VAT for certain product categories only during the WooCommerce checkout process

I am currently using the Timologia for WooCommerce plugin in my Woocommerce store. This plugin is essential for customers in Greece, as it allows them to choose between receiving an invoice or a plain receipt at checkout. The plugin adds a select field wit ...

phpjqueryajaxwoocommercecheckout

Why does ng-checked fail to function properly in AngularJS?

Why won't the checkbox get checked while in edit mode? Here's the HTML I have: <input type="checkbox" ng-model="overallfeedback" ng-change="collectFeedback(overallfeedbackElg, $index)" ng-checked="{{collectlistbla[$index]}}"> In the ng- ...

javascriptjqueryangularjs