details の開閉状況をサーバ側で把握して、reload 時に open/close を継続する。

<!DOCTYPE html>
<html lang=”ja”>
<head>
</head>
<script>
function detailsOpen(e) {

document.cookie = e.id + ‘=’ + e.open;
}
</script>

<body>
<?php
print_r($_COOKIE);

$open1 = ‘open’;
$open2 = ‘open’;
if (isset($_COOKIE[‘open1’]) && $_COOKIE[‘open1’] == ‘false’) $open1 = ”;
if (isset($_COOKIE[‘open2’]) && $_COOKIE[‘open2’] == ‘false’) $open2 = ”;
?>

<details <?= $open1; ?> ontoggle=”detailsOpen(this);” id=”open1″>
<summary><b>open1</b></summary>
<p>
ほげほげ
</p>
</details>

<details <?= $open2; ?> ontoggle=”detailsOpen(this);” id=”open2″>
<summary><b>open2</b></summary>
<p>
ほげほげ2
</p>
</details>

</body>
</html>

details の開閉制御