Question

Im trying to hide all divs of a class apart from the first one when the first element is selected in a select list. I thought that line 4 would override line 3 but it doesnt appear to be working this way.

function myFunction() {
  if (jQuery('#select').val() == '1') {
    jQuery('.mydiv').addClass('hide');
    jQuery('.mydiv(1)').removeClass('hide');
  }
}

UPDATE – the various div.mydiv’s may already have the hide class, so the code needs to make sure only the 1st instance has the class. The other divs need to have the class removed if they have it.

Answer 1

Add it to all, filter to first, and remove the class.

function myFunction() {
  if (jQuery('#select').val() == '1') {
    jQuery('.mydiv').addClass('hide').first().removeClass("hide");
  }
}