Question 179105 in Reactjs Question posted in
The new location for the React Documentation can be found here.

able Can Reactjs create a horizontal expandable element?

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>
  )
}

````
Tags:

2

Answers


  1. 0

    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;
 
}
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search