Put and change arrow with collapsible div CSS

Giovanni Mosquera 0
Viewed 40

i have the followwing structure in my html code:

<ul id="urlcss">
   <li class="nav-submenu">
      <a class="collapsed" href="#" data-toggle="collapse" data-target="#submenu0">
         ADMIN
      </a>
      <div class="collapse" id="submenu0" aria-expanded="false">
         // Some menus check the image below
      </div>
   </li>
</ul>

And if you see that on browser, it looks like this:
enter image description here

With the menu collapse show, like this:
enter image description here

Ok what i want to do is, when a user press the li with nav-submenu class i want to show an arrow indicating that the collapse menu below belong to that li, and change the background color, i tried with css but nothing happens, here is an example of what i want (Look the arrow):
enter image description here

I tried doing this piece of code to place something like a holder but i doesn't work:

.nav-submenu[data-toggle].collapsed:after {
    content: " ▾";
}
.nav-submenu[data-toggle]:not(.collapsed):after {
    content: " ▴";
}
bootstrap-4 jquery javascript css html
2 Answers

This is using BootStrap 5 Nav Using Dropdowns

With very little css you can achieve what you are looking for.

.nav-link.dropdown-toggle:after {
  transform: rotateX(-180deg);
  transition: transform 500ms;
}

.nav-link.dropdown-toggle.show:after {
  transform: rotateX(0deg);
}

.nav .nav-item:hover{
  transition: background-color 500ms
}

.nav .nav-item:hover{
  background-color: lightblue;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>


<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li>
        <hr class="dropdown-divider">
      </li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

fnostro0

I've created for you a small example. Also is used a small js code to toggle default class name.

const menus = document.querySelectorAll('[data-toggle="collapse"]')
for (const menu of menus) {
  menu.addEventListener('click', function(event) {
    this.classList.toggle('collapsed');
  })
}
.nav-submenu a.collapsed:after {
    content: " ▾";
}
.nav-submenu a:not(.collapsed):after {
    content: " ▴";
}
.nav-submenu a:not(.collapsed)+div {
   display:none;
}
<ul id="urlcss">
   <li class="nav-submenu">
      <a class="" href="#" data-toggle="collapse">
         ADMIN
      </a>
      <div>
         // Some menus check the image below
      </div>
   </li>
</ul>

Andrei Musteata0
Related