How to do a toggle between multiple options with jQuery

Question

I've made an little design with circles that expand when clicking on them. I've multiple circles and want to be able to click and expand on one circle at a time and then the other circle closes.

Here's a codeply of my example: https://www.codeply.com/p/7QdDsEF9ul

And here's the jQuery snippet:

$('.product1').click(function () {
$('#product1').toggleClass('expand');
$('.hidden#1').toggleClass('show');

$('.hidden#2').removeClass('show');
$('#product2').removeClass('expand');
});

$('.product2').click(function () {
$('#product2').toggleClass('expand');
$('.hidden#2').toggleClass('show');
});

As you can see this is not going to be very efficient, especially if I add more circles. Is there an easier way of doing this?

CertainPerformance · Accepted Answer

Since the div that needs to be shown is a descendant of the .circle which has its class changed when shown, you can avoid having to fiddle with the child div by using the CSS rule .expand div instead. This way, changes to the parent with .expand will be sufficient.

Give all the s a common class, maybe product, and on click, check to see if its child (the .circle) has the expand class or not. If it does, remove .expand from all elements - otherwise, remove expand from all elements but then add it to the .circle child:

$('.product').click(function() {
  const $circle = $(this).children();
  if ($circle.hasClass('expand')) {
    $('.expand').removeClass('expand');
  } else {
    $('.expand').removeClass('expand');
    $circle.addClass('expand');
  }
});

a {
  font-size: 2.25em;
}

.active {
  color: #6bd627;
}

.circle {
  width: 150px;
  height: 150px;
  background-color: #00aae8;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  transition: all 0.3s ease-in-out;
  position: absolute;
}

.circle h2 {
  color: #fff;
  font-size: 0.7em;
  margin-bottom: auto;
  margin-top: 55px;
}

.expand {
  height: 248px !important;
  background-color: #6bd627 !important;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom-left-radius: 0%;
  border-bottom-right-radius: 0%;
  transition: all 0.3s ease-in-out;
  position: absolute;
}

.hidden {
  display: none;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.expand div {
  display: block !important;
  position: absolute;
  opacity: 1;
  transition: all 0.3s ease-in-out;
}

.link {
  font-size: 0.5em;
  color: #000;
}

ul,
ol {
  margin: 0;
}

li {
  margin-bottom: -0.5em;
}

You don't need any IDs or numeric-indexed classes now.

How to do a toggle between multiple options with jQuery

Answers (2)

Related Questions