Skip to main content
ST FN

Dropdown

Demo

Installation

Import the function into the JavaScript file of your project

import { Dropdown } from "@overdog/fn"

Create and initialize an instance

new Dropdown(".filter-dropdown", {
   closeClickingOutside: true
}).init()

Add the Tailwind variants to the plugins section of your config file.

If you are using multiple elements from Overdog FN that require the same variants, you only need to add them once. You can also modify the data attributes added to each function using the attributes parameter {}.

module.exports = {
   // ...
   plugins: [
      plugin(function ({ addVariant }) {
         addVariant("is-open", "&[data-fn-is-open]")
         addVariant("parent-is-open", "[data-fn-is-open] &")
      })
   ]
}

Twig template Code


<div class="filter-dropdown max-w-[500px] relative"> {# the class filter-dropdown is only use for targeting with your JS instance #}
   <button 
      class="flex items-center border-b border-[#a5adb9] h-[50px] justify-between text-left w-full"
      aria-expanded="false"
      aria-controls="my-dropdown-id"
   >
      <span>Open me</span>
      {# caret #}
      <span class="
         border-b-0 border-x-transparent border-x-[0.3em] border-t-[0.3em] border-t-slate-600
         transition-all ease-linear duration-200
         parent-is-open:rotate-180"
      >
      </span>
   </button>
   <div 
      id="my-dropdown-id" {# only for aria-controls - not used by JS #}
      class="absolute hidden left-0 p-4 bg-white rounded-b-md shadow-md overflow-hidden w-full z-10
      parent-is-open:block
      ">
      <p>Hey wassup! Add a form here with checkbox, radio, etc. See an example in the Multiple dropdown filters or Single choice filter sections.</p>
   </div>
</div>

Options