Having Trouble with jQuery toggleClass

I'm currently working on a project where I have implemented a button that displays a menu when clicked. I am attempting to change the color of the button when it is active, however, the toggleClass function is not behaving as expected. Below is the code snippet that I am using.

$(".services-btn").click(function() {
  $(this).toggleClass("active-btn");
});
div.services-btn {
  background-color: black;
  color: #f9f9f9;
  cursor: pointer;
  float: left;
  margin: 10px;
  padding: 15px 0;
  text-align: center;
  width: 80px;
}
.active-btn {
  background-color: darkred;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="services-btn mobile">Services</div>

jqueryhtmlcss

Answer №1

Here is an updated CSS code for you to use:

div.services-btn {
    background-color: black;
    color: #f9f9f9;
    cursor: pointer;
    float: left;
    margin: 10px;
    padding: 15px 0;
    text-align: center;
    width: 80px;
}

div.services-btn.active {
    background-color: darkred;
}

The issue was with the class name in your jQuery. Make sure you are adding the .active class and not .active-btn as mentioned in your CSS code. Alternatively, you can also change your jQuery to add the .active-btn class and keep your CSS code unchanged for it to work properly.

Answer №2

Make sure to add the active class to your .service-btn element and customize its appearance using CSS.

.services-btn {
    background-color: black;
    color: #f9f9f9;
    cursor: pointer;
    float: left;
    margin: 10px;
    padding: 15px 0;
    text-align: center;
    width: 80px;
}

.services-btn.active {
    background-color: darkred;
}

There seems to be an error in your jQuery code. 

$(this.toggleClass("active-btn"))
should be used for toggling a menu or any other element you want to manipulate.

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

Is it possible to use display:grid with a parent element set to a height of 100%

Why doesn't the display:grid property stretch my content to the height of this column? The HTML structure row - col-6 is created using Bootstrap. I am aware that I can manually set a specific height for the parent container, but I would prefer not to ...

htmlcssheightcss-griddisplay

Experience the captivating AUTOPLAY feature of the mesmerizing FULLSCREEN SLIT SL

I am currently utilizing a slider that is functioning well, however I am encountering an issue with autoplay. Whenever I click on the navigation arrow or Nav dot at the bottom of the slider, the autoplay feature stops working. For more information, please ...

javascriptjqueryhtmljquery-slider

Tips for rendering the stencil as invisible and disabled while still allowing other features (such as rotating and flipping) to remain enabled within the react-advanced-cropper

I am facing a challenge where I need to hide and disable the stencil and overlay in react-advanced-cropper, while keeping all other features like rotation and flipping enabled. Is there a specific property in this library that allows me to disable the st ...

javascriptcssreactjsimage-cropper

Modify the input field in the datepicker to resemble a button

How can I transform an input field into a button that looks like this rather than this ? The simple switch of tag names doesn't seem to work. Any suggestions on how to achieve this? class MyComponent extends React.Component { componentDidMount() ...

javascriptjquerycssreactjsdatepicker

Toastr service experiencing issues on Internet Explorer browser

While implementing toastr notifications in my Angular application, I encountered an issue with compatibility across browsers. Specifically, the ngx-toastr module functions properly in Chrome and Firefox, but not in Internet Explorer. Interestingly, it wo ...

cssangularngx-toastr

Can a JavaScript function be sent back via AJAX from PHP?

Can a javascript function be returned via Ajax from php? Typically, I would just return a value and handle it in plain javascript. However, since I am working on an Apache Cordova mobile app, I need to approach things differently. account = localStorage.g ...

javascriptphpjqueryajaxcordova

Activate an event on a separate webpage using jQuery or JavaScript

Currently, I am in the process of working on a project with 2 distinct pages: Index Settings On the Settings page, I have implemented a button to close an element and hide it. However, I am encountering an issue where I want the elements on the Index pa ...

javascriptjquerycsseventsevent-handling

Mistakes in the Horizontal Alignment of Bootstrap Forms

I'm having trouble aligning my textboxes with my form in Bootstrap within ASP.NET MVC 4. Despite using the form-horizontal div, my elements are displaying misaligned. How can I ensure that the elements align properly with the labels? <div clas ...

asp.netcssasp.net-mvctwitter-bootstrapasp.net-mvc-5

A div positioned in front of a centrally-located div

Managing a website with numerous headlines can be a challenge. When a user clicks on a headline, a button located 10px to the left of the headline should appear. However, the catch is that the headlines must always remain centered, regardless of whether th ...

javascriptjqueryhtmlcss

CodeIgniter 3 fails to handle jQuery ajax calls

I am currently tackling an ajax request issue in CodeIgniter 3. The task involves clicking on a checkbox to trigger the changVisib() function. Upon reviewing the code snippet, everything appears to be functioning correctly as the alert() is being executed. ...

javascriptjqueryajax

Developing JavaScript objects with functions using JSON

I am looking to create a specific object with the following structure: var myObj={ "rules": { "email": { "required": true, "email": true, "remote": { "url": "check-email.php", ...

javascriptjqueryjson

Updating Button Text Upon Click

I am looking to create a webpage filled with riddles. After each riddle, there will be an answer button that, when clicked, reveals the answer. Clicking the button again should hide the answer. I attempted to implement this functionality using Javascript, ...

javascriptjqueryhtmlcss

How can the hreflang tag be used correctly in a React application that supports multiple languages?

I have a React application with 3 pages(routes) and I support 2 languages (English and Spanish). Should I insert the following code into the <head></head> section of the public\index.html file like this? <link rel="alternate" ...

javascripthtmlreactjsseohreflang

Instead of scrolling through the entire window, focus on scrolling within a specific HTML element

I currently have the following elements: #elementA { position: absolute; width: 200%; height: 100%; background: linear-gradient(to right, rgba(100,0,0,0.3), rgba(0,0,250,0.3)); z-index: 250; } #containerofA { position: fixed; ...

javascripthtmlcssscroll

Harnessing the Power: Ajax Combined with JQuery

I am facing an issue with my function where I make an ajax request, wait for a response, and return a value but the returned value is coming out as undefined. What could be causing this problem? function RetrieveDataFromURL(url){ return $.ajax({ ...

javascriptjqueryajax

Concealing a div based on a condition

Having difficulty concealing a div once a specific condition is met. The condition depends on the user logging into a web application. In my CSS file, I have set the multipleBox div to visibility: hidden, along with other styling attributes like border co ...

javascripthtmlcssajaxjsf

When attempting to transfer data from the parent component to child components, the data is appearing as undefined in the display

I have been working on passing data from a parent component to child components, but I keep encountering an issue where the data is showing as undefined. Below is the code snippet: Parent Component In this section, I have declared the variable part_data ...

htmlangulartypescriptangular5

What is the best way to utilize nav and main-nav in CSS?

Working with HTML and CSS <nav class="nav main-nav"> </nav> Styling with CSS main-nav li{ Padding:0 5% } I am a beginner in HTML and CSS and facing an issue. I noticed that when using main-nav in CSS, I'm not getting the de ...

htmlcssclass

Utilize Angular Material to assign the value of a mat-select component based on the FormControlName property

I am using Angular version 7 and have encountered an issue with a form I am creating. The form includes a dropdown select to choose an option, but when the page loads, the pre-defined value is not showing up. This page is specifically designed for editing ...

htmlangularangular-material

Using Vue.js to pass an image URL as a prop for CSS animation by converting it to a CSS variable

Need help with a component that features a hover animation displaying 4 rotating images: animation: changeImg-1 2.5s linear infinite; @keyframes changeImg-1 { 0%, 100% { background-image: url('images/wel1.png'); } 25% { background-image: ur ...

cssvue.js