diff --git a/static/js/api_endpoint.jsx b/static/js/api_endpoint.jsx
index 2014a04b..cbe4dad2 100644
--- a/static/js/api_endpoint.jsx
+++ b/static/js/api_endpoint.jsx
@@ -3,45 +3,27 @@ import React from 'react';
 // Styles for this element is defined in src/css/custom.css
 
 export default class ApiEndpoint extends React.Component {
-  constructor(props){
-    super(props);
-    this.state = {
-      open: false
-    }
-    this.toggleInfo = this.toggleInfo.bind(this);
-    }
-
-    toggleInfo(e){
-      this.setState({open: !this.state.open})
-    }
-
   render() {
     return (
-      <div className="api-endpoint">
-          <div 
-            onClick={this.toggleInfo}
-            className="api-endpoint-header"
-          >
-          <div className={`api-endpoint-method ${ this.props.method }`}>
+      <details className="api-endpoint">
+        <summary className="api-endpoint-header">
+          <div className={`api-endpoint-method ${this.props.method}`}>
             {this.props.method}
           </div>
-            <code>{this.props.path}</code>
-            <div 
-              className="api-endpoint-protection"
-              title={this.props.unprotected ?
-                "Authentication is not required for this endpoint"
-                : "Authentication is required for this endpoint"
-                }
-            >
-              {this.props.unprotected ? ("🔓") : ("🔒")}
-            </div>
+          <code>{this.props.path}</code>
+          <div
+            className="api-endpoint-protection"
+            title={
+              this.props.unprotected
+                ? 'Authentication is not required for this endpoint'
+                : 'Authentication is required for this endpoint'
+            }>
+            {this.props.unprotected ? '🔓' : '🔒'}
           </div>
-          {this.state.open ? (
-            <div className="api-endpoint-content">
-              {this.props.children}
-            </div>
-          ): null}
-        </div>
+        </summary>
+
+        <div className="api-endpoint-content">{this.props.children}</div>
+      </details>
     );
   }
-}
\ No newline at end of file
+}