Iteration on CSS class array and Toggle class on click

Question

The problem is I need to toggle class on click. I have classes

.col

.col-1 / .col-2 / col-3 etc.

and I need to apply on click to the right .col-1 / col-2 an expand class, so it would like

.col .col-1 .col-1--expand
.col .col-2 .col-2--expand

Before I had this on hover in CSS and it works, but make it on click is little problematic. I searched whole day Javascript and jQuery cases, but I haven't found any right solution to it. What I learned, I must use forEach function in Javascript, but a solution in jQuery is also what I want. I tried something like this on my project, but I'm still bad at Javascript :(

if (document.querySelector('.slider__col')) {
const expandElement = element.querySelectorAll('.slider__col')
expandElement.forEach(element => {
    element.addEventListener('click', function() {
        element.classList.toggle("");
    })
})

Cue · Accepted Answer · 2019-07-22 23:39:11Z

1

You can use a regular expression to match element classes and toggle the expand class on that element when clicked.

var matched = this.className.match(/col-\d{1,2}/);

This will find any classes in your element's class attribute that contains col- followed by any numbers up to two digits so you can cater for 1-99.

matched.length && (matched = matched.pop())

.match() returns an array of matches so you can determine if any matches were found and pop the first match off of the array.

var expandClass = matched + '--expand';

Because you're matching, for example, col-1 you can use this string and append --expand to make col-1--expand.

$(this).toggleClass(expandClass);

You can use jQuery's toggleClass to add/remove the expandClass depending on the class's presence. See col-3 for demonstration.

$(document).on('click', '.col', function () {
  var matched = this.className.match(/col-\d{1,2}/);
  if (matched.length && (matched = matched.pop())) {
    var expandClass = matched + '--expand';
    $(this).toggleClass(expandClass);
  }
});

.col {
  background-color: blue;
  color: white;
  padding: .25rem 1rem;
  margin: .25rem 0;
}

.col-1--expand,
.col-2--expand,
.col-3--expand,
.col-4--expand,
.col-5--expand,
.col-6--expand {
  background-color: green;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="grid">
  <div class="col col-1">1</div>
  <div class="col col-2">2</div>
  <div class="col col-3 col-3--expand">3</div>
  <div class="col col-4">4</div>
  <div class="col col-5">5</div>
  <div class="col col-6">6</div>
</div>

answered Jul 22, 2019 at 23:39

Cue

2,7591 gold badge14 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ArendE Over a year ago

Guess we were both working on an answer! ^^ Nice, I love the regex addition.

peryite Over a year ago

Worked for me, very thanks for help and explanation!

ArendE · Accepted Answer · 2019-07-22 23:40:25Z

0

Welcome to StackOverflow! Since you want a solution in jQuery, let me give you some guidance.

1. The forEach function is in jQuery available as the .each() method. Making your code:

// Select your classes, for each of them run a function
$('.col-1').each(function() { });

2. To make something happen on a click, jQuery has a .click() method available, it will call a function on click. Making your code:

$('.col-1').each(function() {
    // Click method:
    $(this).click(function() { } );
});

// Or just do:
$('.col-1').click(function() { });

jQuery does not need a loop and can bind the click method to all classes by itself. There are cases where it still might be useful, but let's keep it basic for now and get your code working!

3. Adding the new CSS class. In jQuery there are many methods you can use for it. In this case you are probably looking for the .toggleClass() method. Other useful ones might me .addClass() and .removeClass(). Making your code:

$('.col-1').click(function() {
    $(this).toggleClass("col-1--expand");
});

// Or just add it:
$('.col-1').click(function() {
    $(this).addClass("col-1--expand");
});

Done, repeat for other classes where you want to do some magic. Next time try spending a day on the jQuery API Documentation. All the methods are there, with great examples included! Best of luck with it.

answered Jul 22, 2019 at 23:40

ArendE

9971 gold badge8 silver badges15 bronze badges

1 Comment

peryite Over a year ago

Thanks for explanation and help, I will do good research on this site starting from now.

Collectives™ on Stack Overflow

Iteration on CSS class array and Toggle class on click

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related