Question

Could You be so kind and help with my jQuery problem? I’m run out of power thinking about it.

I have this kind of structure:

<div id="trigger-1">Trigger 1</div>
<div id="trigger-2">Trigger 2</div>
<div id="trigger-3">Trigger 3</div>
 ...
<div id="trigger-n">Trigger n</div>

<div id="content-1">Content 1</div>
<div id="content-2">Content 2</div>
<div id="content-3">Content 3</div>
 ...
<div id="content-n">Content n</div>

All objects are independent, I mean there is no relation parent -> child. What I want to get is fadeing in
DIV marked as a content after run a trigger with the same number in element ID. I know how to get it if I
have for example 5 pairs of DIV, but I can’t create script if I have unlimited pairs of divs.

Of course if content-1 DIV is visible, pressing trigger-2 triggers fadeOut for content-1
and fadeIn for content-2.

Thank You for Your response.

Answer 1

I’d suggest:

$('div[id^="trigger"]').click(
    function(){
        var num = this.id.match(/\d+/);
        $('div[id^="content-"]').fadeOut();
        $('#content-' + num).fadeIn();
    });​

JS Fiddle demo.