use html5 details element instead of javascript (#2531)

* use html5 details element instead of javascript

Reduces reliance on JS for content. I found when the JS didn't full load (flaky connection), I couldn't open these detail blocks.

* fix: remove the unused click handler

---------

Co-authored-by: Franck Nijhof <[email protected]>

Author: remy

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>
     );
   }
-}
+}