Removing default list-style and -webkit-details-marker from the <summary> element.

[davidlbowman]

With the rise of React Server Components, removing the client-side state and relying upon static site generation on the server is becoming increasingly important. A common example is an Accordion component, which generally uses useState to open and close the Accordion. However, this forces you to use state and client-side components.

Instead, we can use the <details> and <summary> HTML elements to develop Accordions without state. However, iOS devices contain a default display icon for -webkit-details-marker. It's easy to miss this if you don't have an iOS device to test on.

You can solve this using CSS:

    summary {
        list-style: none;
    }
      
    summary::-webkit-details-marker {
        display: none;
    }

You can see an example of this on my website https://www.theinnovationlab.dev/partnerships

Or, here's the source code for the Accordion:

import Image from "next/image"

interface AccordionProps {
	title: string
	children: React.ReactNode
	icon?: string
	isOpen?: boolean
}

export default function Accordion({
	title,
	children,
	icon = "/chevron-down-solid.svg",
	isOpen = false
}: AccordionProps) {
	return (
		<details className="space-y-4" open={isOpen}>
			<summary className="flex flex-row justify-between pb-4 list-none border-b cursor-pointer border-amber-500">
				<h2 className="text-amber-100">{title}</h2>
				<Image
					src={icon}
					alt="Accordion Icon"
					width={25}
					height={25}
					className="bounce"
				/>
			</summary>
			<div className="space-y-4">{children}</div>
		</details>
	)
}