title: React JS - Material UI ListItem (with Collapse API) onClick expand only one at a time close other
body: <p>React JS - Material UI ListItem (with Collapse API) onClick expand only one at a time close other. on click i need to open only one item at time. and when i click other the present opened should close.requirement is sidenavbar when i open click any menu , one should open . remaining or others should close</p>
  <pre><code>const isExpandable = items &amp;&amp; items.length &gt; 0;
        const [open, setOpen] = useState(false);
        const [menu, setMenu] = useState(false);
        // const { value, setValue } = useContext(SiderBarContext)
        const { expand, setExpand } = useContext(SiderBarContext)
        function handleClick() {
          // setOpen(!open);
    
          setMenu(!menu)
            setOpen(prevState =&gt; ({
              open: !prevState
            }))
          // setValue(!open);
          setExpand(true)
        }
      const MenuItemRoot = (
          &lt;&gt;
            {isExpandable ? &lt;AppMenuItemComponent
              className={isExpandable &amp;&amp; menu ? classes.menuItemActiveMore : classes.menuItemActiveLess}
              link={link}
              onClick={handleClick}
            &gt;
              {/* Display an icon if any */}
              {!!Icon &amp;&amp; (
                &lt;ListItemIcon className={classes.menuItemIcon}&gt;
                  {&lt;Icon /&gt;}
                &lt;/ListItemIcon&gt;
              )}
              &lt;ListItemText primary={name} inset={!Icon} /&gt;
              {/* Display the expand menu if the item has children */}
              {isExpandable &amp;&amp; !open &amp;&amp; &lt;ArrowDropDownIcon /&gt;}
              {isExpandable &amp;&amp; open &amp;&amp; &lt;ArrowDropDownIcon /&gt;}
            &lt;/AppMenuItemComponent&gt; : &lt;AppMenuItemComponent
              className={classes.menuItem}
              link={link}
              onClick={handleClick}
            &gt;
              {/* Display an icon if any */}
              {!!Icon &amp;&amp; (
                &lt;ListItemIcon className={classes.menuItemIcon}&gt;
                  {/* &lt;Avatar alt=&quot;Remy Sharp&quot; src={Icon} className={classes.iconImage}/&gt; */}
                  {&lt;Icon /&gt;}
                &lt;/ListItemIcon&gt;
              )}
              &lt;ListItemText primary={name} inset={!Icon} /&gt;
              {/* Display the expand menu if the item has children */}
              {isExpandable &amp;&amp; !open &amp;&amp; &lt;ArrowDropDownIcon /&gt;}
              {isExpandable &amp;&amp; open &amp;&amp; &lt;ArrowDropDownIcon /&gt;}
            &lt;/AppMenuItemComponent&gt;}
          &lt;/&gt;
        );
      
        const MenuItemChildren = isExpandable ? (
          &lt;Collapse className={classes.menuChildItem} in={open} timeout=&quot;auto&quot; unmountOnExit&gt;
            {/* &lt;Divider /&gt; */}
            &lt;List component=&quot;div&quot; disablePadding &gt;
              {items.map((item, index) =&gt; (
                &lt;&gt;
                  &lt;AppMenuItem {...item}  key={index} /&gt;
                &lt;/&gt;
              ))}
            &lt;/List&gt;
          &lt;/Collapse&gt;
        ) : null;
      
        return (
          &lt;&gt;
            {MenuItemRoot}
            {MenuItemChildren}
          &lt;/&gt;
        );
      };
  </code></pre>