Dropdown Default

[rasulkireev]

Apologies if question is trivial. I don't think it has been asked before, or at least I didn't find one.

How would I change the default state of the div with dropdown controller. The div that open up upon click doesn't have a hidden class in the source file, but one is added when page loads. I can't find a way to keep the div unhidden on page reload.

Can you help please? Thanks a ton in advance.

Here is the simplified version of my code:

    <div data-controller="dropdown">
      <div>
        <button
          type="button"
          class="inline-flex w-full px-4 py-2 text-sm font-medium text-gray-700 bg-white border-t border-b border-gray-200"
          id="menu-button"
          aria-expanded="true"
          aria-haspopup="true"
          data-action="dropdown#toggle click@window->dropdown#hide"
        >Using a QR Code</button>
      </div>
      <div data-dropdown-target="menu"
        class="w-full" <!-- Not Hidden -->
        role="menu"
        aria-orientation="vertical"
        aria-labelledby="menu-button"
        tabindex="-1"
      >
        <div class="p-4" role="none">
          <div id="qrcode"></div>
        </div>
      </div>
    </div>

When the page is rendered the line with a comment from above becomes this (hidden class is added):

<div 
  data-dropdown-target="menu" 
  class="w-full hidden" <!-- Loads as Hidden -->
  role="menu" 
  aria-orientation="vertical" 
  aria-labelledby="menu-button" 
  tabindex="-1"
>
        <div class="p-4" role="none">
           <div id="qrcode"></div>
        </div>
</div>