Phil
Phil

Reputation: 43

Click on one Div and make all other Divs dissapear in Javascript

I got a Script Which makes me onclick showing all Divs with Specific id

This is the Selector

<a onclick="filterGal('simpleCart_shelfItem item Sonnenbrillen')" href="javascript:void(0);">Sonnenbrillen</a>

this is my Script

function filterGal(foo) {
                    var toHide = document.getElementsByClassName(foo);
                    for (i = 0; i < toHide.length; i++) {
                            toHide[i].style.display = 'block';
                    }
            }

So now my question how can i only show specific div with classname and display none the other div with other classnames? That these divs are going to be displayed nonen.

Upvotes: 1

Views: 67

Answers (3)

Kyle Wilson
Kyle Wilson

Reputation: 61

This is what I would try:

$("div").Hide();
$("." + foo).Show();

Upvotes: 1

Cyril ALFARO
Cyril ALFARO

Reputation: 1681

I just show you add jquery tag so you just need to do this :

function filterGal(foo) {
    $( "div:not("+foo+")" ).hide();
}

Exemple : http://jsfiddle.net/ACjeZ/1

Upvotes: 1

Cyril ALFARO
Cyril ALFARO

Reputation: 1681

Try this :

function filterGal(foo) {
    var toHide = document.getElementsByTagName('div');
    for (i = 0; i < toHide.length; i++) {
         toHide[i].style.display = 'none';
    }
    var toShow = document.getElementsByClassName(foo);
    for (i = 0; i < toShow.length; i++) {
         toShow[i].style.display = 'block';
    }
}

Can be improved by skiping in the first loop div which match your classes.

Upvotes: 1

Related Questions