Question

I’m not sure if this is easily possible, but would be really handy if there’s a simple way to do this.

If I had a list of elements are used to toggle on and off different div’s, I can write a clumsy bit of jQuery below that does the trick:

<ul>
  <li class="classone">Show or Hide 1</li>
  <li class="classtwo">Show or Hide 2</li>
</ul>
<div class="classone">Div 1</div>
<div class="classtwo">Div 2</div>

<script>
  $('li.classone').click(function() {
    $('div.classone').toggle();
  });
  $('li.classtwo').click(function() {
    $('div.classtwo').toggle();
  });
</script>

…but it would be a lot nicer to use this but just for the class. Like:

$('li.this').click(function() {
  $('div.this').toggle();
});

Which I know doesn’t work. It must be possible with a little + in there somewhere, but for the life of me I can’t get it to work.

Any help greatly appreciated.

Answer 1

Get the class from the element and use in the selector:

$('li.classone,li.classtwo').click(function() {
  $('div.' + $(this).attr('class')).toggle();
});