skip to Main Content

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


  1. 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

    Login or Signup to reply.
  2. 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.

    document.querySelector('.tile-label')
      .addEventListener('click', function() {
        const _parent = this.parentNode;
        _parent.classList.toggle('expanded');
        const plus = _parent.querySelector('.plus');
        plus.style.transform = _parent.classList.contains('expanded') ? 'rotate(45deg)' : 'rotate(0)';
      });
    
    const toggleChild = (e) => {
    
      if (e.currentTarget == e.target) {
        const el = e.target;
        el.classList.toggle("active")
      }
    }
    
    const level2 = document.querySelectorAll(".hidden-text ul li:has(ul)");
    
    level2.forEach((li) => li.addEventListener("click", toggleChild))
    .tile-container {
      padding: 5px;
      font-size: 25px;
    }
    
    .rectangle {
      background-color: #0051a5;
      padding-right: 1em;
      padding-top: 1em;
      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;
      cursor: pointer;
      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;
      }
    }
    
    
    /*Hides the child list be default*/
    
    .hidden-text ul li ul {
      display: none;
    }
    
    
    /*active class toggles the visibility of the sub elements*/
    
    .hidden-text ul li.active ul{
      display: block;
    }
    
    li .plus{
      transform:rotate(0);
    }
    
    li.active .plus{
      transform:rotate(45deg);
    }
    
    /*changes the cursor to a pointer for the list items that have a child ul*/
    
    .hidden-text ul li:has(ul) .plus {
      float:right
    }
    
    .hidden-text ul li:has(ul) {
      cursor: pointer;
    }
    <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 <div class="plus radius"></div>
                <ul>
                  <li>More Text!!</li>
                </ul>
              </li>
              <li>Not Dropdown Text</li>
            </ul>
          </div>
        </div>
      </div>
    </body>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search