Opening and closing dropdown in html

Issue

When I click on buttons nothing is happening. I am trying to make them open and close. How can I solve this?werrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr

HTML

    <div class="sidenav">
    <img src="assets/images/placeholder-logo.svg">

    <li ng-repeat="item in data" ng-if="dataLoaded">
        <button class="dropdown-btn">{{item.streamName}}
            <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-container">
            <ul>
                <li ng-repeat="element in item.apps">
                    <button class="dropdown-btn">{{element.appName}}
                        <i class="fa fa-caret-down" ng-if="element.sheets.length"></i>
                    </button>
                    <ul>
                        <li ng-repeat="sheet in element.sheets">
                            <button class="dropdown-btn">{{sheet.sheetName}}
                            </button>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </li>
</div>

JAVASCRIPT

var dropdown = document.getElementsByClassName("dropdown-btn");
            var i;

            for (i = 0; i < dropdown.length; i++) {
            dropdown[i].addEventListener("click", function() {
                this.classList.toggle("active");
                var dropdownContent = this.nextElementSibling;
                if (dropdownContent.style.display === "block") {
                dropdownContent.style.display = "none";
                } else {
                dropdownContent.style.display = "block";
                }
            });
            } 

Solution

Your code is working, but it will hide the content area only after the second click on the button because the initial value dropdownContent.style.display is empty string, but you check if it’s equals to "block".

So the first click on the button set the content area to display: block.

You need to change the check to dropdownContent.style.display === ""

var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
    dropdown[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var dropdownContent = this.nextElementSibling;
        if (dropdownContent.style.display === "block" || dropdownContent.style.display === "") {
            dropdownContent.style.display = "none";
        } else {
            dropdownContent.style.display = "block";
        }
    });
} 

Answered By – valenjeb

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published