Using Jquery to append a secondary class to an element if it is absent with a class selector

I'm currently working on a website where clicking on an image opens up information about a person in a div. I'm achieving this using toggleClass in jQuery UI. My goal is to close any open div when another one is clicked. I tried using the :not selector like this;

$('.teamMember').click(
    function(){
        $('.teamMemberContent:not.teamInactive').addClass('.teamInactive');
        var teamMemberID = $(this).attr('data-teamMember');
        $('#'+teamMemberID).toggleClass('teamInactive');
    });

However, I am not sure if I am using the :not correctly in this context. Any guidance would be highly appreciated.

Here is a snippet of my HTML code;

<div class="teamWrapper">
  <div id="teamHeader">
    <h1>Meet Our Team</h1>
  </div>
  <div class="teamMember" data-teamMember="teamDavidContent">
    <div class="teamImageWrapper">
      <img src="images/team/dave.jpg">
    </div>
    <div class="teamMemberName">
      <h3>Name</h3>
      <h3>Big Shot</h3>
    </div>
  </div>
  <!-- Rest of the team member sections here -->
</div>

Shown above is just a portion of the full HTML structure. The complete code can be accessed using the provided JSFiddle link for better understanding.

Please feel free to provide any insights or assistance with implementing the desired functionality. Thank you!

jqueryhtmlcss

Answer №1

Instead of determining which one is not active, you can simply utilize the one that is and locate its siblings using .siblings(). Next, apply the class .teamInactive

$('#'+teamMemberID).toggleClass('teamInactive').siblings(".teamMemberContent").addClass('teamInactive');

FIDDLE

Answer №2

Here is a correct CSS selector for you to use: 

.teamMemberContent:not(.teamInactive)
. Give it a try and see if it works for your needs. Additionally, remember not to include a dot in the addClass method:

$('.teamMemberContent:not(.teamInactive)').addClass('teamInactive');

Answer №3

To achieve the desired functionality, you can make use of the "teamMember" class and apply the "teamInactive" class to all elements with that class.

$('.teamMember').click(
    function(){
        $('.teamMember').addClass('.teamInactive');
        var teamMemberID = $(this).attr('data-teamMember');
        $('#'+teamMemberID).toggleClass('teamInactive');
    });

This approach will effectively hide every div at first and then allow you to selectively enable the specific one you desire.

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

Add a distinctive iterator to the div ID within the script

I am facing an issue with a script named widgets.php that inserts tabs of content into modals on my page. While visually it works, the functionality is limited to only the first modal on the page. I believe adding a loop to this script can solve the proble ...

phphtmlloopsiterator

Styling X and Y axis font color in charts using JavaFX 2.x CSS

Is there a way to change the font color of both X and Y axes? In my search through the css reference for fonts, I only found properties like font-size, font-style, and font-weight. font-size, font-style and font-weight I attempted to use -fx-font-color ...

cssfonts

Issue encountered when integrating AJAX with PHP and HTML5 form

I've been working on solving a puzzle involving a contact form that uses AJAX and PHP. I decided to try reverse engineering the PHP code from this page (). However, when testing it out, the message gets stuck at "sending message...." after clicking "S ...

phpajaxhtmlcontact-form

Is there a way to make the div visible with just one click instead of two?

