如何水平折叠react-bootstrap手风琴面板？

Question

I am working with the Panel component from React-Bootstrap page here - https://react-bootstrap.github.io/components/panel/ - and i would like to use their accordion feature with the caveat that the panel body's (Panel.Body) opens horizontally (open to the right of the Panel.Headings that are shown).

Here is one of the examples from their page:

 const PanelGroup = ReactBootstrap.PanelGroup; const Panel = ReactBootstrap.Panel; class App extends React.Component { constructor(props) { super(props); } render() { return ( <PanelGroup accordion id="accordion-uncontrolled-example"> <Panel style={{ display: 'flex' }} eventKey="1"> <Panel.Heading style={{ margin: '0 2% 0 0' }}> <Panel.Title toggle>Panel heading 1</Panel.Title> </Panel.Heading> <Panel.Body collapsible> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </Panel.Body> </Panel> <Panel style={{ display: 'flex' }} eventKey="2"> <Panel.Heading style={{ margin: '0 2% 0 0' }}> <Panel.Title toggle>Panel heading 2</Panel.Title> </Panel.Heading> <Panel.Body collapsible> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </Panel.Body> </Panel> <Panel style={{ display: 'flex' }} eventKey="3"> <Panel.Heading style={{ margin: '0 2% 0 0' }}> <Panel.Title toggle>Panel heading 3</Panel.Title> </Panel.Heading> <Panel.Body collapsible> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </Panel.Body> </Panel> </PanelGroup> ) } } ReactDOM.render( < App / > , document.getElementById('root') ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.1/react-bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div id='root'> Come On Work! </div> 

I have added display: flex to wrap the panels, although I am not getting the desired layout here. Rather than extending inline, with the body having the same vertical flush as its own heading, I would like it if the panel was always vertically flush with Panel Heading 1, regardless of which panel it was that was clicked open.

Additionally, I would like for the Panel Heading to remain the same width, rather than crunch up to a very small width, when the panel is opened.

Clearly I'm not sure if react-bootstrap Panel component is the right tool for this, or if i should create my own custom horizontal accordion tool (not quite sure how to do that though). That is part of what I am asking as well!

Thanks as always for any help.

Answer 1

well created this working snippet where the panels work like in react-bootstrap examples.

But not sure if I understand what exactly you look for visually?

you want instead of slide down effect when toggling to have a slide right?

how exactly? you have the panel title as a block so where the content will fit in?

 const PanelGroup = ReactBootstrap.PanelGroup; const Panel = ReactBootstrap.Panel; class PanelHorizontal extends React.Component { constructor(props) { super(props); this.state = { visible: false } } render() { const classesNames = ['panelHorizontal']; if (this.state.visible){ classesNames.push('slideIn'); } else { classesNames.push('slideOut'); } return ( <div> <h1 className="title" onClick={()=>this.setState({visible: !this.state.visible})} >click to toggle</h1> <div className={classesNames.join(' ')}> content here </div> </div> ); }; } class App extends React.Component { constructor(props) { super(props); } render() { return ( <PanelHorizontal /> ) } } ReactDOM.render( < App / > , document.getElementById('root') ); 

 .panelHorizontal { width: 220px; transform: translateX(-220px); transition: transform 400ms ease-in; } .panelHorizontal.slideIn { transform: translateX(0); } .panelHorizontal.slideOut { transform: translateX(-220px); } .title { cursor: pointer; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.1/react-bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div id='root'> Come On Work! </div>