CODEWITHSUNDEEP
javascripthtmlcssangularjs
Efe Kekikciler
Efe Kekikciler

Reputation: 55

Opening and closing dropdown in html

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";
                }
            });
            }

Upvotes: 1

Views: 56

Answers (1)

valenjeb
valenjeb

Reputation: 136

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";
        }
    });
}

Upvotes: 1

Related Questions