Question

I was wondering how you could “relate” two HTML elements.
For example, let’s say a user clicks on a selection item and I want the element “related” to that element disappear.

<div id="game1Selection">I pick team1</div>
<div id="game2Selection">I pick team2</div>

<div id="game1">This is game 1</div>
<div id="game2">This is game 2</div>

What I would want to happen is that when a user selects “game1Selection” that the div “game1” will disappear and the same thing for game2, game3, etc. I know how to do this the long way:

$('#game1Selection').click( function() {
  $('#game1').toggleClass('selected');
});  //selected has the attribute display:none

How could I make two of them related so I don’t have to write it the long way and just use this

Answer 1

jsBin demo

$('div[id$=Selection]').click(function(){
   var myID = this.id.split('Selection')[0];
   $('#'+myID).toggleClass('selected');
});

use the ends with selector $ and retrieve the first part of the ID name by splitting the original ID and getting the first ([0]) part of the name (gameN)

---

a better idea demo

But a far better example would be using this HTML:

<div>
    <div class="selection">I pick team1</div>
    <div class="selection">I pick team2</div>
</div>

<div class="game">This is game 1</div>
<div class="game">This is game 2</div>

and retrieve the clicked element index() and find the matching element using .eq() :

$('.selection').click(function(){
   var i = $(this).index();
   $('.game').removeClass('selected').eq(i).addClass('selected');
});

This will allow you to remove the already selected classes and assign it to the index-matching element.