html - JQuery show/hide items based on click -

i have page on site show parks within region default. show specific items based on clicked region , hide other parks.

so far have 3 regions , id e.g. region-1, region-2 , region-3 show parks within regions if clicked on id of region-1 show parks class of region-1 , hide others, same other regions.

my biggest problem getting work client able add more regions in future , more parks new regions.

so need jquery pick every region id added in future , pair them relevant parks.

<div id="side-bar" class="pull-left">     <h2>parks region</h2>     <ul class="nav nav-pills nav-stacked">         <li>             <a href="#region-1">south east england</a>         </li>         <li>             <a href="#region-2">south west england</a>         </li>         <li>             <a href="#region-3">north wales</a>         </li>     </ul> </div> <div id="content">     <div id="contentwrapper">               <h1>region text</h1>         <div class="region-1 pull-left">park 1</div>         <div class="region-2 pull-left">park 2</div>         <div class="region-3 pull-left">park 3</div>     </div> </div> 

here jsfiddle give idea of i'm talking about... http://jsfiddle.net/y9cv9/

i'd suggest use data-* instead since it's easier manage:

<div id="side-bar" class="pull-left">     <h2>parks region</h2>         <ul class="nav nav-pills nav-stacked">            <li>                 <a data-region="region-1" href="#region-1">south east england</a>             </li>             <li>                <a data-region="region-2" href="#region-2">south west england</a>             </li>             <li>                 <a data-region="region-3" href="#region-3">north wales</a>             </li>         </ul> </div> 

then can use:

$('#contentwrapper div').hide(); $('#side-bar a').click(function (e) {     e.preventdefault();     var region = $(this).attr('data-region');     $('#contentwrapper div.' + region).show().siblings('div').hide(); }); 

fiddle demo