Menu icon Foundation
Foundation 6 Dropdown: Pane Doesn't Open on Click

Hello,

I'm having an issue toggling the dropdown pane. When data-hover is set to true, the following code works as expected and as shown in the documentation, however removing data-hover or setting it to false so that the button needs to be clicked to reveal the content does not work. The content is never revealed (on click, the "is-open" class is not being toggled).

This is happening whether the data-auto-focus="true" attribute (as shown in the docs) is set or not.

Any help would be appreciated, thanks in advance for your time.

<button id="_admin-menu" data-toggle="_admin-content">
    <i class="fa fa-dashboard"></i>
</button>

<div id="_admin-content" class="dropdown-pane" data-hover="false">
    <ul class="no-bullet text-center">
        LINKS
    </ul>
</div>
            

         

foundation 6dropdowndropdown-panedata-togglesitesDropdown panescontainersjavascript

Hello,

I'm having an issue toggling the dropdown pane. When data-hover is set to true, the following code works as expected and as shown in the documentation, however removing data-hover or setting it to false so that the button needs to be clicked to reveal the content does not work. The content is never revealed (on click, the "is-open" class is not being toggled).

This is happening whether the data-auto-focus="true" attribute (as shown in the docs) is set or not.

Any help would be appreciated, thanks in advance for your time.

<button id="_admin-menu" data-toggle="_admin-content">
    <i class="fa fa-dashboard"></i>
</button>

<div id="_admin-content" class="dropdown-pane" data-hover="false">
    <ul class="no-bullet text-center">
        LINKS
    </ul>
</div>
            

         
Rafi Benkual over 3 years ago

Looks like the data-dropdown attribute is missing. Adding it makes it work. http://codepen.io/rafibomb/pen/PZLQXe