const [num, setNum] = useState(-1); const toggleSet = (i) => { //setIsShowing(!isShowing); if(i == num){ setNum(-1); }else{ setNum(i); } }; <div key={uid()} className={`${styles.quickLinkmain} mobilearocianQuickHead ${num1 == k ? 'active' : 'hide' }`}> <div className={`${styles.quickLinkTitle} AcordianHeadText`} onClick={()=> toggleSet1(k)} type="button">{item.title}</div> <div className="AcordianDescWrap" style={{ display: num1 == k ? "block" : "none"}}> <ul> {item.innerData.map(((subItems, l) => <li key={uid()}><Link href={subItems.link}>{subItems.name}</Link></li> ))} </ul> </div> </div>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter