I have the following HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expanding Dropdown Menu</title>
[CSS styling omitted for brevity]
</head>
<body>
<div class="custom-box">
[Content of custom box omitted for brevity]
<button class="custom-button" id="dropdown-button">Click Me</button>
<div class="dropdown-content" id="dropdown-menu">
<div class="dropdown-item">Dropdown Text 1<div>
<div class="dropdown-item">>Hidden text 1</div>
<div class="dropdown-item">Dropdown Text 2<div>
<div class="dropdown-item">Hidden Text 2</div>
<div class="nested-dropdown-item">Nested Dropdown Text 3<div>
<div class="nested-hidden-text">Nested Hidden Text 3</div>
</div>
</div>
<script>
const dropdownButton = document.getElementById('dropdown-button');
const dropdownMenu = document.getElementById('dropdown-menu');
dropdownButton.addEventListener('click', () => {
dropdownMenu.style.display = dropdownMenu.style.display === 'none' ? 'flex' : 'none';
});
</script>
</body>
</html>In this code snippet, the "Not Dropdown Text" signifies regular text without any dropdown functionalities. On the other hand, "Dropdown Text" indicates a text element that can be expanded to reveal hidden content.
How do I implement nested dropdowns within this existing structure? Specifically, clicking on a text element with further dropdown capabilities should reveal additional hidden text within the dropdown menu.