score:1
Accepted answer
change accordion
to:
class accordion extends react.component {
render() {
const { title, content, expand, onclick } = this.props;
return (
<div>
<dt classname={expand ? 'title is-expanded' : 'title'} onclick={onclick}>
{title}
</dt>
<dd classname={expand ? 'content is-expanded' : 'content'} onclick={onclick}>
<p>{content}</p>
</dd>
</div>
);
}
}
and application
to:
class application extends react.component {
// ...
render() {
const accordionlist = [{ title: 'first accordion', content: 'content 1' }, { title: 'second accordion', content: 'content 2' }, { title: 'third accordion', content: 'content 3' }];
// ...
<dl classname="accordion">
{
accordionlist.map((item, index) => (
<accordion title={item.title} content={item.content} onclick={this.toggle(index + 1)} expand={this.state[`block${index+1}`]} />
))
}
</dl>
// ...
}
update 1
i had another doubt. the number of blocks might not always be 3 then how can i dynamically set the block values (block1, block2 etc) to false in this.state and to expand in this.setstate?
all of the changes are required in application
component. to make it work you need:
- move
accordionlist
fromrender()
to the state. i addid
property to each element (and then use it insidemap()
). it makes sense to keepaccordionlist
in the state instead ofrender()
function. - tweak
toggle(id)
andtoggleexpand(expand)
to use blockid
instead of array index.
class application extends react.component {
constructor (props) {
super(props);
this.state = {
blocks: [
{ id: 1, title: 'first accordion', content: 'content 1', expanded: true },
{ id: 2, title: 'second accordion', content: 'content 2', expanded: false },
{ id: 3, title: 'third accordion', content: 'content 3', expanded: false },
{ id: 4, title: 'fourth accordion', content: 'content 4', expanded: false }
]
};
}
toggle(id) {
this.setstate((prevstate) => {
const index = prevstate.blocks.findindex(item => item.id == id);
prevstate.blocks[index].expanded = !prevstate.blocks[index].expanded;
return { blocks: prevstate.blocks };
});
}
toggleexpand(expand) {
this.setstate((prevstate) => {
const blocks = prevstate.blocks.map(item => {
item.expanded = expand;
return item;
});
return { blocks };
});
}
render() {
return (
<div classname="container">
<h1>react accordion</h1>
<button type="button" classname="btn" onclick={() => this.toggleexpand(true)}>expand all</button>
<button type="button" classname="btn" onclick={() => this.toggleexpand(false)}>collapse all</button>
<dl classname="accordion">
{
this.state.blocks.map(item => (
<accordion key={item.id} title={item.title} content={item.content} expand={item.expanded} onclick={() => this.toggle(item.id)} />
))
}
</dl>
</div>
);
}
}
class accordion extends react.component {
render() {
const { title, content, expand, onclick } = this.props;
return (
<div>
<dt classname={expand ? 'title is-expanded' : 'title'} onclick={onclick}>
{title}
</dt>
<dd classname={expand ? 'content is-expanded' : 'content'} onclick={onclick}>
<p>{content}</p>
</dd>
</div>
);
}
}
reactdom.render(<application />, document.getelementbyid('app'));
@import url("https://fonts.googleapis.com/css?family=pt+sans");
html, body, #app {
height: 100%;
}
.container {
min-height: 100%;
padding: 30px;
font-family: 'pt sans';
text-align: center;
}
.container h1 {
text-align: center;
color: #1569a8;
}
.container .btn {
display: inline-block;
margin-bottom: 20px;
border: 1px solid #1569a8;
background: white;
color: #1569a8;
padding: 5px 10px;
border-radius: 5px;
margin-right: 5px;
font-size: 15px;
cursor: pointer;
outline: none;
}
.container .btn:hover {
background: #1569a8;
color: white;
-webkit-transition: .5s;
transition: .5s;
}
.accordion {
margin: 0 auto;
width: 80%;
}
.accordion .title {
padding: 30px 30px;
cursor: pointer;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
color: white;
position: relative;
font-size: 20px;
background: #1569a8;
margin-bottom: -1px;
border-bottom: 1px solid #0e4671;
text-align: left;
}
.accordion .title::after {
content: "+";
font-size: 18px;
color: white;
-webkit-transition: -webkit-transform .5s ease-in-out;
transition: -webkit-transform .5s ease-in-out;
transition: transform .5s ease-in-out;
transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out;
position: absolute;
right: 30px;
font-family: monospace;
}
.accordion .title.is-expanded {
-webkit-transition: background .5s;
transition: background .5s;
background: #0e4671;
}
.accordion .title.is-expanded::after {
content: "-";
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
.accordion .content {
overflow: hidden;
max-height: 0;
-webkit-transition: max-height .5s;
transition: max-height .5s;
margin: 0;
padding: 0 30px;
border: solid 1px #eeeeee;
border-top: 0;
background: #e8f4fc;
}
.accordion .content p {
padding: 30px 0;
margin: 0;
opacity: 0;
-webkit-transition: .5s;
transition: .5s;
}
.accordion .content.is-expanded {
max-height: 500px;
overflow: hidden;
}
.accordion .content.is-expanded p {
opacity: 1;
}
.accordion:after {
width: 100%;
height: 10px;
display: block;
background: #0e4671;
content: '';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>
Source: stackoverflow.com
Related Query
- React accordion with expand all and collapse all
- Accordion expand card with react and css
- How to expand and collapse only the first item in accordion using react hooks?
- react expand and collapse just one panel
- React Table using hooks expand and collapse rows
- In react with hooks and bootstrap, how do I change chevron as accordion opens?
- React with conditional promises chain and wait for them all before send dispatch
- All TableRows are rerendered each time a row is selected with React and material-ui
- React Component Open and Collapse Animation with dynamic content
- How to expand and collapse the table rows in plain react js. Show only one row if the description of the row is multiple and show the expand button
- React js regex find all words beginning and ending with __
- React input elements all re-render when onChange is called on a single input, even with memo on the input and useCallback on the onChange
- Expand animation with requestAnimationFrame and React doesn't work sometimes
- Using an ES6 Map with React and MobX doesn't rerender on all changes
- React Accordion opens and closes all elements
- Custom Accordion transition animation not working on collapse and expand
- Image load with Accordion using react and Material UI
- Get all checked checkboxes and their relative data with React + Redux
- How to Uncheck all checkboxes with a button. Input tag in child and button in parent. react - table
- How can I show sorting icons all the time and with blue color for current sorting column in react material-table
- Refreshing Component and not all view with react
- How to test a className with the Jest and React testing library
- Add Favicon with React and Webpack
- SyntaxError with Jest and React and importing CSS files
- How to import CSS modules with Typescript, React and Webpack
- How to mock React component methods with jest and enzyme
- How to set up Babel 6 stage 0 with React and Webpack
- Form validation with react and material-ui
- Formatting code with <pre> tag in React and JSX
- Multiple classNames with CSS Modules and React
More Query from same tag
- How to disable and enable a text field during a reactjs event?
- Why isn't my React Form sending?
- Not able to install MERN stack
- Axios promise in a loop
- How can I wait for state to change in Redux Saga before using google tag manager?
- ReactJS + Redux: How to wait until dispatch has been completed before moving onto next step?
- Redux Form Variables
- Best Way to load model into redux store on route load
- Styled Components rendering Styled tag based on props
- setState not setting state variable React
- getStaticProps doesn't work when reload the page hosted on vercel
- Display and hide elements depending on state
- React components not getting displayed on running the code in asp.net
- Set select default value doesn't work
- React bootstrap form is not rendering as expected
- Fetch data from multiple pages of an API in react native
- How to stop jest updateSnapshot from replacing `<Measure` to `<_class`
- Failed to type word in ReactJS form
- How to push to History in React Router v4?
- Not sure why promise still being returned when i am await
- Can I put a conditional here in the value?
- Why can't i display my movies by React JS?
- React Router with Material UI doesn't render the component
- How to fix "FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory" error
- What is the correct way to update state and render the component?
- How to use same lines of code in all components in react?
- React-Spring - Change Transition Animation Speed
- How to use Linq in React Js
- Why need front end stores firebase token?
- React and Redux Architecture