var sections = ["intro", "content"]; var visibleSectionId = null; function toggleVisibility(sectionId) { if (visibleSectionId == sectionId) { visibleSectionId = null; } else { visibleSectionId = sectionId; } hideInvisibleSe ...

javascriptjqueryhtmlcss

Exploring the process of populating an array using jQuery

i am developing a mobile app and need to populate an array with values from checkboxes. here is my code snippet: if (row.flatdescription == flatdescription) { if (row.receiptno == 0){ items.push('<input type="checkbox" name="code_&apo ...

jqueryarraysfill

Receiving the result of a processed aspx page with a slight delay

My ASPX page contains some JavaScript code: <script> setTimeout("document.write('" + place.address + "');",1); </script> The issue arises when trying to retrieve the output from another page using a query string. Instead of gett ...

c#asp.netjavascripthtml

Ensure that modifications to the table are saved using an ajax-generated field

I'm currently working on implementing a dynamic form that allows an administrator to add new entries into a MySQL table by clicking the add button ( + ). However, I am facing an issue where the added line appears inactive. Despite entering data into t ...

phpjquerymysqlajax

CSS: Creative ways to switch up background hues within a grid layout

Im working on a project with a similar layout to this https://i.sstatic.net/okRL1.png I am trying to achieve a chessboard effect in my grid layout, where the last element of one row has the same background color as the first element of the next row. I h ...

htmlcssgrid

conducting a validation using ajax when submitting

Currently, I am exploring the implementation of AJAX validation within a submit() handler for a web form. The AJAX functionality is executed using $.ajax() from jQuery. While setting async: false yields successful results, it triggers a deprecation notice, ...

javascriptjqueryajaxasync-awaitonsubmit

Unable to utilize jQuery within the NetBeans IDE

Whenever I try to include a jQuery file in Netbeans like this: <script type="text/javascript" src="js/jquery-1.3.2.js"> my code doesn't seem to work. However, when I use the following method: <script type="text/javascript" src="http://ajax ...

javascriptphpjquerynetbeans

issue with adding day in fullcalendar

It's strange that when I add an event that is not an allDay event, it still gets set as an allDay event. Here is the JSON code: [{"id":"1","agent_id":"1","customer_id":"0","title":"Doctors","text":"This is a test calendar","start":"2012-01-12 10:20: ...

jqueryjsonfullcalendar

The JQuery library in Mygento seems to be malfunctioning and not working

I am looking to implement Jquery UI on my Magento website and have installed Mygento JQuery, which includes the jQuery UI module. However, I am encountering an error stating jQuery is not defined. Can someone guide me on how to properly utilize the Mygent ...

jqueryjquery-uimagento

Is it feasible to alter cookie data within a jQuery ajax call?

I'm currently developing a Chrome extension that enables users to capture all HTTP requests for a specific website, edit components of the request, and then send it again. My plan is to utilize jQuery's ajax function to design and dispatch the a ...

javascriptjqueryhttpcookiesgoogle-chrome-extension

Error encountered in dynamically generating JSON due to an unterminated string literal

I am attempting to create a JSON variable to pass to a slideshow plugin. Here is the code found within the head section: <script type="text/javascript"> var photos = []; {% for service in company.services.all %} photos.push({ ...

javascriptjquerydjango

What could be causing the issue of receiving an empty request when attempting to send data to the controller using ajax in Laravel?

Hello everyone, I am currently facing an issue with posting data to the controller using Ajax in Laravel. The problem is that even though the data I am sending is visible when I use console.log(name), the request received by the controller is empty. Here ...

phpjqueryajaxlaravel

Enhancing search functionality with jQuery and Ajax

How can I create a window below a search bar to show search results with names and images? For now, using a placeholder object with information like this: data: "{one : 'test',two: 'test2' }" I have a basic understanding of jQuery, bu ...

jqueryajax

I am facing an issue with the Options functionality in Materialize, and the remove method does not seem to work when I am using the

Having a little trouble appending options in a materialize select for my project. Can someone take a look at my code snippet below and provide some guidance on what changes I should make? Thanks! $(document).ready(function() { $(".condition").click(fu ...

javascriptjquerycssangularjsmaterialize

Tips for emptying form fields when sliding up in jQuery

I have created a user-friendly form for booking hotel accommodations. Users can easily select the number of adults and children from dropdown menus. Additionally, the form dynamically generates dropdowns for specifying the ages of children once selected. ...

phpjquery

Ways to display two horizontal scrolling menu bars

I am in need of displaying two horizontal scroll menu bars on my website. After some research, I came across a custom horizontal scroll menu with left and right arrows. https://jsfiddle.net/c5grnve6/ While it works well with only one scroll menu on the p ...

javascriptjqueryhtml

Utilize HTML5 to enable fullscreen functionality for embedded SWF files

I have implemented a function that handles the click event of a button to toggle a DOM element into fullscreen mode. The function works well, but I am facing an issue when there is another div containing a swf inside the main div. var elem = document.getE ...

javascripthtmlflash