details+summaryでJSなしの折りたたみ

HTML5から導入された詳細折りたたみ要素、detailsを使ってfreoのサイドバーを折りたたむTIPSです。

details要素の概要

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

detailsは上記のようにsummaryとセットで使います。実際にブラウザでどのように表示されるかは以下。

Details

Something small enough to escape casual notice.

このように<summary>～</summary>で囲まれた部分が開閉のトグルボタンとなります。また、詳細（折りたたまれるコンテンツ）にはプレーンテキストだけでなくdiv、p、ulやolなどを入れることができます。

detailsの折りたたみ表示はIE以外のモダンブラウザでデフォルトスタイルとして実装されており、javascriptやCSSが無効の場合にも折りたたみ表示にしてくれます。

freoのサイドバー項目をdetailsで折りたたむ

一例として、長くなりがちな「過去ログ」を折りたたむとします。details要素はHTML5で導入されたタグですがfreo同梱のデフォルトテンプレートはXHTMLで記述されています。そのままdetailsタグを記述しても対応ブラウザでは折りたたみ表示ができますが、気になる方はこれを機にHTML5に乗り換えてもいいかもしれません。簡易的にならばheader.htmlの1～8行目

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="Content-Script-Type" content="text/javascript" />

を

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">

とするだけでも。本題の「サイドバーの過去ログを折りたたむ」には

utility.html

<div class="utility">
	<h3>過去ログ</h3>
	<div class="content">
		<ul>
			<!--{foreach from=$plugin_entry_archives nofilter item='plugin_entry_archive'}-->
			<li><a href="{$freo.core.http_file}/entry?date={$plugin_entry_archive.year}{$plugin_entry_archive.month}">{$plugin_entry_archive.year}年{$plugin_entry_archive.month}月</a>({$plugin_entry_archive.count})</li>
			<!--{foreachelse}-->
			<li>エントリーが登録されていません。</li>
			<!--{/foreach}-->
		</ul>
	</div>
</div>

を

<details class="utility">
	<summary>過去ログ</summary>
	<div class="content">
		<ul>
			<!--{foreach from=$plugin_entry_archives nofilter item='plugin_entry_archive'}-->
			<li><a href="{$freo.core.http_file}/entry?date={$plugin_entry_archive.year}{$plugin_entry_archive.month}">{$plugin_entry_archive.year}年{$plugin_entry_archive.month}月</a>({$plugin_entry_archive.count})</li>
			<!--{foreachelse}-->
			<li>エントリーが登録されていません。</li>
			<!--{/foreach}-->
		</ul>
	</div>
</details>

とします。具体的には<div class="utility">～</div>を<details class="utility">～</details>に、h3をsummaryにしています。これだけだとほかの項目と表示デザインが異なるので

default.css

231行目付近

div#utility div.utility summary {

を

div#utility .utility summary {

とし、その下の

div#utility div.utility h3 {
	padding: 10px 10px 0 10px;
}

直後あたりに

div#utility .utility summary {
margin-top:10px;
padding: 10px 10px 0 10px;
font-size:120%;
font-weight:bold;
cursor:pointer;
}

と記述しサイドバーのsummaryのスタイルをh3と合わせます。これで以下のように過去ログを折りたたむことができます。

参考

details: 詳細折りたたみ要素 - HTML: HyperText Markup Language | MDN

ありがとうございます！

10press