Question

I know this is supposed to be simple, but I’m running into multiple problems. First of all, I don’t know how to get all elements of a class and change their display. I found the .each method with this sample code:

$('.classname').each(function(index) {
        alert(index);
});

What do I need instead of the alert to change the display property of an element from ‘none’ to block’?

The second problem is, the class name is gathered from a hidden field. Let’s name this variable service. When I try to replace the ‘.classname’ with ‘.’+service I get an error saying ‘Syntax error, unrecognized expression: .’.

So the actual code would be something like:

var service=$('#service').val();
$('.'+service).each(function(index) {
        alert(index);
});

I’m sure this can’t be complicated but I can’t figure it out.

Any alternative solution is of course welcome.

Answer 1

Check out .show:

var service=$('#service').val();
$('.'+service).show(); // roughly equivalent to .css('display', 'block');

However, as the documentation for show points out, the method returns the matched elements display property to it’s previous state. To explicitly change the display style property to block, use .css:

$('.' + service).css("display", "block");