Collapsible sections

docs/building-on-etherlink/endpoint-support.md

@@ -3,13 +3,17 @@ title: Ethereum endpoint support
 hide_table_of_contents: true
 ---
 
+import CollapsibleSection from '@site/src/components/CollapsibleSection';
+
 Etherlink nodes use [Geth](https://geth.ethereum.org/) to provide access to both standard Ethereum RPC endpoints and Geth-specific RPC endpoints.
 These tables list these endpoints and whether Etherlink supports them:
 
 ## Standard Ethereum endpoints
 
 For information about these endpoints, see [JSON-RPC API](https://ethereum.org/en/developers/docs/apis/json-rpc) and the [Ethereum JSON-RPC Specification](https://ethereum.github.io/execution-apis/api-documentation/) in the Ethereum documentation.
 
+<CollapsibleSection title="Table of supported Ethereum endpoints">
+
 <table class="customTableContainer fullWidthTable">
   <thead>
     <tr>
@@ -382,12 +386,16 @@ For information about these endpoints, see [JSON-RPC API](https://ethereum.org/e
   </tbody>
 </table>
 
+</CollapsibleSection>
+
 ## Geth-specific endpoints
 
 This table shows the Geth endpoints that Etherlink nodes support.
 All other Geth endpoints are not supported.
 For information about these endpoints, see the Geth documentation at https://geth.ethereum.org/docs.
 
+<CollapsibleSection title="Table of supported Geth endpoints">
+
 <table class="customTableContainer fullWidthTable">
   <thead>
     <tr>
@@ -456,8 +464,12 @@ The Etherlink EVM node supports these [ethers.js](https://docs.ethers.org/v6/) m
   </tbody>
 </table>
 
+</CollapsibleSection>
+
 ## Additional information
 
+<CollapsibleSection title="Table of additional information">
+
 <table class="customTableContainer fullWidthTable">
   <thead>
     <tr>
@@ -483,4 +495,6 @@ The Etherlink EVM node supports these [ethers.js](https://docs.ethers.org/v6/) m
       <td>**Post London** (Fee market is not implemented yet, but the rollup supports EIP-1559 transaction types)</td>
     </tr>
   </tbody>
-</table>
+</table>
+
+</CollapsibleSection>

src/components/CollapsibleSection/index.jsx

@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+import clsx from 'clsx';
+
+import styles from './styles.module.css';
+
+export default function CollapsibleSection({ children, title }) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleSection = () => {
+    setIsOpen((prev) => !prev);
+  };
+
+  const currentTitleStyles = clsx(styles.title) + " " + (isOpen ? clsx(styles.titleOpen) : "");
+
+  return (
+    <>
+      <div className={currentTitleStyles} onClick={toggleSection}>{title}</div>
+      {isOpen &&
+        <div className={clsx(styles.content)}>{children}</div>
+      }
+    </>
+  )
+}

src/components/CollapsibleSection/styles.module.css

@@ -0,0 +1,39 @@
+.title {
+  color: #28B56F;
+}
+
+.title::before {
+  background-image: url("/img/GreenFiChevronUp.svg");
+  background-repeat: no-repeat;
+  background-position-x: 5px;
+  background-position-y: -2px;
+  filter: none;
+  content: "";
+  display: inline-block;
+  transform: rotate(90deg);
+  width: 1.25rem;
+  height: 1.25rem;
+  transition: transform var(--ifm-transition-fast) linear;
+  margin-right: 5px;
+  margin-left: -25px;
+}
+
+.title.titleOpen::before {
+  background-image: url("/img/GreenFiChevronUp.svg");
+  background-repeat: no-repeat;
+  background-position-x: 6px;
+  background-position-y: -2px;
+  filter: none;
+  content: "";
+  display: inline-block;
+  transform: rotate(180deg);
+  width: 1.25rem;
+  height: 1.25rem;
+  transition: transform var(--ifm-transition-fast) linear;
+  margin-right: 5px;
+  margin-left: -25px;
+}
+
+.content {
+  transition: transform var(--ifm-transition-fast) ease;
+}