Merge branch 'develop'

README.md

@@ -60,6 +60,10 @@ With a little CSS becomes
 ![Alt text](example/img/becomes.png)
 
 ## Properties *(Options)*
+
+### **contentContainerTagName** | *string* | default: `div`
+Tag Name for the Collapsible Root Element.
+
 ### **trigger** | *string* or *React Element* | **required**
 The text or element to appear in the trigger link.
 
@@ -118,7 +122,6 @@ after `.Collapsible__trigger`
 ### **tabIndex** | *number* | default: null
 A `tabIndex` prop adds the `tabIndex` attribute to the trigger element which in turn allows the Collapsible trigger to gain focus.
 
-
 ## CSS Class String Props
 ### **classParentString** | *string* | default: Collapsible
 Use this to overwrite the parent CSS class for the Collapsible component parts. Read more in the CSS section below.
@@ -141,7 +144,6 @@ Use this to overwrite the parent CSS class for the Collapsible component parts.
 ### **contentInnerClassName** | *string*
 `.Collapsible__contentInner` element
 
-
 ## CSS Styles
 In theory you don't need any CSS to get this to work, but let's face it, it'd be pretty rubbish without it.
 

src/Collapsible.js

@@ -154,6 +154,8 @@ class Collapsible extends Component {
     var trigger = (this.state.isClosed === false) && (this.props.triggerWhenOpen !== undefined)
                   ? this.props.triggerWhenOpen
                   : this.props.trigger;
+
+    const ContentContainerElement = this.props.contentContainerTagName;
 
     // If user wants a trigger wrapping element different than 'span'
     const TriggerElement = this.props.triggerTagName;
@@ -175,7 +177,7 @@ class Collapsible extends Component {
     const innerClassString = `${this.props.classParentString}__contentInner ${this.props.contentInnerClassName}`;
 
     return(
-      <div className={parentClassString.trim()}>
+      <ContentContainerElement className={parentClassString.trim()}>
         <TriggerElement
           className={triggerClassString.trim()}
           onClick={this.handleTriggerClick}
@@ -205,7 +207,7 @@ class Collapsible extends Component {
             {children}
           </div>
         </div>
-      </div>
+      </ContentContainerElement>
     );
   }
 }
@@ -253,6 +255,7 @@ Collapsible.propTypes = {
     PropTypes.func,
   ]),
   tabIndex: PropTypes.number,
+  contentContainerTagName: PropTypes.string,
 }
 
 Collapsible.defaultProps = {
@@ -278,6 +281,7 @@ Collapsible.defaultProps = {
   onOpening: () => {},
   onClosing: () => {},
   tabIndex: null,
+  contentContainerTagName: 'div',
 };
 
 export default Collapsible;