CODEWITHSUNDEEP
jqueryhtmlcss
CheckeredMichael
CheckeredMichael

Reputation: 571

JQuery show/hide items based on click

I have a page on my site which will show all parks within a region by default. I would then like it to only show specific items based on a clicked region and hide all the other parks.

So far I have 3 regions with and id e.g. region-1, region-2 and region-3 I would then like it to show only parks within those regions so if I clicked on the id of region-1 it would only show the parks with the class of region-1 and hide all the others, this is the same for the other regions.

My biggest problem with getting this to work is that the client will be able to add more regions in the future and more parks to those new regions.

So what I need is JQuery to pick up every region id which will be added in the future and pair them with the relevant parks.

<div id="side-bar" class="pull-left">
    <h2>Parks By 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 is my JSFiddle to help give you an idea of what I'm talking about... http://jsfiddle.net/y9CV9/

Upvotes: 0

Views: 768

Answers (3)

Felix
Felix

Reputation: 38102

I'd suggest you to use data-* instead since it's easier for you to manage:

<div id="side-bar" class="pull-left">
    <h2>Parks By 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 you 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

Upvotes: 1

Bhupendra Shukla
Bhupendra Shukla

Reputation: 3914

First you have to hide all of your divisions initially then you cn change its attributes on click.

jQuery(function($){
    var $regions = $('#contentWrapper .region').hide(); //Hide all div initially
    $('#side-bar a').click(function(){ //find the anchor tag
        var $target = $($(this).attr('href')).show(); //change the attribute of current div 
        $regions.not($target).hide()
    })
})

DEMO FIDDLE

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388326

Try

<div id="content">
    <div id="contentWrapper">     
        <h1>REGION TEXT</h1>
        <div id="region-1" class="region pull-left">Park 1</div>
        <div id="region-2" class="region pull-left">Park 2</div>
        <div id="region-3" class="region pull-left">Park 3</div>
    </div>
</div>

then

jQuery(function($){
    var $regions = $('#contentWrapper .region').hide();
    $('#side-bar a').click(function(){
        var $target = $($(this).attr('href')).show();
        $regions.not($target).hide()
    })
})

Demo: Fiddle

Upvotes: 3

Related Questions