On a single page, there is a grid of Divs (2 by 3) with a menu (<li> in <lu>) positioned to the left of the grid. Each menu section contains its own grid of divs, all enclosed within one main div to facilitate manipulation.
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>
-
Sample Grids for Projects:
<div id="grid1">
<a class="project">Project 1</a>
<a class="project">Project 2</a>
<a class="project">Project 3</a>
<a class="project">Project 4</a>
<a class="project">Project 5</a>
<a class="project">Project 6</a>
</div>
<div id="grid2">
<a class="project" style="background-color:#330033;">Project 1</a>
<a class="project" style="background-color:#330033;">Project 2</a>
<a class="project" style="background-color:#330033;">Project 3</a>
<a class="project" style="background-color:#330033;">Project 4</a>
<a class="project" style="background-color:#330033;">Project 5</a>
<a class="project" style="background-color:#330033;">Project 6</a>
</div>
<div id="grid3">
<a class="project" style="background-color:#82b8d0;">Project 1</a>
<a class="project" style="background-color:#82b8d0;">Project 2</a>
<a class="project" style="background-color:#82b8d0;">Project 3</a>
<a class="project" style="background-color:#82b8d0;">Project 4</a>
<a class="project" style="background-color:#82b8d0;">Project 5</a>
<a class="project" style="background-color:#82b8d0;">Project 6</a>
</div>
Upon page load, only the grid corresponding to the first menu section (#grid1) is shown while the rest are hidden using jQuery's .hide function.
Below is a snippet of my 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 utilize an "i" variable to dynamically retrieve the number following the "section" class value and apply it to the "grid" value within the jQuery script.
The div #project_large represents another group of larger divs showcasing project details that pop up upon clicking on a thumbnail image within the grid. I'm yet to finalize the code for this feature :)
Initially, the grid related to the first menu section is visible whereas others are hidden. However, when I click on a section name in the menu, the "display:none" styling is added but the existing "display: none" is not removed from its counterpart.
As a novice in coding, some areas may seem flawed to you :)
Thank you!