Unable to toggle class feature

I have a trio of play buttons for a custom player setup, displayed like so:

<div>
  <div class="gs-player">
    <div id="gs1" onclick="play(309689093)" class="fa fa-3x fa-play"></div>
  </div>
  <div class="gs-player">
    <div id="gs2" onclick="play(316017522)" class="fa fa-3x fa-play"></div>
  </div>
  <div class="gs-player">
    <div id="gs3" onclick="play(315363199)" class="fa fa-3x fa-play"></div>
  </div>
</div>

My goal is to achieve the following actions when any of them are clicked:

  1. Remove the active class (identified by fa-pause) from all buttons
  2. Toggle the fa-pause class on the clicked div

This is how I tried to accomplish it:

$(document).ready(function() {
    $('.fa-play').click(function () {
      $('.fa-pause').removeClass('fa-pause'); 
      $(this).toggleClass('fa-pause');          
    });
});

Although it works as intended, there seems to be an issue with the toggle function. It behaves more like an addClass rather than toggling the class off if the same div is clicked again.

You can see the behavior more clearly in this JSFiddle.

Additionally, is there a way to achieve this without relying on a framework?

jquerycss

Answer №1

Try adding .not(this) to prevent removing and toggling the same class back on the element being clicked.

$(document).ready(function() {
    $('.fa-play').click(function () {
      $('.fa-pause').not(this).removeClass('fa-pause'); 
      $(this).toggleClass('fa-pause');          
    });
});

function play () {}; //This is just a placeholder to avoid errors since the full code is not available
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />

<div>
  <div class="gs-player">
    <div id="gs1" onclick="play(309689093)" class="fa fa-3x fa-play"></div>
  </div>
  <div class="gs-player">
    <div id="gs2" onclick="play(316017522)" class="fa fa-3x fa-play"></div>
  </div>
  <div class="gs-player">
    <div id="gs3" onclick="play(315363199)" class="fa fa-3x fa-play"></div>
  </div>
</div>

Answer №2

Avoid manually removing the 'fa-pause' class from $('.fa-pause'), use toggle instead:

$(document).ready(function() {
    $('.fa-play').click(function () {
      $('.fa-pause').not(this).removeClass('fa-pause');
      $(this).toggleClass('fa-pause');          
    });
});

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 horizontal scrollbar is not displaying

(RESOLVED) Currently, I am developing a movie app that displays film titles through an Accordion feature using Bootstrap. Specifically, I have created an Accordion that showcases movies added to a favorites list. The intention is for this favorites secti ...

htmlcssbootstrap-5

Dynamically change the fill color of an SVG using styled-components

I've been attempting to target the fill property of my SVG using CSS in styled-components without any luck. Here is my SVG: <svg width="65" height="19" viewBox="0 0 65 19" fill="none" xmlns="http://www. ...

javascriptcssreactjssvgstyled-components

CSS-Enabled Panels held in place with Draggable Feature

Currently immersed in my first ASP.net/HTML/CSS Application, I am exploring the realm of draggable panels using the Ajax-Control-Toolkit. So far, it's been a successful endeavor as I have managed to implement a single panel into my application! As de ...

htmlcssasp.netajaxcontroltoolkit

Loading an animated SVG sprite file in real-time

Recently, I received an SVG sprite file from our designers to use in my app. The specified convention is to load the sprite at the top of the <body> element and then render icons using a specific code snippet: <svg class="u-icon-gear-dims"> ...

javascripthtmlcsssvg

Manipulating contextual selectors

Have you ever tried reverting or overriding attributes from contextual selectors? .card { padding-top: 20px; ... } .card .card-header { padding: 0 20px; } .card .card-header.news { padding-top: 0px; } Do you think it's possible to elimina ...

cssinheritancecss-selectors

Submitting via AJAX upon submission

I've implemented the following code in my comment.php: <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script type="text/javascript"> $(function() { $('#reset_form').cl ...

phpjqueryajax

Adjusting the Underline Navigation Effect with jQuery

