Breaking News: Grepper is joining You.com. Read the official announcement!

bootstrap 5 collapse with arrow

hansal answered on December 7, 2023 Popularity 8/10 Helpfulness 2/10

answer bootstrap 5 collapse with arrow

bootstrap 5 collapse with arrow

Comment

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/d45e7e578e.js" crossorigin="anonymous"></script>

<ul class="mymenu nav flex-column">
    <li class="nav-item"> 
        <a class="nav-link " href="#submenu1" data-toggle="collapse" data-target="#submenu1" aria-expanded="true">
            <span>Menu Item</span>
        </a>
        <div class="collapse show" id="submenu1" aria-expanded="true">
            <ul class="flex-column nav">
                <li class="nav-item">
                    <a class="nav-link py-0" href="#">
                        <span>Submenu Item</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link py-0" href="#">
                        <span>Submenu Item</span>
                    </a>
                </li>
            </ul>
        </div>
    </li>
    <li class="nav-item"> 
        <a class="nav-link " href="#submenu2" data-toggle="collapse" data-target="#submenu2">
            <span>Menu Item</span>
        </a>
        <div class="collapse show" id="submenu2" aria-expanded="true">
            <ul class="flex-column nav">
                <li class="nav-item">
                    <a class="nav-link py-0" href="#">
                        <span>Submenu Item</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link py-0" href="#">
                        <span>Submenu Item</span>
                    </a>
                </li>
            </ul>
        </div>
    </li>
</ul>

<style>
.nav-item{
    position:  relative;
}
.nav-link[data-toggle].collapsed:after {
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content: "\f078"; 
    color:  #444444;
    position: absolute;
    right: 10px;
}
.nav-link[data-toggle]:not(.collapsed):after {
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content: "\f077"; 
    color:  #444444;
    position: absolute;
    right: 10px;
}
</style>

Popularity 8/10 Helpfulness 2/10 Language html

Source: stackoverflow.com

Tags: bootstrap-5 collapse html

Link to this answer
Share Copy Link

Contributed on Dec 07 2023

hansal

0 Answers Avg Quality 2/10

bootstrap 5 collapse with arrow

Contents

More Related Answers

bootstrap 5 collapse with arrow

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.