diff --git a/packages/bootstrap/src/AccordionBody.tsx b/packages/bootstrap/src/AccordionBody.tsx
index 192085e..f0f83f2 100644
--- a/packages/bootstrap/src/AccordionBody.tsx
+++ b/packages/bootstrap/src/AccordionBody.tsx
@@ -8,24 +8,30 @@ import AccordionCollapse from "./AccordionCollapse";
 import AccordionItemContext from "./AccordionItemContext";
 import {BsPrefixRefForwardingComponent, BsPrefixProps} from "./helpers";
 
-export interface AccordionBodyProps extends BsPrefixProps, JSX.HTMLAttributes<HTMLElement> {}
+export interface AccordionBodyProps extends BsPrefixProps, JSX.HTMLAttributes<HTMLElement> {
+  unmountOnExit?: boolean;
+}
 
 const defaultProps: Partial<AccordionBodyProps> = {
   as: "div",
 };
 
 const AccordionBody: BsPrefixRefForwardingComponent<"div", AccordionBodyProps> = (p) => {
-  const [local, props] = splitProps(mergeProps(defaultProps, p), [
+  const [local, q] = splitProps(mergeProps(defaultProps, p), [
     "as",
     "bsPrefix",
     "class",
-    "className"
+    "className",
+  ]);
+  const [cProps, props] = splitProps(q, [
+    "unmountOnExit",
   ]);
   const bsPrefix = useBootstrapPrefix(local.bsPrefix, "accordion-body");
   const context = useContext(AccordionItemContext);
+  console.log(cProps);
 
   return (
-    <AccordionCollapse eventKey={context.eventKey}>
+    <AccordionCollapse eventKey={context.eventKey} {...cProps}>
       <Dynamic component={local.as} {...props} class={classNames(local.class, local.className, bsPrefix)}/>
     </AccordionCollapse>
   );
diff --git a/packages/bootstrap/src/Collapse.tsx b/packages/bootstrap/src/Collapse.tsx
index 97f38bd..8268b76 100644
--- a/packages/bootstrap/src/Collapse.tsx
+++ b/packages/bootstrap/src/Collapse.tsx
@@ -1,6 +1,6 @@
 // ported from https://github.com/react-bootstrap/react-bootstrap/blob/f11723114d532cfce840417834a73733a8436414/src/Collapse.tsx
 
-import {children, JSX, mergeProps, splitProps} from "solid-js";
+import {children, createSignal, JSX, mergeProps, splitProps} from "solid-js";
 import css from "dom-helpers/css";
 import {
   TransitionStatus,
@@ -126,7 +126,8 @@ const Collapse = (p: CollapseProps) => {
     local.onExiting?.(elem as HTMLElement);
   };
 
-  const resolvedChildren = children(() => local.children);
+  const [mounted, setMounted] = createSignal(props.in);
+  const resolvedChildren = children(() => mounted() && local.children);
   let prevClasses: string;
 
   return (
@@ -142,6 +143,7 @@ const Collapse = (p: CollapseProps) => {
     >
       {
         ((state: TransitionStatus, innerProps: {ref: (el: HTMLElement) => void}) => {
+          setMounted(state !== UNMOUNTED);
           const el = resolvedChildren() as HTMLElement;
           innerProps.ref(el);
           const newClasses = classNames(
diff --git a/packages/bootstrap/src/Fade.tsx b/packages/bootstrap/src/Fade.tsx
index 2493593..b86421b 100644
--- a/packages/bootstrap/src/Fade.tsx
+++ b/packages/bootstrap/src/Fade.tsx
@@ -1,7 +1,7 @@
 // ported from https://github.com/react-bootstrap/react-bootstrap/blob/f11723114d532cfce840417834a73733a8436414/src/Fade.tsx
 
-import {children, JSX, mergeProps, splitProps} from "solid-js";
-import {TransitionStatus, ENTERED, ENTERING, TransitionCallbacks} from "solid-react-transition";
+import {children, createSignal, JSX, mergeProps, splitProps} from "solid-js";
+import {TransitionStatus, ENTERED, ENTERING, TransitionCallbacks, UNMOUNTED} from "solid-react-transition";
 import TransitionWrapper from "./TransitionWrapper";
 import transitionEndListener from "./transitionEndListener";
 import triggerBrowserReflow from "./triggerBrowserReflow";
@@ -46,13 +46,15 @@ const Fade = (p: FadeProps) => {
     props.onEnter?.(node, isAppearing);
   };
 
-  const resolvedChildren = children(() => local.children);
+  const [mounted, setMounted] = createSignal(props.in);
+  const resolvedChildren = children(() => mounted() && local.children);
   let prevClasses: string;
 
   return (
     <TransitionWrapper addEndListener={transitionEndListener} onEnter={handleEnter} {...props}>
       {
         ((status: TransitionStatus, innerProps: {ref: (el: Element) => void}) => {
+          setMounted(status !== UNMOUNTED);
           let el = resolvedChildren() as Element;
           while (typeof el === "function") el = (el as Function)();
           innerProps.ref(el);
diff --git a/packages/core/src/Modal.tsx b/packages/core/src/Modal.tsx
index 0d55949..5be8086 100644
--- a/packages/core/src/Modal.tsx
+++ b/packages/core/src/Modal.tsx
@@ -438,7 +438,8 @@ export const Modal = (p: ModalProps) => {
     },
   );
 
-  const child = children(() => local.children);
+  const show = () => container() && dialogVisible()
+  const child = children(() => show() && local.children);
   const getChildAsDocument = () => {
     const c = child();
     (c as HTMLElement)?.setAttribute?.("role", "document");
@@ -495,7 +496,7 @@ export const Modal = (p: ModalProps) => {
   };
 
   return (
-    <Show when={container() && dialogVisible()}>
+    <Show when={show()}>
       <Portal mount={container()!}>
         <Backdrop />
         <Dialog />
diff --git a/packages/transition/src/Transition.tsx b/packages/transition/src/Transition.tsx
index 0a67e75..1256f1d 100644
--- a/packages/transition/src/Transition.tsx
+++ b/packages/transition/src/Transition.tsx
@@ -4,7 +4,6 @@ import {
   createSignal,
   createComputed,
   Component,
-  children,
   JSX,
   useContext,
   on,
@@ -418,9 +417,8 @@ export const Transition = (p: TransitionProps) => {
     }
   }
 
-  const resolvedChildren = children(() => local.children as JSX.Element);
   function renderChild() {
-    const c = resolvedChildren() as TransitionProps["children"];
+    const c = local.children;
     return typeof c === "function" ? c(status(), childProps) : c;
   }
 
diff --git a/www/src/docs/AccordionDocs.mdx b/www/src/docs/AccordionDocs.mdx
index d535fd7..1dc2f4d 100644
--- a/www/src/docs/AccordionDocs.mdx
+++ b/www/src/docs/AccordionDocs.mdx
@@ -1,3 +1,4 @@
+import { onCleanup } from "solid-js";
 import { Accordion } from "solid-bootstrap";
 import Example from "./Example";
 import GithubSource from "./GithubSource";
@@ -18,23 +19,28 @@ Click the accordions below to expand/collapse the accordion content.
 
   <Example title="Basic Example">
     <Example.Preview>
-      <Accordion defaultActiveKey="0">
+      <Accordion defaultActiveKey="0" unmountOnExit={true}>
         <Accordion.Item eventKey="0">
           <Accordion.Header>Accordion Item #1</Accordion.Header>
-          <Accordion.Body>
-            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.
+          <Accordion.Body unmountOnExit={true}>
+          {() => {
+            console.log('mounting #1');
+            onCleanup(() => console.log('unmounting #1'));
+            return "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.";
+          }}
           </Accordion.Body>
         </Accordion.Item>
         <Accordion.Item eventKey="1">
           <Accordion.Header>Accordion Item #2</Accordion.Header>
-          <Accordion.Body>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+          <Accordion.Body unmountOnExit={true}>
+          {() => {
+            console.log('mounting #2');
+            onCleanup(() => console.log('unmounting #2'));
+            return `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.
+            culpa qui officia deserunt mollit anim id est laborum.`;
+          }}
           </Accordion.Body>
         </Accordion.Item>
       </Accordion>
@@ -67,7 +73,7 @@ Click the accordions below to expand/collapse the accordion content.
 
   <Example title="Fully Collapsed State" >
     <Example.Intro>
-      If you want your `Accordion` to start in a fully-collapsed state, then simply dont pass in a `defaultActiveKey` prop to `Accordion`.
+      If you want your `Accordion` to start in a fully-collapsed state, then simply don't pass in a `defaultActiveKey` prop to `Accordion`.
     </Example.Intro>
     <Example.Preview>
       <Accordion>