My current setup includes a basic navbar with an up arrow that slides underneath it when a navigation title is clicked. The arrow initially rests between two nav titles, and when one of them is clicked, some text also slides in. I am looking to implement ...

jqueryhtmlcss

Using CSS nth-child to create a two-column checkers layout

I have formulated a form on my website that divides into two columns by using floats. I am interested in creating a "checkered" effect for these columns. Can anyone guide me on how to utilize nth-child to achieve this design layout? For reference, please c ...

css

How can you use mouseover events to display a popover and manipulate the div id?

In my scenario, I have multiple div elements and I want to display separate popover for each div. Initially, the popover is not shown on the first mouseover event but works perfectly on subsequent attempts. Below is the code snippet: $(document).read ...

javascriptjquerytwitter-bootstrappopoverbootstrap-5

Verify if the second list item contains the "current" class

When displaying a list of blog items on the blog page, I am using grid-column: 1 / -2;. In the first row, the first blog item spans two columns while the second and subsequent rows display three items in each row. This setup works well, but when moving to ...

htmljquerycss

Plugin using jQuery that adds a UserVoice-inspired feedback tab to any webpage

Does anyone know of a jQuery plug-in that can replicate the fixed position tabs often seen on websites, where the tab is affixed to either the left or right side of the webpage? If you're looking for an example, UserVoice offers a script to add a fee ...

jqueryplugins

Arranging buttons that are generated dynamically in a vertical alignment

Currently, I am in the process of creating a webpage for various items, and everything is going well so far. However, I have encountered an issue while attempting to vertically align the buttons that I am generating using JavaScript within the document. I ...

javascriptjqueryhtmlcss

Searching dynamically using class names with JQuery

I am seeking to create a dynamic search input based on the class names within the span tags. However, I am struggling with displaying the class name that I have identified. My goal is to show the class names that match the entered value in the input on the ...

javascripthtmljquerycss

How can I implement a dynamic sidebar drawer in Bootstrap for my navbar?

Is it possible to achieve a layout similar to this example: I've come across some online examples using different versions of bootstrap, but they tend to alter the css too much, making it harder to grasp the concepts of bootstrap. I am curious if it ...

htmlcsstwitter-bootstrapbootstrap-4web-frontend

Vertical Alignment Challenge in Bootstrap Container

I'm struggling with formatting my simple website. I have a navbar, footer, and a centered container where I want to display text and buttons. However, I can't seem to get the elements to appear on separate lines - I want the text on one line and ...

htmlcssbootstrap-4

Styling Easy-Autocomplete with jQuery

I am currently working on integrating autocomplete functionality using the jquery easy-autocomplete plugin npm install --save easy-autocomplete I am facing two issues related to its styling. The results are being displayed in a bulleted list format. I ...

jquerycssbootstrap-4laravel-8easyautocomplete

Steps for breaking down a given string into divisions that correspond to an A4 sheet

Within my content, there are various styles applied. For example: This is a <b>bolded</b> word. I am seeking a solution to divide this long string into smaller sections that would fit on an A4 page accurately. The goal is to maintain the integ ...

javascripthtmlcssionic-framework

What is the best way to compare a string with a specific object key in order to retrieve the corresponding value?

I'm looking to achieve a relatively simple task, or at least I think so. My goal is to compare the pathname of a page with key-value pairs in an object. For example: if("pathname" === "key"){return value;} That's all there is to it. But I&apos ...

javascriptjqueryarraysobject

Eliminate the flickering effect on the dropdown menu

Is there a way to eliminate the annoying 'flicker' effect on my menu? Whenever I click on 'Dropdown 1', I notice that Test 1 and Test 2 flicker. My assumption is that this is due to my use of the !important declaration. Any suggestion ...

javascriptjqueryhtmlcss

What could be causing the span tag to not have CSS applied and the background image to not be displaying

The header I have created, shown in the image, is facing two issues. Firstly, I am unable to add ellipsis to the span tag even though I used it. I want the ellipsis to appear when the screen resolution is small. Secondly, the image uploaded is not displayi ...

jqueryhtmlcss