[Solved] Changing the behavior of an element in dropdown div (banner) opening smoothly

For your first problem, the smooth transition, just change or remove the max-height properties and replace them with just the height property.

Max-height is not required here and messes with the css transition.

And the second transition property is not needed as it is already defined.

.dropdown-content-container {
  overflow-y: hidden;
  height: 0;
  transition: all 1.50s;
}

.btn-dropdown.open>.dropdown-content-container {
  height: 500px;
}

For your second problem of changing the name, well you must put the text you want to change into an element so you can access it directly and only change that label and not all of the element (including the container).

So first we need to change the HTML code (I used span but it doesn’t matter)

<div class="btn-dropdown">
    <span class="dropdown-content-label">Show ▼</span>
    <div class="dropdown-content-container">
        <!--Banner-->
    </div>
</div>

and then we need to slightly adjust the JS code to fit this HTML adjustment by getting the label and not the whole dropdown element.

const btns = document.querySelectorAll('.btn-dropdown')

btns.forEach(btn => {
    btn.addEventListener('click', function(e) {
        const initialText = "Show ▼"
        const label = btn.querySelector(".dropdown-content-label");
        if (label.textContent.toLowerCase() === initialText.toLowerCase()) {
            label.textContent="Hide ▲";
        } else {
            label.textContent = initialText;
        }  
        btn.classList.toggle('open');
    });
})