使用可折叠 div CSS 放置和更改箭头

Question

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:

With the menu collapse show, like this:

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):

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: " ▴";
}

Answer 1

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>

Answer 2

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>