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 !