I am currently constructing a website where different layers of divs display various sections. The structure is as follows:
- GROUP
- Multiple options (buttons; choose one of the subgroups)
- SUBGROUP
- Multiple options (buttons; choose one of the subsubgroups)
- SUBSUBGROUPS etc.
My approach involves using JQuery to activate these different divs. However, I am seeking a way to navigate between the divs by clicking outside of them to deactivate them or by clicking on another div/button to override the current active div.
Is there a simple solution in JQuery and/or CSS to achieve this? Despite my attempts with methods like removeClass, addClass, toggleClass, or toggle, along with an .active class that controls the display property, I seem to be missing the correct mathematical solution especially when dealing with multiple layers and combinations.
// ACTIVATE DIVS
$(document).ready(function() {
// 1. CONTINENTS
$(".select-europe").click(function() {
$("#official_countries").addClass("active");
});
// 2. RECOGNIZED STATES
// 2.EU EUROPE
$(".select-france").click(function() {
$("#france-country").addClass("active");
});
$(".select-netherlands_the").click(function() {
$("#netherlands_the-country").addClass("active");
});
// 3. STATE
// 3.EU.FR FRANCE
$(".select-france-divisions").click(function() {
$("#france-divisions").addClass("active");
});
// 3.EU.NL NETHERLANDS, THE
$(".select-netherlands_the-divisions").click(function() {
$("#netherlands_the-divisions").addClass("active");
});
});
// DE-ACTIVATE DIVS
$(document).on("click", function(event) {
// 1. CONTINENTS
// 2. RECOGNIZED STATES
// 2.EU EUROPE
var $trigger = $(".select-france");
if ($trigger !== event.target && !$trigger.has(event.target).length) {
$("#france-country").removeClass("active");
}
var $trigger = $(".select-netherlands_the");
if ($trigger !== event.target && !$trigger.has(event.target).length) {
$("#netherlands_the-country").removeClass("active");
}
// 3. STATE
// 3.EU.FR FRANCE
var $trigger = $(".select-france-divisions");
if ($trigger !== event.target && !$trigger.has(event.target).length) {
$("#france-divisions").removeClass("active");
}
// 3.EU.NL NETHERLANDS, THE
var $trigger = $(".select-netherlands_the-divisions");
if ($trigger !== event.target && !$trigger.has(event.target).length) {
$("#netherlands_the-divisions").removeClass("active");
}
});#continents {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #e6e6e6;
}
#official_countries,
#france-country,
#france-divisions,
#netherlands_the-country,
#netherlands_the-divisions {
display: none;
position: absolute;
top: 0;
height: 100%;
border-left: 1px solid black;
}
#official_countries {
left: 120px;
width: calc(100% - 121px);
background-color: #ccc;
}
#france-country,
#netherlands_the-country {
left: 240px;
width: calc(100% - 241px);
background-color: #b3b3b3;
}
#france-divisions,
#netherlands_the-divisions {
left: 360px;
width: calc(100% - 361px);
background-color: #999;
}
#official_countries.active,
#netherlands_the-country.active,
#france-country.active,
#france-divisions.active,
#netherlands_the-divisions.active {
display: block;
}
.select-country {
display: block;
}
.section {
display: block
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="continents">
<button class="select-europe">Europe</button>
</div>
<div id="official_countries">
<div class="overview">
<button class="select-country select-france">France</button>
<button class="select-country select-netherlands_the">Netherlands, the</button>
</div>
</div>
<div id="france-country">
<header>French Republic</header>
<div class="overview">
<div class="section">
<button class="select-france-divisions">France</button>
</div>
</div>
</div>
<div id="netherlands_the-country">
<button class="select-netherlands_the-divisions">Netherlands, the</button>
</div>
<div id="france-divisions"></div>
<div id="netherlands_the-divisions"></div>My expectations were that each preceding div which activated the one above it would close again upon clicking outside the higher div. However, some divs disappear when clicking on other divs either below or above them.