I want to be able to select only one card at a time, so if one is selected and another card is clicked on the first card will be unselected and the new one will bee the selected card.

Thanks in advance!

/

$('.option-card').click(function() {
  if ($(this).hasClass('choice')) {
    $(this).removeClass('choice');
  } else {
    $(this).addClass('choice');
  }
});

.option-card {
    width: 21.9%;
    height: auto;
    padding: 15px 15px 0;
    margin: 0 10px 10px;
    border: 2px #cfcfcf solid;
    border-radius: 15px;
    display: inline-block;
}
.option-card:first-of-type {
    margin-left: 0;
}
.option-card:last-of-type {
    margin-right: 0;
}
.option-card:hover,
.option-card.choice {
    border: 2px #0079c1 solid;
    text-decoration: none;
}
a.option-card p:hover {
    text-decoration: none;
}
.card-thumb {
    width: 100%;
    border-radius: 50%;
    margin-bottom: 15px;
}

<script src=".11.1/jquery.min.js"></script>
<div class="option-card">
<img src="" class="card-thumb" alt="">
<p>Sodales feugiat etiam venenatis dui convallis</p>
</div>

<div class="option-card">
<img src="" class="card-thumb" alt="">
<p>Sodales feugiat etiam venenatis dui convallis</p>
</div>

<div class="option-card">
<img src="" class="card-thumb" alt="">
<p>Sodales feugiat etiam venenatis dui convallis</p>
</div>

I want to be able to select only one card at a time, so if one is selected and another card is clicked on the first card will be unselected and the new one will bee the selected card.

Thanks in advance!

https://jsfiddle/we5hm4an/

$('.option-card').click(function() {
  if ($(this).hasClass('choice')) {
    $(this).removeClass('choice');
  } else {
    $(this).addClass('choice');
  }
});

