Fix accordion specificity (#10225)

ampproject · Jun 30, 2017 · af68f81 · af68f81
1 parent d44039a
commit af68f81
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/css/amp.css b/css/amp.css
@@ -708,12 +708,13 @@ amp-accordion > section > * {
 
 amp-accordion,
 amp-accordion > section,
-amp-accordion > section > * {
+.i-amphtml-accordion-header,
+.i-amphtml-accordion-content {
   margin: 0;
 }
 
 /* heading element*/
-amp-accordion > section > :first-child {
+.i-amphtml-accordion-header {
   cursor: pointer;
   background-color: #efefef;
   padding-right: 20px;

diff --git a/extensions/amp-accordion/0.1/amp-accordion.js b/extensions/amp-accordion/0.1/amp-accordion.js
@@ -70,6 +70,7 @@ class AmpAccordion extends AMP.BaseElement {
           'See https://github.com/ampproject/amphtml/blob/master/extensions/' +
           'amp-accordion/amp-accordion.md. Found in: %s', this.element);
       const content = sectionComponents[1];
+      content.classList.add('i-amphtml-accordion-content');
       let contentId = content.getAttribute('id');
       if (!contentId) {
         contentId = this.element.id + '_AMP_content_' + index;
@@ -92,6 +93,7 @@ class AmpAccordion extends AMP.BaseElement {
       });
 
       const header = sectionComponents[0];
+      header.classList.add('i-amphtml-accordion-header');
       header.setAttribute('role', 'heading');
       header.setAttribute('aria-controls', contentId);
       header.setAttribute('aria-expanded',