SVG TOGGLE OPEN AREA #SVG
<style>
.toggle-path.grayarea {
fill: purple !important; /* Add !important to override any inline styles */
}
.toggle-path.grayarea:hover {
fill: green !important; /* Add !important to override any inline styles */
}
</style>
<svg width="969" height="969" viewBox="0 0 969 969" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="toggle-path grayarea" data-content="gray-content" d="M496 357L282 147.5L215 309.5L248.5 457L339 728.5L420 762H496L553.5 581L496 357Z" />
<path class="toggle-path" data-content="blue-content" d="M497.5 358.5L282 147.5L577.5 125L754 358.5L553 586.5L497.5 358.5Z" fill="#0778FC" />
<path class="toggle-path" data-content="green-content" d="M100 100L200 200L300 100" fill="#00FF00" />
<!-- Add more paths and specify the associated data-content attribute -->
</svg>
<div class="toggle-container">
<div class="toggle-content gray-content" style="display: none;">
<!-- Content for grayarea -->
<p>Gray Area Content</p>
</div>
<div class="toggle-content gray-content" style="display: none;">
<!-- Content for grayarea -->
<p>Gray Area Content</p>
</div>
<div class="toggle-content gray-content" style="display: none;">
<!-- Content for grayarea -->
<p>Gray Area Content</p>
</div>
<div class="toggle-content blue-content" style="display: none;">
<!-- Content for bluearea -->
<p>Blue Area Content</p>
</div>
<div class="toggle-content green-content" style="display: none;">
<!-- Content for greenarea -->
<p>Green Area Content 1</p>
</div>
<!-- Add more content containers for other areas -->
</div>
<script>
const togglePaths = document.querySelectorAll(".toggle-path");
const toggleContents = document.querySelectorAll(".toggle-content");
togglePaths.forEach((path, index) => {
path.addEventListener("click", function () {
// Hide all content elements
toggleContents.forEach((content) => {
content.style.display = "none";
});
// Show the content associated with the clicked path
const contentClass = path.getAttribute("data-content");
const contentToShow = document.querySelectorAll(.${contentClass});
if (contentToShow) {
contentToShow.forEach((content) => {
content.style.display = "block";
});
}
});
});
</script>
WHAT WE TRY TO DO?
WE TRY TO MAKE SVG PATH AS A BUTTON TO OPEN ELEMENT WITH CLASSES TOGGLE
