Accordion: use children instead of content

app/soapbox/features/public_timeline/index.js

@@ -92,7 +92,9 @@ class CommunityTimeline extends React.PureComponent {
         <div className='explanation-box'>
           <Accordion
             headline={<FormattedMessage id='fediverse_tab.explanation_box.title' defaultMessage='What is the Fediverse?' />}
-            content={(
+            expanded={explanationBoxExpanded}
+            onToggle={this.toggleExplanationBox}
+          >
             <FormattedMessage
               id='fediverse_tab.explanation_box.explanation'
               defaultMessage='{site_title} is part of the Fediverse, a social network made up of thousands of independent social media sites (aka "servers"). The posts you see here are from 3rd-party servers. You have the freedom to engage with them, or to block any server you don&apos;t like. Pay attention to the full username after the second @ symbol to know which server a post is from. To see only {site_title} posts, visit {local}.'
@@ -109,10 +111,7 @@ class CommunityTimeline extends React.PureComponent {
                 ),
               }}
             />
-            )}
-            expanded={explanationBoxExpanded}
-            onToggle={this.toggleExplanationBox}
-          />
+          </Accordion>
         </div>
         <StatusListContainer
           scrollKey={`${timelineId}_timeline`}

app/soapbox/features/soapbox_config/index.js

@@ -308,7 +308,9 @@ class SoapboxConfig extends ImmutablePureComponent {
             </FieldsGroup>
             <Accordion
               headline={intl.formatMessage(messages.rawJSONLabel)}
-              content={(
+              expanded={this.state.jsonEditorExpanded}
+              onToggle={this.toggleJSONEditor}
+            >
               <div className={this.state.jsonValid ? 'code-editor' : 'code-editor code-editor--invalid'}>
                 <SimpleTextarea
                   hint={intl.formatMessage(messages.rawJSONHint)}
@@ -317,10 +319,7 @@ class SoapboxConfig extends ImmutablePureComponent {
                   rows={12}
                 />
               </div>
-              )}
-              expanded={this.state.jsonEditorExpanded}
-              onToggle={this.toggleJSONEditor}
-            />
+            </Accordion>
           </fieldset>
           <div className='actions'>
             <button name='button' type='submit' className='btn button button-primary'>

app/soapbox/features/ui/components/accordion.js

@@ -12,7 +12,7 @@ export default @injectIntl class Accordion extends React.PureComponent {
 
   static propTypes = {
     headline: PropTypes.node.isRequired,
-    content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
     expanded: PropTypes.bool,
     onToggle: PropTypes.func,
     intl: PropTypes.object.isRequired,
@@ -29,7 +29,7 @@ export default @injectIntl class Accordion extends React.PureComponent {
   }
 
   render() {
-    const { headline, content, expanded, intl } = this.props;
+    const { headline, children, expanded, intl } = this.props;
 
     return (
       <div className={classNames('accordion', { 'accordion--expanded' : expanded })}>
@@ -42,7 +42,7 @@ export default @injectIntl class Accordion extends React.PureComponent {
           {headline}
         </button>
         <div className='accordion__content'>
-          {content}
+          {children}
         </div>
       </div>
     );