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

The Nivo Slider experiences compatibility issues with webkit browsers when used in conjunction with Really Simple History (RSH) technology

I'm in the process of developing a website with AJAX capabilities, utilizing the Really Simple History (RSH) framework to manage back and forward requests. One challenge I've encountered is that when using Nivo Slider for a slideshow feature, it ...

jqueryajaxjsonnivo-sliderrsh

send additional form elements to the AJAX suggestion box script

** shifted to this location: Numerous similar AJAX suggestion boxes without IDs I enlisted the help of a developer to create a jQuery AJAX suggestion box script some time ago, and it has been working flawlessly. Now, I am striving to understand it better ...

javascriptjqueryajax

Guide to customizing color themes using Twitter Bootstrap 3

Recently, I dove into the world of Twitter Bootstrap 3 without any prior experience with earlier versions. It's been a learning curve, but I managed to set up a WordPress theme using it as the framework. All my elements are in place, but they all see ...

htmlcsswordpresstwitter-bootstraptwitter-bootstrap-3

Custom sparkline array

In working on my sparkline chart, I have the following code snippet: <div sparkline="" values="4,4,7,5,9,6,4" data-type="line" data-height="80" data-width="100%" data-line-width="2" data-line-color="#dddddd" data-spot-color="#bbbbbb" data-fill-c ...

javascriptjqueryarraysangularjssparklines

Experiencing a lack of defined or no outcome when outputting the API callback

I am troubleshooting an issue with my script that searches for movie titles from a database. While I receive results in the console without any errors, the renderMovies function is not storing the API movie title, plot, and other details properly in my var ...

javascriptjqueryajaxapi

Looking to add a dropdown feature to my current main navigation bar

I've been struggling to add a drop-down menu to my website's main menu. Every time I try, something goes wrong - sometimes the menu appears inline, other times it completely messes up the layout. Here is the HTML code snippet: <ul class="m ...

javascriptjqueryhtmlcss

How to display an unordered list horizontally in HTML

I'm working on a screen that has filters displayed vertically, but I want to align them horizontally and have the filter options arranged in two columns. I've tried using CSS properties like spacing, clear, and display block, but the checkboxes/l ...

javascriptjqueryhtmlcss

Confirming the authenticity of a newly added user input with the help of jQuery

Within my current project, I have implemented validation features for text boxes. When a user clicks on a text box, the border is highlighted. If they click elsewhere without entering any value, the border turns red and an alert pop-up appears. In additio ...

jqueryhtmlcssvalidation

Troubleshooting issue with JavaScript sorting function failing to arrange elements in ascending

I'm having trouble sorting numbers in ascending order using JavaScript. Here's the code snippet: <h2>JavaScript Array Sort</h2> <p>Click the button to sort the array in ascending order.</p> <button onclick="myFunctio ...

javascripthtml

Tips on styling HTML using a query value in string format

When using ASP.NET razor and SQL Server 2008 R2, I have a local variable declared in the following manner: var tsmMtd = db.QueryValue(" SELECT b.Name, SUM(subtotal) totalSUM FROM DR_TRANS a INNER JOIN Staff b ON a.Salesno = b.Staffno WHER ...

htmlcssasp.netsql-server-2008razor

Enhance user experience with a flexbox navigation bar that dynamically adjusts link heights to ensure

I am struggling with making my navbar links the same height and keeping their text vertically centered, especially when they wrap onto multiple lines on a narrow viewport. While I have achieved vertical centering, I am facing difficulties in ensuring that ...

htmlcssflexbox

Is there a solution for the issue where the :after pseudo-element on a TD in IE9 does not accurately reflect the TD height?

In the design I'm currently working on, there is a requirement for a border around a table row. Due to certain complications, using the border property directly is not an option. In trying to find a solution, I have experimented with two different app ...

htmlcssinternet-explorercss-selectorspseudo-element

The fixed position setting does not anchor the elements to the bottom of a container

When applying the following styles: #fullpage-menu > .gradient { position: fixed; bottom: 0; left: 0; width: 100%; height: 0.3rem; } To the element with ID #fullpage-menu, which is styled as follows: #fullpage-menu { height: 100 ...

javascripthtmlcss

Utilizing jQuery and AJAX for submitting multiple POST requests

Experiencing a problem with posting data via AJAX using a drag and drop interface. The data is being sent to the POST URL as intended, but there's a recurring issue where the POST request occurs twice, causing the processing URL to handle the data aga ...

javascriptjqueryajaxdrag-and-drop

Is there a way to incorporate text fields and input in BootstrapDialog?

Is it possible to include text fields and inputs within this modal using BootstrapDialog without modifying the library? Additionally, can I use $.ajax() inside? <button class="btn btn-primary" id="add_item">New item</button> jquery $('# ...

jqueryhtmlajaxbootstrap-dialog

Retrieve a specific element from a table using the value of another element as a

Is there a way to extract the phone number (located in the second <td>) from this code when the img src is set as picto_telephone.jpg? <tr> <td valign="top"><img src="picto_telephone.jpg" alt="" border="0"></td> <td va ...

jquery

The malfunction of CSS3 effect

I designed a website and used DIV CSS to call an image. .header_bottom_area { background: url(../img/HomepagePanels.jpg)no-repeat scroll center center; max-width: 100%; width: auto; height: 911px; } I would like to have the same image as shown in ...

htmlcss

Using JQuery to locate and substitute occurrences of HTML elements throughout my webpage

Looking for assistance with a JQuery search and replace task involving multiple instances of HTML within a specific DIV element on my webpage. Specifically, I need to change certain items in the textbox to a simpler display format. Here is a snippet of th ...

javascriptjqueryhtml

Utilize the DataTables plugin to arrange a column based on icons with hidden boolean values in rows

I am currently utilizing the DataTables plugin to enhance my HTML table. While I have managed to successfully implement most functionalities, I am facing a challenge with the boolean column. This particular column consists of icons representing X (value 0) ...

javascripthtmljquerydatatables

Play Framework: encountering "Action not found" error in GET route following an AJAX request to PUT or POST route

In the midst of enhancing my Play application with AJAX capabilities, I am following steps 5 (Adding some AJAX actions) and 6 (Invoking actions from Javascript) as outlined in the Zentask tutorial for Play Java. My current approach for initiating a specif ...

javajqueryajaxplayframework-2.0url-routing