How to simulate expanding effect in bootstrap

March 8, 2023

I have this react code:

const[open, setOpen] = useState(false);
const zoom = () => {
    if(open){
        setOpen(false);
    }
    else{
        setOpen(true);
    }
}

return (
    <div><button>zoom in and out</button></div>
    <div className="row">
        <div className={`col col-${open ? '12' : '9'}`}>
            Content than can be expanded    
        </div>
        {
            !open && 
        <div className="col col-3">
            content that gets hidden when zooming in
        </div>  
        }
    </div>

)

By default you see 2 columns. The main that is 9/12. The right that is 3/12.
When button is clicked, the main column will become 12/12, hence taking up all the space of the row.
While the one that is 3/12 hides.

This works. But it is not a good effect. I would like to have some kind of animation. Like having the main div expanding to take over all the space.

>Solution :

When you change col-12 to col-9 and vice versa, you are infact changing the width of the div element.

Dom Elements, HTMLDivElement in this particular case, has a style attribute which is of type React.CSSProperties. Using the style attribute and the transition property, animate the width of the div element.

style={{transition: "width 0.5s"}}

<div className={`col col-${open ? '12' : '9'}`} 
     style={{transition: "width 0.5s"}}>

Full code

const App = () => {
 const[open, setOpen] = React.useState(false);
 const zoom = () => setOpen(!open)

 return (
    <>
      <div>
        <button onClick={zoom}>zoom in and out</button>
      </div>
      <div className="container">
        <div className="row">
          <div style={{transition: "width 0.5s"}} className={`bg-primary col col-${open ? '12' : '9'}`}>
              Content than can be expanded
          </div>
          {
              !open && 
          <div className="col col-3">
           content that gets hidden when zooming in
          </div>  
          }
      </div>   
    </div>  
   </>)
}