From 9f8f6012afe3894b7f4db92bda85b6b7fb145945 Mon Sep 17 00:00:00 2001
From: Ayesha Mazumdar <a.mazumdar@salesforce.com>
Date: Tue, 17 Oct 2017 18:22:18 -0700
Subject: [PATCH] fix(accordion): Adjusted styling to only target first
 children

---
 ui/components/accordion/base/_index.scss | 12 +++---
 ui/components/accordion/base/example.jsx | 49 ++++++++++++++++++++++++
 2 files changed, 55 insertions(+), 6 deletions(-)

diff --git a/ui/components/accordion/base/_index.scss b/ui/components/accordion/base/_index.scss
index 035dcd231f..31060b0b23 100644
--- a/ui/components/accordion/base/_index.scss
+++ b/ui/components/accordion/base/_index.scss
@@ -112,15 +112,15 @@
  */
 .slds-is-open {
 
-  .slds-accordion__summary {
+  > .slds-accordion__summary {
     margin-bottom: $spacing-small;
+    
+    .slds-accordion__summary-action-icon {
+      transform: rotate(0deg);
+    }
   }
 
-  .slds-accordion__summary-action-icon {
-    transform: rotate(0deg);
-  }
-
-  .slds-accordion__content {
+  > .slds-accordion__content {
     visibility: visible;
     opacity: 1;
     height: auto;
diff --git a/ui/components/accordion/base/example.jsx b/ui/components/accordion/base/example.jsx
index 306235f29d..2fa0afbea9 100644
--- a/ui/components/accordion/base/example.jsx
+++ b/ui/components/accordion/base/example.jsx
@@ -14,6 +14,8 @@ import {
 const referenceId01 = 'accordion-details-01';
 const referenceId02 = 'accordion-details-02';
 const referenceId03 = 'accordion-details-03';
+const referenceId04 = 'accordion-details-04';
+const referenceId05 = 'accordion-details-05';
 
 let Accordion = props => (
   <ul className={classNames('slds-accordion', props.className)}>
@@ -249,3 +251,50 @@ export let states = [
     )
   }
 ];
+
+export let examples = [
+  {
+    id: 'nested-accordions',
+    label: 'Nested Accordions',
+    element: (
+      <Accordion>
+        <AccordionSection
+          summary="Accordion summary"
+          isOpen
+          referenceId={referenceId01}
+        >
+          <Accordion>
+            <AccordionSection
+              summary="Nested accordion summary"
+              isOpen
+              referenceId={referenceId04}
+            >
+              Accordion details - A
+            </AccordionSection>
+            <AccordionSection
+              summary="Nested accordion summary"
+              isOpen={false}
+              referenceId={referenceId05}
+            >
+              Accordion details - B
+            </AccordionSection>
+          </Accordion>
+        </AccordionSection>
+        <AccordionSection
+          summary="Accordion summary"
+          isOpen={false}
+          referenceId={referenceId02}
+        >
+          Accordion details - B
+        </AccordionSection>
+        <AccordionSection
+          summary="Accordion summary"
+          isOpen={false}
+          referenceId={referenceId03}
+        >
+          Accordion details - C
+        </AccordionSection>
+      </Accordion>
+    )
+  }
+];