.hide/.show a grid of div isn't working

Question

For one page, I have a grid of Divs (2 by 3) and a menu (<li> in <lu>) on the left of that grid. Each menu section has its own grid of divs, and each grid is included in one div to allow easier manipulations.

Menu sections :

<div id="sections">
        <ul>
            <li class="section1">Product</li>
            <li class="section2">Arcade Sticks</li>
            <li class="section3">Mobility</li>
            <li class="section4">Others</li>
            <li class="section5">Infography</li>
        </ul>
</div>

-

Example of a few projects grids :

    <div id="grid1">
        <a class="project">Projet 1</a>
        <a class="project">Projet 2</a>
        <a class="project">Projet 3</a>
        <a class="project">Projet 4</a>
        <a class="project">Projet 5</a>
        <a class="project">Projet 6</a>
    </div>

    <div id="grid2">
        <a class="project" style="background-color:#330033;">Projet 1</a>
        <a class="project" style="background-color:#330033;">Projet 2</a>
        <a class="project" style="background-color:#330033;">Projet 3</a>
        <a class="project" style="background-color:#330033;">Projet 4</a>
        <a class="project" style="background-color:#330033;">Projet 5</a>
        <a class="project" style="background-color:#330033;">Projet 6</a>
    </div>

    <div id="grid3">
        <a class="project" style="background-color:#82b8d0;">Projet 1</a>
        <a class="project" style="background-color:#82b8d0;">Projet 2</a>
        <a class="project" style="background-color:#82b8d0;">Projet 3</a>
        <a class="project" style="background-color:#82b8d0;">Projet 4</a>
        <a class="project" style="background-color:#82b8d0;">Projet 5</a>
        <a class="project" style="background-color:#82b8d0;">Projet 6</a>
    </div>

The grid corresponding to the first section of the menu (#grid1) is shown on page load, all other grids (#grid2 #grid3, etc...) are hidden, with a Jquery .hide function.

Here is my tiny Jquery script :

$("#project_grid div:not(#grid1)").hide();

for(var i = 1; i<=5; i++){

$(".section"+i).on('click', function()
{
    $("#content #project_grid div:not(#grid"+i).hide();
    $("#content #project_grid #project_large").hide();
    $("#content #project_grid #grid"+i).show();
});
}

I use the "i" var to automatically get the number following the "section" class value, and reuse it on the "grid" value in the Jquery script.

The div #project_large is another group of divs with larger views of the projects, that will pop up after you click on one of the thumbnail pictures in the grid. I haven't considered the code yet :)

So, when the page loads, the grid corresponding to the first section is displayed, and other are hidden. But when I click on a section name in the menu, the value "display:none" is added to the style of the "display : none" isn't removed from its .

I'm a total rookie in coding, so some stuff may look wrong to you :)

Thanks !

Can you make a JSFiddle for us to work with? It is easier to help you. — Tom Spee
As a sidenote, since ID must be unique, you can use $("#project_grid div:not(#grid"+i).hide();, $("#project_large").hide(); and $("#grid"+i).show(); — Huangism
Yeah I wanted to make one, but it's completely destroying my div organisation and I have no idea why. They are not contained in their parent divs anymore, and they just stack one under the other... :/ — MisBi
Maybe I should precise that there are other divs around, because your codes are all working on jsfiddle, but they won't when I put them in my full code on sublime... Here is how the full html and css shows : jsfiddle.net/g8Cfx But I don't understand why the #project_large divs are screwed up on jsfiddle while they aren't when I open my html file on chrome... :/ — MisBi

Pete Pete · Accepted Answer · 2014-04-03T15:26:45

I would change you html classes to the following:

    <ul>
        <li class="section" data-grid="grid1">Product</li>
        <li class="section" data-grid="grid2">Arcade Sticks</li>
        <li class="section" data-grid="grid3">Mobility</li>
        <li class="section" data-grid="grid4">Others</li>
        <li class="section" data-grid="grid5">Infography</li>
    </ul>

<div id="grid1" class="grid">
    <a class="project">Projet 1</a>
    <a class="project">Projet 2</a>
    <a class="project">Projet 3</a>
    <a class="project">Projet 4</a>
    <a class="project">Projet 5</a>
    <a class="project">Projet 6</a>
</div>
<div id="grid2" class="grid">
    <a class="project" style="background-color:#330033;">Projet 1</a>
    <a class="project" style="background-color:#330033;">Projet 2</a>
    <a class="project" style="background-color:#330033;">Projet 3</a>
    <a class="project" style="background-color:#330033;">Projet 4</a>
    <a class="project" style="background-color:#330033;">Projet 5</a>
    <a class="project" style="background-color:#330033;">Projet 6</a>
</div>

then you can use very simple jquery:

$('.section').click(function() {
    $('.grid').hide();
    $('#' + $(this).data('grid')).show();
});

Example

.hide/.show a grid of div isn't working

1 Answers