Adds feature to input custom contentId to address issue #217.

README.md

@@ -94,6 +94,12 @@ Disables the trigger handler if `true`. Note: this has no effect other than appl
 
 Pass props (or attributes) to the trigger wrapping element. Useful for inserting `role` when using `tabIndex`.
 
+As an alternative to an auto generated id (which is not guaranteed to be unique in extremely fast builds) that is used as the TriggerElement id, and also as a separate `aria-labelledby` attribute, a custom id can be assigned by providing `triggerElementProps` with an object containing an `id` key and value, e.g. `{id: 'some-value'}`.
+
+### **contentElementId** | _string_
+
+Allows for an alternative to an auto generated id (which is not guaranteed to be unique in extremely fast builds) that is used as part of the component id and the `aria-controls` attribute of the component.
+
 ### **transitionTime** | _number_ | default: 400
 
 The number of milliseconds for the open/close transition to take.

index.d.ts

@@ -15,6 +15,7 @@ export interface CollapsibleProps extends React.HTMLProps<Collapsible> {
   triggerClassName?: string;
   triggerOpenedClassName?: string;
   triggerElementProps?: object;
+  contentElementId?: string;
   contentOuterClassName?: string;
   contentInnerClassName?: string;
   accordionPosition?: string | number;

src/Collapsible.js

@@ -9,7 +9,7 @@ class Collapsible extends Component {
 
     this.timeout = undefined;
 
-    this.contentId = `collapsible-content-${Date.now()}`;
+    this.contentId = props.contentElementId || `collapsible-content-${Date.now()}`;
     this.triggerId = props.triggerElementProps.id || `collapsible-trigger-${Date.now()}`;
 
     // Defaults the dropdown to be closed
@@ -285,6 +285,7 @@ Collapsible.propTypes = {
   open: PropTypes.bool,
   containerElementProps: PropTypes.object,
   triggerElementProps: PropTypes.object,
+  contentElementId: PropTypes.string,
   classParentString: PropTypes.string,
   className: PropTypes.string,
   openedClassName: PropTypes.string,