What is the best way to ensure that only one div is toggled at a time while using the toggle class function?

Question

What is the best way to ensure that only one div is toggled at a time while using the toggle class function?

$(document).ready(function(){
  $("#items").children().click(function(){
    $(this).toggleClass('clicked');
  });
});

.clicked {
background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='items'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

In the current setup, clicking on a div makes it turn red. However, you can click on multiple divs to turn them all red. How can I modify the code so that only one div is highlighted in red at any given time?

javascript jquery html css

Answer 1

Answer №1

Give this a shot!

$(document).ready(function(){
    $("#items").children().click(function(){
        $(this).toggleClass('clicked') // toggling the class of the current element
               .siblings('div') // selecting siblings of the current element
               .removeClass('clicked'); // removing the 'clicked' class from the siblings

    });
});

$(document).ready(function() {
  $("#items").children().click(function() {
     $(this).toggleClass('clicked').siblings('div').removeClass('clicked');
  });
});

.clicked {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='items'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Answer 2

Give this a shot!

$(document).ready(function(){
    $("#items").children().click(function(){
        $(this).toggleClass('clicked') // toggling the class of the current element
               .siblings('div') // selecting siblings of the current element
               .removeClass('clicked'); // removing the 'clicked' class from the siblings

    });
});

$(document).ready(function() {
  $("#items").children().click(function() {
     $(this).toggleClass('clicked').siblings('div').removeClass('clicked');
  });
});

.clicked {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='items'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Answer 3

Answer №2

Eliminate the clicked class from all other related div elements.

Utilize siblings() to choose the neighboring elements.

Gather the adjacent siblings of each element in the selected elements, potentially with a filter.

$(document).ready(function() {
  $("#items").children().click(function() {
    $(this).toggleClass('clicked').siblings('div').removeClass('clicked');
  });
});

.clicked {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='items'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Answer 4

Eliminate the clicked class from all other related div elements.

Utilize siblings() to choose the neighboring elements.

Gather the adjacent siblings of each element in the selected elements, potentially with a filter.

$(document).ready(function() {
  $("#items").children().click(function() {
    $(this).toggleClass('clicked').siblings('div').removeClass('clicked');
  });
});

.clicked {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='items'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Answer 5

Answer №3

$(document).ready(function() {
  $("#items").children().click(function() {
    $(this) //clicked element
        .add('.clicked', this.parentNode)//add already '.clicked' child element in jq set
        .toggleClass('clicked');//toggle class for all elements in set
  });
});

.clicked {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='items'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Answer 6

$(document).ready(function() {
  $("#items").children().click(function() {
    $(this) //clicked element
        .add('.clicked', this.parentNode)//add already '.clicked' child element in jq set
        .toggleClass('clicked');//toggle class for all elements in set
  });
});

.clicked {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='items'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Answer 7

Answer №4

To exclude the current selection, you can utilize removeClass along with not:

$(document).ready(function(){
  $("#items").children().click(function(){
    $('#items > div').not($(this).toggleClass('clicked')).removeClass('clicked');
  });
});

.clicked {
background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='items'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

An alternative concise method:

$(document).ready(function(){
  $("#items").children().click(function(){
    $('.clicked').not($(this).toggleClass('clicked')).removeClass('clicked');
  });
});

Answer 8

To exclude the current selection, you can utilize removeClass along with not:

$(document).ready(function(){
  $("#items").children().click(function(){
    $('#items > div').not($(this).toggleClass('clicked')).removeClass('clicked');
  });
});

.clicked {
background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='items'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

An alternative concise method:

$(document).ready(function(){
  $("#items").children().click(function(){
    $('.clicked').not($(this).toggleClass('clicked')).removeClass('clicked');
  });
});

Answer 9

Answer №5

Here's a way to achieve this:

$(document).ready(function(){
  $("#items").children().click(function(){
    $(this).siblings().removeClass('selected');
    $(this).addClass('selected');
  });
});

Answer 10

Here's a way to achieve this:

$(document).ready(function(){
  $("#items").children().click(function(){
    $(this).siblings().removeClass('selected');
    $(this).addClass('selected');
  });
});

Answer 11

Answer №6

Hey there, let's try it this way!

$(document).ready(function(){
      $("#items > div").click(function(){
       $("#items").children().removeClass('clicked');
        $(this).addClass('clicked');
      });
    });

$(document).ready(function(){
  $("#items > div").click(function(){
   $("#items").children().removeClass('clicked');
    $(this).addClass('clicked');
  });
});

.clicked {
background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='items'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Answer 12

Hey there, let's try it this way!

$(document).ready(function(){
      $("#items > div").click(function(){
       $("#items").children().removeClass('clicked');
        $(this).addClass('clicked');
      });
    });

$(document).ready(function(){
  $("#items > div").click(function(){
   $("#items").children().removeClass('clicked');
    $(this).addClass('clicked');
  });
});

.clicked {
background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='items'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

What is the best way to ensure that only one div is toggled at a time while using the toggle class function?

Answer №1

Answer №2

Answer №3

Answer №4

An alternative concise method:

Answer №5

Answer №6

Similar questions

Tips for transferring data from one tab to another tab using Greasemonkey

Create a left-aligned div that spans the entire width of the screen, adjusting its width based on the screen size and positioning it slightly

React: maintaining referential equality across renders by creating closures with useCallback

Tips for displaying XML content within an AngularJS application using HTML

Tips for retaining the original text value even after clicking the submit button

How can I uniquely identify and edit individual cells within an ng-grid using the bgColor property?

Is there a way to retrieve user input without having to submit the form?

Storing the Token from the AJAX Login API Call in JavaScript: Best Practices for Keeping Credentials Secure

Unable to Trigger onClick Event with react-bootstrap Navbar Dropdown in Combination with react-router-dom

Controlling Material-UI using a custom .css stylesheet

When using the RxJs Pipe with MAP in Angular and Ionic, it may not return a value in windows, but it works perfectly in Mac when used with HttpClient

An issue arose upon restarting my Eclipse software

React is having trouble resolving the path required

Several queries for directions on Google Maps are resulting in the same response being returned for all requests

Discovering numbers within a JSON object and extracting them - a step-by-step guide

Trying to organize JSON data by multiple parameters using jQuery

Leveraging JQuery to retrieve the string value from an onclick() event

Baconjs exclusively retrieves the final debounce value

Obtain the current URL in a Node.js configuration file

Issue with displaying multiple checkboxes using Materialize CSS in combination with Leaflet for web-mapping overlays