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 <git@frenck.dev>

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">
+      <details className="api-endpoint">
-          <div 
+        <summary className="api-endpoint-header">
-            onClick={this.toggleInfo}
+          <div className={`api-endpoint-method ${this.props.method}`}>
-            className="api-endpoint-header"
-          >
-          <div className={`api-endpoint-method ${ this.props.method }`}>
             {this.props.method}
           </div>
-            <code>{this.props.path}</code>
+          <code>{this.props.path}</code>
-            <div 
+          <div
-              className="api-endpoint-protection"
+            className="api-endpoint-protection"
-              title={this.props.unprotected ?
+            title={
-                "Authentication is not required for this endpoint"
+              this.props.unprotected
-                : "Authentication is required for this endpoint"
+                ? 'Authentication is not required for this endpoint'
-                }
+                : 'Authentication is required for this endpoint'
-            >
+            }>
-              {this.props.unprotected ? ("🔓") : ("🔒")}
+            {this.props.unprotected ? '🔓' : '🔒'}
-            </div>
           </div>
-          {this.state.open ? (
+        </summary>
-            <div className="api-endpoint-content">
+
-              {this.props.children}
+        <div className="api-endpoint-content">{this.props.children}</div>
-            </div>
+      </details>
-          ): null}
-        </div>
     );
   }
 }