Navbar toggle:active issue – Blancer.com Tutorials and projects

Currently i am facing an issue with my desired CSS effects. So currently the problem i am facing is that i have a navbar toggle which is in the color black, when i click on the navbar toggle i want it so that when it expands, the navbar background color will be red, then when i click on it and retract the navbar, the color will went from red back to black. But current issue is it only turns red once i click on it, when i release it will turn back to black. The script i was suggested is this below.

PHP Laravel

<header class="header header_style_01">
    <nav class="megamenu navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" id="toggle-button" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/"><img src="images/logos/smsGuru_logo.png"
                        height="60px" alt="sms guru" title="cheap sms"></a>
            </div>



            <div id="navbar" class="navbar-collapse collapse">
                <!-- <ul class="nav navbar-nav" style="margin-top: 8px;margin-left: 550px;"> -->
                <!-- <li><a class="active" href="index.html">Home</a></li> -->
                <!--     <li><a href="features.html">Features </a></li>
                    <li><a href="domain.html">Domain</a></li>
                    <li><a href="hosting.html">Hosting</a></li>
                    <li><a href="pricing.html">Pricing</a></li>
                    <li><a href="testimonials.html">Testimonials</a></li>
                    <li><a href="contact.html">Contact</a></li> -->

                <!--  <li><h1 class="contact_me"><b><a href="http://360.my/w/60123240066">+6012 324 0066</a></b></h1></li> -->
                <!-- <li><h1 class="contact_me"><b><a href="http://360.my/w/60123240066">+6012 324 0066</a></b></h1></li> -->

                <!-- </ul> -->
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <h1 class="contact_me"><b><a
                                    href="https://wa.me/60123240066?text=I+would+like+to+inquire+about"
                                    target="_blank">+6012 3240 066</a></b></h1>
                    </li>
                    <!-- <li><a class="btn-light btn-radius btn-brd log" href="#" data-toggle="modal" data-target="#login"><i class="fa fa-unlock"></i> Register</a></li> -->
                    <li><a class="btn-light btn-radius btn-brd log" href="https://sms.360.my/developers/v3.0"><i
                                class="fa fa-file"></i> API</a></li>
                    <li><a class="btn-light btn-radius btn-brd log" href="https://sms.360.my/register"><i
                                class="fa fa-unlock"></i> Register</a></li>
                    <!-- <li><a class="btn-light btn-radius btn-brd log" href="#" data-toggle="modal" data-target="#login"><i class="fa fa-lock"></i> Login</a></li> -->
                    <li><a class="btn-light btn-radius btn-brd log" href="https://sms.360.my/login"><i
                                class="fa fa-lock"></i>
                            Login</a></li>
                </ul>
            </div>
        </div>
    </nav>
</header>

custom.css file below

 .header_style_01 {
    background-color: #2d3032;
    display: block;
    left: 0;
    padding: 15px 20px 5px !important;
    position: relative;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 111;
}

.navbar-default .navbar-toggle {
    border-color: #2d3032;
    color: #fff !important;
    background-color: #2d3032 !important;
}
.navbar-default .navbar-toggle:active{
    background-color: #DD0000 !important;
    border-color: #DD0000;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: transparent;
}

Script in index.blade.php

<script>
document.addEventListener('DOMContentLoaded', function() {
    var button = document.getElementById('toggle-button');
    var navbarCollapse = document.getElementById('navbar');

    // Toggle 'active' class when the button is clicked
    button.addEventListener('click', function() {
        // Use a timeout to wait for the collapse animation to complete
        setTimeout(function() {
            if (navbarCollapse.classList.contains('in') || navbarCollapse.classList.contains('show')) {
                button.classList.add('active');
            } else {
                button.classList.remove('active');
            }
        }, 350); // Adjust delay to match the Bootstrap collapse animation duration
    });

    // Add 'active' class when the navbar is shown
    navbarCollapse.addEventListener('shown.bs.collapse', function() {
        button.classList.add('active');
    });

    // Remove 'active' class when the navbar is hidden
    navbarCollapse.addEventListener('hidden.bs.collapse', function() {
        button.classList.remove('active');
    });
});
</script>.

I place this code at the index.blade.php same with the code. But it still wont work. Tell me how can i resolve this issue?

At first is i use navbar toggle:hover. But the effect is when i click on it it will stay red. but if i click on the toggle again, it will stay red, and it will stay red unless i click on area outside the navbar.