On button click, Jquery scans for every occurrence of a specified class and then eliminates an extra class associated with them

Apologies if the title is unclear, I am still learning Javascript and Jquery which sometimes makes it challenging to phrase questions correctly.

Here's the scenario:

I have numerous divs all labeled with a class of thumbnail:

<div class="thumbnail">

In addition, some of these classes may be in an expanded state at any point, like so:

<div class="thumnail expanded">

Everything functions properly and they expand as required.

I want to implement logic that triggers when a user clicks on any of these thumbnails to expand them:

$( ".thumbnail a" ).click(function() {
});

This check works well, and I can display a popup upon click that records the thumbnail anchor clicks successfully.

However, I am unsure how to identify instances of thumbnails that also have an expanded class, and then remove that class. I attempted something like this:

$( ".thumbnail .expanded").removeClass("expanded");

Inside the thumbnail click event, but it did not work. I am uncertain about what I am missing here, so any assistance would be greatly appreciated. Thank you!

Answer №1

To remove the space between the two classes, you can use this code snippet:

$( ".thumbnail.expanded").removeClass("expanded");

Answer №2

Great answer from MHardwicks, it definitely works and I've even upvoted it!

To clarify why this solution is effective:

$( ".thumbnail.expanded").removeClass("expanded");

and

$( ".thumbnail .expanded").removeClass("expanded");

The reason the second code snippet does not work is because of the space, which indicates "Class within the other class." For example, if you had

<div class="thumbnail">
  <div class="expanded">Yay, I'm expanded</div>
</div>

In this case, using a space in the selector would target the expanded class inside thumbnail. Since both classes are on the same element, they need to be combined like .thumbnail.expanded in order to properly remove the class.

If you're interested in learning more about CSS Selectors, check out this interactive tutorial called CSS Diner.

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 a multidimensional array, locate the key corresponding to the specified value

I am facing an issue with my code that involves an array containing various fruits with product ID and price as keys for different values. While I am able to retrieve the correct price, I am struggling to get the name of the chosen product. For instance, ...

Main.js in Electron cannot find the NODE_ENV environment variable

Currently, I am in the process of developing an application which involves: React 16.4.0 Electron 2.0.2 Webpack 4.11.0 After successfully compiling and running the app using webpack (webpack dev server), my focus now shifts to showing only Chr ...

What is the best way to increase the spacing between inline-block elements?

Just to clarify, I am not looking to delete space between inline-block elements - rather, I want to insert it. My goal is to create a grid of menu items that can accommodate 2, 3, or 4 items per row, and I hope to achieve this using media queries. Is the ...

Struggling to locate the origin of this mysterious border

After thoroughly inspecting and manipulating CSS, I am still unable to determine the source of this mysterious border... Mysterious Border Image - The Origin Unveiled Could someone take a look and provide some insights? It seems like the border is encom ...

Unable to remove data from the database, even after successfully sending it

I have encountered an issue with my front end where I can successfully post data into my database, but am unable to delete data from it using the same method. It's strange because deleting data works fine with html forms instead of react, even though ...

Distinguish between the iOS native UIWebView and an iOS desktop web app

When using the navigator.useragent request, I am able to gather information about all browsers or webkits. However, I am having trouble distinguishing between a webapp (iOS desktop bookmark) and a native app iOS webkit as they both provide the same info ...

Utilizing Knockout to Render JSON List Items

Utilizing Knockout.js to dynamically update a view from JSON response has been my current focus. The structure of the JSON is as follows: var data = { "Properties": { "Engine Capacity": "1499cc", "Doors": 3, "Extras": [ "LED lights", ...

Issue with ng-click directive not triggering within an Ionic tag unless using interpolation

When attempting to pass a value to a function on ng-click, I noticed that it works outside of the ionic tag without interpolation. However, I am confused as to why I need to interpolate it within the ionic tag. Here is a sample of the code: <span ng-cl ...

Saving game data from local storage to populate the player leaderboard

I have successfully developed a game in which users can play and their scores are stored locally. However, I am facing a challenge in figuring out how to showcase the scores of all users in a table on the Rankings page. Player Ranking Page <?php inclu ...

Configuring Multer destination dynamically using FormData values in Node.js

I have a scenario where I need to send a file along with some data values using an XMLHttpRequest (xhr) to a Node.js server running Express. To handle multipart data, I am utilizing Multer as bodyParser does not work in this case. router.post("/submit", f ...

Retrieve a subset of fields from a collection of nested documents

My document looks like this: { "_id" : "2", "account" : "1234", "positions" : { "APPL" : { "quantity" : "13", "direction" : "long" }, "GOOG" : { "quantity" : "24", "direction" : "long" } } } I want to retrieve the entire positions object, but only ...

Is the IE7 Modal Dialog Misaligned?

Update After some investigation, I discovered the root cause of the problem. In my code, I was referencing the height of the overlay, which resulted in different values in IE7 compared to other browsers. To resolve this issue, I adjusted the code to refe ...

Show errors related to parsley within a bootstrap tooltip

I am currently working with Parsley 2.0.0-rc5 and I would like to display the error messages using a Bootstrap tooltip. The issue I am facing is that the "parsley:field:error" event fires before the error message is displayed in the error container, maki ...

Having difficulty in correctly formatting the material button and implementing underlines exclusively on tab names with Angular

I am struggling to properly display an Angular Material button and I also need to customize the appearance of an Angular tab. Below is a breakdown of my code. routes.component.html:: <div class="content-wrapper"> <div class=" ...

Achieving peak efficiency: Comparing the execution of actions through dispatching versus passing them as props

I have a technical query. I'm attempting to send a value from a child component to the store by utilizing an action dispatcher inside the child component. This action dispatcher then modifies the state value in the reducer. Would it be wise to pass v ...

What is causing the issue of the page overflowing in both the x and y axis while also failing to center vertically?

I've been trying to align the <H4> styled component to the center of the page using flex-box, but it's not working as expected. I also attempted using margin:0 auto, but that only aligned the H4 horizontally. Additionally, I'm investi ...

Efficiently incorporate JavaScript libraries with corresponding CSS in webpack

Feeling exhausted from downloading js and css libraries manually each time, I decided to explore npm and webpack when starting a react project. However, I encountered some challenges: While using npm install is convenient, I still need to locate where th ...

"Verify in PHP the occurrence of a specific word in an

Is there a way in PHP to determine if the word "asus" exists on specific websites? For instance, I have a list of 4 sites and I want to check if the word "asus" appears on all of them or not. If it does, I need to count how many times it occurs. www.goog ...

The Bootstrap datepicker feature is malfunctioning within the modal popup

I have been attempting to incorporate a datepicker within a modal. While the calendar is displaying correctly, the datepicker options do not seem to be functioning. This is my current code: $('.date').datepicker({ autoclose:true, format: ...

Having trouble updating the state value using useState in React with Material-UI

I have developed a unique custom dialog component using Material-UI const CustomDialog = (props) => { const [dialogOpenState, setOpen] = React.useState(props.dilaogOpenProp); return ( <> <CssBaseline /> <Dialog ...