I have the following code:
document.querySelector('.rectangle')
.addEventListener('click', function() {
this.classList.toggle('expanded');
const plus = this.querySelector('.plus');
plus.style.transform =
this.classList.contains('expanded') ? 'rotate(45deg)' : 'rotate(0)';
});
.tile-container {
padding: 5px;
font-size: 25px;
}
.rectangle {
background-color: #0051a5;
padding-right: 1em;
padding-top: 1em;
cursor: pointer;
border-radius: 1em;
display: grid;
grid-template-rows: 1fr auto;
grid-template-columns: auto 1em;
grid-template-areas: "sample plus" "extratext extratext";
}
.plus {
grid-area: plus;
background: linear-gradient(#0051a5 0 0), linear-gradient(#0051a5 0 0), #fff;
background-position: center;
background-size: 60% 2.5px, 2.5px 60%;
background-repeat: no-repeat;
transition: transform 0.3s ease;
}
.radius {
border-radius: 50%;
width: 1em;
height: 1em;
margin-right: 1em;
}
.tile-label {
grid-area: sample;
font-family: 'PT Sans Narrow', sans-serif;
font-size: 1em;
text-transform: uppercase;
font-weight: 600;
color: #fff;
padding-left: 1em;
height: 2em;
}
.tile-accent {
color: #FFC72C;
}
.hidden-text {
grid-area: extratext;
display: none;
font-family: 'PT Sans Narrow', sans-serif;
font-size: 0.75em;
background-color: #fff;
color: #000;
margin: 1em;
padding-top: 0.5em;
padding-left: 1em;
}
.expanded>.hidden-text {
display: block;
animation: fade-in 1s;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="tile-container">
<div class="rectangle">
<div class="plus radius"></div>
<div class="tile-label">
Sample <span class="tile-accent">Text</span>
</div>
<div class="hidden-text">
<ul>
<li>Not Dropdown Text</li>
<li>Dropdown Text</li>
<li>Not Dropdown Text</li>
</ul>
</div>
</div>
</div>
</body>
In this code, the "Not Dropdown Text" represents any text which doesn’t have dropdown capabilities; however, "Dropdown Text" refers to a text that can be further expanded to show hidden text.
How can I achieve the dropdown within this dropdown box? When I click the text that has further dropdown capabilities, it should display hidden text inside the box.
2
Answers
To get a dropdown within the dropdown box, you can try:
First, adding a nested dropdown structure inside the
.hidden-text
div.
Then, within your CSS, style the nested dropdown to be hidden by
default and show when clicked.
And finally, add an event listener using JavaScript to the nested
dropdown to toggle its visibility
One solution is to have a list within your list that has more data.
I also changed the click handler for the panel itself to the title. This way you can click the elements within the body to open/close.