diff --git a/src/form.js b/src/form.js
index 445a3ee..fc01f1f 100644
--- a/src/form.js
+++ b/src/form.js
@@ -32,7 +32,7 @@ const usePrevious = (value) => {
   return ref.current;
 }
 
-const BasicWrapper = ({ entry, className, label, help, children, render, collapsed }) => {
+const BasicWrapper = ({ entry, className, label, help, children, render }) => {
   if (typeof entry === 'object') {
     return children
   }
@@ -47,16 +47,9 @@ const BasicWrapper = ({ entry, className, label, help, children, render, collaps
   const errorDisplayed = formState.isSubmitted || isDirty || isTouched
 
   if (render) {
-    return render({ entry, label, error, help, children, collapsed })
+    return render({ entry, label, error, help, children })
   }
 
-  const childrenWithProps = React.Children.map(children, child => {
-    if (React.isValidElement(child)) {
-      return React.cloneElement(child, { collapsed });
-    }
-    return child;
-  });
-
   return (
     <div className={`${classes.mt_10} ${className}`} style={{ position: 'relative' }}>
       {label && <label className={`${classes.flex} ${classes.ai_center} ${classes.mb_5}`} htmlFor={entry}>
@@ -69,7 +62,7 @@ const BasicWrapper = ({ entry, className, label, help, children, render, collaps
         </>}
       </label>}
 
-      {childrenWithProps}
+      {children}
       {error && <div className={classNames(classes.feedback, { [classes.txt_red]: errorDisplayed })}>{error.message}</div>}
     </div>
   )
@@ -223,6 +216,8 @@ export const Form = React.forwardRef(({ schema, flow, value, inputWrapper, onSub
     })
   }
 
+  const [expandedAll, setExpandedAll] = useState(false)
+
   const defaultValues = getDefaultValues(formFlow, schema, value);
   //FIXME: get real schema through the switch
 
@@ -293,6 +288,19 @@ export const Form = React.forwardRef(({ schema, flow, value, inputWrapper, onSub
         const clean = cleanOutputArray(data, schema)
         onSubmit(clean)
       }, onError)}>
+        <div className={classNames(classes.flex, classes.mt_20)}>
+          <button
+            type="button"
+            className={classNames(classes.btn, classes.btn_sm)}
+            style={{ marginLeft: 'auto' }}
+            onClick={e => {
+              if (e)
+                e.stopPropagation()
+              setExpandedAll(!expandedAll)
+            }}>
+            {expandedAll ? 'Expand all' : 'Collapse all'}
+          </button>
+        </div>
         {formFlow.map((entry, idx) => {
           const step = schema[entry]
 
@@ -327,7 +335,8 @@ export const Form = React.forwardRef(({ schema, flow, value, inputWrapper, onSub
             <BasicWrapper key={`${entry}-${idx}`} entry={entry} dirtyFields={dirtyFields} label={functionalProperty(entry, step?.label === null ? null : step?.label || entry)} help={step?.help} render={inputWrapper}>
               <Step key={idx} entry={entry} step={step}
                 schema={schema} inputWrapper={inputWrapper}
-                httpClient={maybeCustomHttpClient} functionalProperty={functionalProperty} />
+                httpClient={maybeCustomHttpClient} functionalProperty={functionalProperty}
+                expandedAll={expandedAll} />
             </BasicWrapper>
           )
         })}
@@ -355,14 +364,14 @@ const Footer = (props) => {
   )
 }
 
-const Step = ({ entry, realEntry, step, schema, inputWrapper, httpClient, defaultValue, index, functionalProperty, parent, onAfterChange, collapsed }) => {
+const Step = ({ entry, realEntry, step, schema, inputWrapper, httpClient, defaultValue, index, functionalProperty, parent, onAfterChange, expandedAll }) => {
   const classes = useCustomStyle();
   const { formState: { errors, dirtyFields, touchedFields, isSubmitted }, control, trigger, getValues, setValue, watch, register } = useFormContext();
 
   if (entry && typeof entry === 'object') {
     const errored = entry.flow.some(step => !!errors[step] && (dirtyFields[step] || touchedFields[step]))
     return (
-      <Collapse {...entry} errored={errored} collapsed={collapsed}>
+      <Collapse {...entry} errored={errored}>
         {entry.flow.map((en, entryIdx) => {
           const stp = schema[en]
           const err = typeof en === 'object' ? undefined : en.split('.').reduce((object, key) => {
@@ -394,9 +403,9 @@ const Step = ({ entry, realEntry, step, schema, inputWrapper, httpClient, defaul
           }
 
           return (
-            <BasicWrapper key={`collapse-${en}-${entryIdx}`} entry={en} label={functionalProperty(en, stp?.label === null ? null : stp?.label || en)} help={stp?.help} render={inputWrapper} collapsed={collapsed}>
+            <BasicWrapper key={`collapse-${en}-${entryIdx}`} entry={en} label={functionalProperty(en, stp?.label === null ? null : stp?.label || en)} help={stp?.help} render={inputWrapper}>
               <Step entry={en} step={stp} schema={schema}
-                collapsed={collapsed}
+                expandedAll={expandedAll}
                 inputWrapper={inputWrapper} httpClient={httpClient}
                 defaultValue={stp?.defaultValue} functionalProperty={functionalProperty} />
             </BasicWrapper>
@@ -458,7 +467,7 @@ const Step = ({ entry, realEntry, step, schema, inputWrapper, httpClient, defaul
                 value={props.value}
                 index={idx}
                 functionalProperty={functionalProperty}
-                collapsed={collapsed} />
+                expandedAll={expandedAll} />
             )
           })} />
       </CustomizableInput >
@@ -579,9 +588,9 @@ const Step = ({ entry, realEntry, step, schema, inputWrapper, httpClient, defaul
           return (
             <CustomizableInput render={step.render} field={{ parent, setValue: (key, value) => setValue(key, value), rawValues: getValues(), value: getValues(entry), onChange: v => setValue(entry, v, { shouldValidate: true }) }}>
               <NestedForm
-                schema={step.schema} flow={flow} step={step} parent={entry} collapsed={collapsed}
+                schema={step.schema} flow={flow} step={step} parent={entry}
                 inputWrapper={inputWrapper} maybeCustomHttpClient={httpClient} value={getValues(entry) || defaultValue}
-                index={index} functionalProperty={functionalProperty} errorDisplayed={errorDisplayed} />
+                index={index} functionalProperty={functionalProperty} errorDisplayed={errorDisplayed} expandedAll={expandedAll} />
             </CustomizableInput>
           )
 
@@ -755,16 +764,15 @@ const ArrayStep = ({ entry, step, component, disabled }) => {
   )
 }
 
-const NestedForm = ({ schema, flow, parent, inputWrapper, maybeCustomHttpClient, errorDisplayed, value, step, functionalProperty, index, ...props }) => {
+const NestedForm = ({ schema, flow, parent, inputWrapper, maybeCustomHttpClient, errorDisplayed, value, step, functionalProperty, index, expandedAll }) => {
   const { getValues, setValue, watch, trigger, formState } = useFormContext();
-  const [collapsed, setCollapsed] = useState(!!step.collapsed || props.collapsed);
-
-  useEffect(() => {
-    setCollapsed(props.collapsed)
-  }, [props.collapsed])
-
+  const [collapsed, setCollapsed] = useState(!!step.collapsed);
   const classes = useCustomStyle();
 
+  useEffect(() => {
+    if (!expandedAll || (expandedAll && parent.split('.').length >= 2))
+      setCollapsed(expandedAll)
+  }, [expandedAll])
 
   const schemaAndFlow = option(step.conditionalSchema)
     .map(condiSchema => {
@@ -842,7 +850,8 @@ const NestedForm = ({ schema, flow, parent, inputWrapper, maybeCustomHttpClient,
               inputWrapper={inputWrapper}
               httpClient={maybeCustomHttpClient}
               defaultValue={value && value[entry]}
-              functionalProperty={functionalProperty} />
+              functionalProperty={functionalProperty}
+              expandedAll={expandedAll} />
           </BasicWrapper>
         )
       })}
diff --git a/src/inputs/Collapse.js b/src/inputs/Collapse.js
index 484be72..6dade25 100644
--- a/src/inputs/Collapse.js
+++ b/src/inputs/Collapse.js
@@ -5,7 +5,6 @@ import { useCustomStyle } from '../styleContext'
 
 export const Collapse = (props) => {
   const [collapsed, setCollapsed] = useState(props.initCollapsed || props.collapsed)
-  const [expandedAll, setExpandedAll] = useState(false)
   const classes = useCustomStyle()
 
   const toggle = (e) => {
@@ -13,29 +12,11 @@ export const Collapse = (props) => {
     setCollapsed(!collapsed)
   };
 
-  const childrenWithProps = React.Children.map(props.children, child => {
-    if (React.isValidElement(child)) {
-      return React.cloneElement(child, { collapsed: expandedAll });
-    }
-    return child;
-  });
-
   return (
     <div>
       <hr className={classNames({ [classes.collapse_error]: props.errored })} />
       <div className={`${classes.cursor_pointer} ${classes.flex} ${classes.jc_between}`} onClick={toggle}>
         <span className={classNames(classes.collapse_label, { [classes.collapse_error]: props.errored })}>{props.label}</span>
-        <div style={{ marginLeft: 'auto' }} className={classNames(classes.flex)}>
-          <button
-            type="button"
-            className={classNames(classes.btn, classes.btn_sm, { [classes.collapse_error]: props.errored })}
-            onClick={e => {
-              if (e)
-                e.stopPropagation()
-              setExpandedAll(!expandedAll)
-            }}>
-            {expandedAll ? 'Expand all' : 'Collapse all'}
-          </button>
           <button
             type="button"
             className={classNames(classes.btn, classes.btn_sm, classes.ml_5, { [classes.collapse_error]: props.errored })}
@@ -43,14 +24,13 @@ export const Collapse = (props) => {
             {!!collapsed && <Eye size={16} />}
             {!collapsed && <EyeOff size={16} />}
           </button>
-        </div>
       </div>
       <div className={classNames(`${classes.ml_10}`, {
         [classes.display__none]: !!collapsed,
         [classes.flex]: !!props.inline,
         [classes.collapse__inline]: !!props.inline,
       })}>
-        {childrenWithProps}
+        {props.children}
       </div>
       {props.lineEnd && <hr />}
     </div>