Initially, I have a page layout divided into four sections resembling something like this.
My attempt has been to insert three "inner sections" within each main section as demonstrated here.
I am aiming to achieve the following result but I am unsure of how to proceed:
- The inner sections should only be visible upon clicking. Therefore, the initial display should resemble this. Upon clicking on Section 1, for example, the inner sections should become visible.
- Clicking on Section 1 should reveal Sections A-C. Selecting Section A should display the listbox. Clicking on Section A again should return to the overview of Sections 1-4. To navigate back to the main sections, a back button will be implemented, which I already know how to create.
The current code responsible for navigating between sections is as follows:
$('.section').on('click', function(e){
$(this).toggleClass('expanded');
$('.innersection').on('click', function(e){
$(this).toggleClass('expanded');
});
});
$('.section').on('click', function(e){
$(this).toggleClass('collapsed');
});
$('.innersection').on('click', function(e){
$(this).toggleClass('collapsed');
});
Any assistance would be highly appreciated. Thank you.