CODEWITHSUNDEEP
reactjsreact-hooksexpandable
Brandon W
Brandon W

Reputation: 1

React Horizontal expand

React horizontal expand. I am struggling with such a simple thing in React. I am trying to just extend my Div container from 500px to 900px or full width on button click. I can only make it appear and disappear. What am I missing, please? Using React hooks. Thanks in advance

Codepen:

codepen.io/brandonwirz/pen/dygBPrb

` React horizontal expand. I am close but on collapsed the container disappears. Again, I want
the container to go from around 500px to 900px or full width and vice versa.

const Collapse = ({ collapsed, expanded, children }) => {
const [isCollapsed, setIsCollapsed] = React.useState(collapsed)
//   const [isExpanded, setIsExpanded] = React.useState("");
return (
 <div className="container">
   <button
    className="collapse-button"
    onClick={() => setIsCollapsed(!isCollapsed)}
  >
    {isCollapsed ? "Show small" : "Show expanded"} content
  </button>
  <div
    className={`collapse-content ${isCollapsed ? "collapsed" : "expanded"}`}
    aria-expanded={isCollapsed}
  >
    {children}
  </div>
 </div>
  )
}

````

Upvotes: 0

Views: 452

Answers (2)

John Ocean
John Ocean

Reputation: 496

in CSS:

you wrote this

.collapsed-content.expanded { width:900px; }

which is wrong.

write this

.collapse-content.expanded { width:900px; }

It's a spell mistake.

Upvotes: 0

pjaoko
pjaoko

Reputation: 61

The js is working fine, the problem is with the CSS. You cannot see the changes because you've set the container's width to 500px, and also given it a border. These styles should be removed, and set on .collapse-content instead.

.container {
  height: 300px;
  padding:10px;
  
}
.collapse-button {
  width: 180px;
}

.collapse-content {
  border: solid 3px grey;
  margin-top: 1em;
}
.collapse-content.collapsed {
  width:500px;
}

.collapsed-content.expanded {
  width:900px;
 
}

Upvotes: 0

Related Questions