.option-card {
    width: 21.9%;
    height: auto;
    padding: 15px 15px 0;
    margin: 0 10px 10px;
    border: 2px #cfcfcf solid;
    border-radius: 15px;
    display: inline-block;
}
.option-card:first-of-type {
    margin-left: 0;
}
.option-card:last-of-type {
    margin-right: 0;
}
.option-card:hover,
.option-card.choice {
    border: 2px #0079c1 solid;
    text-decoration: none;
}
a.option-card p:hover {
    text-decoration: none;
}
.card-thumb {
    width: 100%;
    border-radius: 50%;
    margin-bottom: 15px;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="option-card">
<img src="http://placekitten./100/100" class="card-thumb" alt="">
<p>Sodales feugiat etiam venenatis dui convallis</p>
</div>

<div class="option-card">
<img src="http://placekitten./100/100" class="card-thumb" alt="">
<p>Sodales feugiat etiam venenatis dui convallis</p>
</div>

<div class="option-card">
<img src="http://placekitten./100/100" class="card-thumb" alt="">
<p>Sodales feugiat etiam venenatis dui convallis</p>
</div>

• javascript
• jquery
• html
• css

• 1 What if you just removed the choice class from all of the option-cards before you add it to your selected one? – Mike Cluck Commented Jun 6, 2016 at 20:01

4 Answers 4

This one is pretty simple.

$('.option-card').click(function() {
  $(".choice").removeClass("choice");
  $(this).addClass("choice");
});

.option-card {
    width: 21.9%;
    height: auto;
    padding: 15px 15px 0;
    margin: 0 10px 10px;
    border: 2px #cfcfcf solid;
    border-radius: 15px;
    display: inline-block;
}
.option-card:first-of-type {
    margin-left: 0;
}
.option-card:last-of-type {
    margin-right: 0;
}
.option-card:hover,
.option-card.choice {
    border: 2px #0079c1 solid;
    text-decoration: none;
}
a.option-card p:hover {
    text-decoration: none;
}
.card-thumb {
    width: 100%;
    border-radius: 50%;
    margin-bottom: 15px;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="option-card">
<img src="http://placekitten./100/100" class="card-thumb" alt="">
<p>Sodales feugiat etiam venenatis dui convallis</p>
</div>

<div class="option-card">
<img src="http://placekitten./100/100" class="card-thumb" alt="">
<p>Sodales feugiat etiam venenatis dui convallis</p>
</div>

<div class="option-card">
<img src="http://placekitten./100/100" class="card-thumb" alt="">
<p>Sodales feugiat etiam venenatis dui convallis</p>
</div>

Simply remove the choice class-name from the other elements that might potentially have that class, and then add it to the clicked element:

$('.option-card').click(function() {

  // remove the class-name from the the other elements:
  $('.option-card').removeClass('choice');

  // add the class to the clicked element:
  $(this).addClass('choice');
});

$('.option-card').click(function() {
  $('.option-card').removeClass('choice');
  $(this).addClass('choice');
});

.option-card {
  width: 21.9%;
  height: auto;
  padding: 15px 15px 0;
  margin: 0 10px 10px;
  border: 2px #cfcfcf solid;
  border-radius: 15px;
  display: inline-block;
}
.option-card:first-of-type {
  margin-left: 0;
}
.option-card:last-of-type {
  margin-right: 0;
}
.option-card:hover,
.option-card.choice {
  border: 2px #0079c1 solid;
  text-decoration: none;
}
a.option-card p:hover {
  text-decoration: none;
}
.card-thumb {
  width: 100%;
  border-radius: 50%;
  margin-bottom: 15px;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="option-card">
  <img src="http://placekitten./100/100" class="card-thumb" alt="">
  <p>Sodales feugiat etiam venenatis dui convallis</p>
</div>

<div class="option-card">
  <img src="http://placekitten./100/100" class="card-thumb" alt="">
  <p>Sodales feugiat etiam venenatis dui convallis</p>
</div>

<div class="option-card">
  <img src="http://placekitten./100/100" class="card-thumb" alt="">
  <p>Sodales feugiat etiam venenatis dui convallis</p>
</div>

Or, with plain JavaScript:

// defining the function, and setting the default
// parameter type of 'opts' to be an Object-literal
// (ES6):
function oneElementOnly(opts = {}) {

  // the default settings for the function,
  // can be overridden by passing in an
  // opts Object to override the defaults:
  var settings = {
    'selectedClass': 'choice',
    'selector': '.option-card'
  };

  // finding the keys of the opts Object, using
  // Object.keys():
  Object.keys(opts)
    // iterating over that array of properties using
    // Array.prototype.forEach() with an Arrow function;
    // where the variable 'key' is the current property
    // name of the Object, and we update the
    // settings[key] to be equal to the opts[key]:
    .forEach(key => settings[key] = opts[key]);

  // converting the collection returned by
  // document.querySelectorAll() into an Array, using
  // Array.from():
  Array.from(document.querySelectorAll(settings.selector))

    // iterating over each element in that Array, and
    // for each element removing the 'settings.selectedClass'
    // from the element's list of class-names:
    .forEach(element => element.classList.remove(settings.selectedClass));

  // adding the settings.selectedClass to the clicked element:
  this.classList.add(settings.selectedClass);

}

// retrieving all the elements to which the event-handler should
// be bound (as an Array):
var options = Array.from(document.querySelectorAll('.option-card'));

// iterating over each of those elements, and binding the
// oneElementOnly() function as the event-handler for the
// 'click' event:
options.forEach(option => option.addEventListener('click', oneElementOnly));

function oneElementOnly(opts = {}) {
  var settings = {
    'selectedClass': 'choice',
    'selector': '.option-card'
  };

  Object.keys(opts).forEach(key => settings[key] = opts[key]);

  Array.from(document.querySelectorAll(settings.selector))
    .forEach(element => element.classList.remove(settings.selectedClass));

  this.classList.add(settings.selectedClass);

}

var options = Array.from(document.querySelectorAll('.option-card'));

options.forEach(option => option.addEventListener('click', oneElementOnly));

.option-card {
  width: 21.9%;
  height: auto;
  padding: 15px 15px 0;
  margin: 0 10px 10px;
  border: 2px #cfcfcf solid;
  border-radius: 15px;
  display: inline-block;
}
.option-card:first-of-type {
  margin-left: 0;
}
.option-card:last-of-type {
  margin-right: 0;
}
.option-card:hover,
.option-card.choice {
  border: 2px #0079c1 solid;
  text-decoration: none;
}
a.option-card p:hover {
  text-decoration: none;
}
.card-thumb {
  width: 100%;
  border-radius: 50%;
  margin-bottom: 15px;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="option-card">
  <img src="http://placekitten./100/100" class="card-thumb" alt="">
  <p>Sodales feugiat etiam venenatis dui convallis</p>
</div>

<div class="option-card">
  <img src="http://placekitten./100/100" class="card-thumb" alt="">
  <p>Sodales feugiat etiam venenatis dui convallis</p>
</div>

<div class="option-card">
  <img src="http://placekitten./100/100" class="card-thumb" alt="">
  <p>Sodales feugiat etiam venenatis dui convallis</p>
</div>

References:

• JavaScript:
  • Array.from().
  • Array.prototype.forEach().
  • Arrow functions.
  • Element.classList.
  • EventTarget.addEventListener().
• jQuery:
  • addClass().
  • click().
  • removeClass().

I have made minor changes. on click, first verify if the div(('.option-card')) has been selected already. store it into a var. Remove class for all divs(('.option-card')). If it is not already marked then add class(choice). This way div's are Mutual. P.N: I can

$('.option-card').click(function() {
 var isMarked=$(this).hasClass('choice');
 $('.option-card').removeClass('choice');
if(!isMarked){
$(this).addClass('choice');
}
  });

The easiest thing to do by far, is to check to see if the length > 0. Works perfectly.

$('.option-card').click(function() {
  if ($('.option-card.choice').length > 0) {
    $('.choice').removeClass('choice');
    $(this).addClass('choice');
  } else {
    $(this).addClass('choice');
  }
});

https://jsfiddle/we5hm4an/1/