CODEWITHSUNDEEP
javascriptnext.jstailwind-css
forest
forest

Reputation: 1464

TailwindCSS: Dropdown not working with group and group-focus in Nextjs

I want to display an array once a button is clicked. By default it is invisible. Just like in drop-downs in menu bars. I'm using group and group-focus. The array is getting invisible but on button click it's not reappearing!

<div className="group">
    <button className="pointer-events-auto">Ingredients</button>
       <ul className="invisible group-focus:visible grid sm:grid-cols-3 text-justify sm:text-sm text-xs grid-cols-2 gap-x-3 gap-y-1 list-decimal list-inside">
           {menu.ingredients.map(item => <li className="" key={item}>{ item }</li>)}
       </ul>
</div>

I've set the visibility for group-focus in next.config.js but still it's not working:

module.exports = {
  ...,
  variants: {
    extend: {
      backgroundColor: ['group-focus'],
      visibility: ['hover', 'focus', 'group-focus'],
    },
  },
  plugins: [],
}

Upvotes: 0

Views: 1445

Answers (1)

Theekshana Fernando
Theekshana Fernando

Reputation: 36

import React, { useState } from 'react'

function component() {
const [show, setShow] = useState(false)

const handleShow = () => {
    (show ? setShow(false) : setShow(true))
}
return (
    <div>
        <div className="group">
            <button onClick={handleShow} className="pointer-events-auto">Ingredients</button>
            <div className={show ? "block" : "hidden"}>
                <ul className="invisible group-focus:visible grid sm:grid-cols-3 text-justify sm:text-sm text-xs grid-cols-2 gap-x-3 gap-y-1 list-decimal list-inside">
                    {menu.ingredients.map(item => <li className="" key={item}>{item}</li>)}
                </ul>
            </div>
        </div>
    </div>
)
}

export default component

This will work fine.

Upvotes: 1

Related Questions