javascript - How to show a single combination from matrix of values and hide others -

edit: edited question, because classes index based, in real scenario not..

lets have markup, more or less

<div class="container">     <div class="room_special">          <div class="aaaa"></div>          <div class="bbbb"></div>          <div class="cccc"></div>     </div>     <div class="room_junior">          <div class="xyz"></div>          <div class="ztx"></div>          <div class="tda"></div>     </div>     <div class="room3">          <div class="xxxx"></div>          <div class="board3"></div>          <div class="zzzzz"></div>     </div> </div> 

and want make visible (the rest, hidden) room2 - board 3, , change when user clicks on elements (not those..)

and have 2 vars, wich read user events:

var room = 'room3'; var board = 'board3';

i doing this, think/hope there's simpler way, because have large number of nodes

function show(room,board) {    $('.container div').fadeout(); // hide bothers    $('.container div.'+room).fadein(); // show 1    $('.container div .'+room+' div').fadeout(); // hide brothers    $('.container div').find('.'+room+' .'+board).fadein(); // show 1 } 

now, working, can make using jquery selector wich might don't know or in single jquery line?

edit2:

i can see this, wich single line looks worse

$('.container div').not('.'+room).hide().end().filter('.'+room).show().find('div').not('.'+board).hide().end().find('.'+board).show(); 

sample fiddle

adding class make neat,

<div class="container">     <div class="room room1">          <div class="board1"></div>          <div class="board2"></div>          <div class="board3"></div>     </div>     <div class="room room2">          <div class="board1"></div>          <div class="board2"></div>          <div class="board3"></div>     </div>     <div class="room room3">          <div class="board1"></div>          <div class="board2"></div>          <div class="board3"></div>     </div> </div>  var desiredroom = 'some-class-that-represent-a-room'; //populate button click var desiredboard = 'some-class-that-represent-a-board'; //populate button click  function show(desiredroom, desiredboard) {   //hide boards   $('.room div').fadeout();   //show 1   $('.' + desiredroom +' .'+desiredboard).fadein() } 

if can classes indicating room , board events [from dropdown may be], can work.