HTMLのdetailsタグとsummaryタグ、見た目はCSSのみで動きのあるコンテンツ開閉が実現できます。
他のページに有るちょっとしたコンテンツを、ページ内に表示したい、それも開閉できるブロックとしての設置です。ここではこのブロックをセグメント（Lotus Notesを長らくつかっていますので、この呼び方がスッキリする。）と呼ぶことにします。
ここにメモしているのは閲覧者から見ると、同一ページに見えますが、実態は外部ページの例です。
また閉じている状態は、非表示にしている訳ではありませんので、SEO対策として隠しコンテンツスパム扱いを受けない筈です。
- モダンブラウザのみで動作します。IEや旧Edgeと旧iOSのSafariでは開閉できません。
- JavaScriptを使わなくても、満足の行くUIが実現できます。
- CSSでdetails[open]にて、開いたときと、閉じたときのCSS属性が変えられます。
- ※resizeイベントが発火しません(2020-10現在)ので、toggleイベントでwindowsサイズ変更を拾う必用があります。
【ここをクリックでJavaScriptで開閉できる、例えば開閉をhistoryと連動させたい時など】
外部ページをiframeで埋め込んでいます
details と summayで実際の例
上記事例のコード
サンプル
HTML
<details data-id="seg01" class="segDetails">
<summary id="seg01" class="segSummary"> 外部ページをiframeで埋め込んでいます</summary>
<div class="details-content">
<iframe id="frame_seg01" name="frame_seg01" src="../rootcolor/index.html" style="padding-top: 2.0rem;width: 100%;" scrolling="no" frameborder="0">
</iframe>
</dev>
</details>
CSS
details[open] .details-content {
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(-10px);
}
100% {
opacity: 1;
transform: none;
}
}
details summary {
cursor: pointer;
list-style: none;
}
details summary::-webkit-details-marker {
display: none;
}
details summary:hover {
background-color: var(--link-hover-background-color);
color: var(--link-hover-text-color);
}
.segDetails {
display: block;
box-sizing: border-box;
width: 100%;
padding: 3px;
}
.segDetails[open] {
border: solid 1px var(--basic-background-color);
border-radius: 5px 5px 0 0 / 5px 5px 0 0;
}
.segSummary {
display: block;
box-sizing: border-box;
width: 100%;
padding: 0.5rem;
font-size: 1.0rem;
font-weight: bold;
color: var(--active-text-color);
border: solid 1px var(--active-background-color);
box-shadow: 5px 5px 5px rgba(var(--basic-shadow-rgba));
border-radius: 5px 5px 5px 5px / 5px 5px 5px 5px;
}
.segSummary::before {
content: "▶ ";
color: cyan;
width: 1.0rem;
font-size: 1.0rem;
font-weight: bold;
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.segDetails[open] > .segSummary {
color: var(--outline-text-color);
background-color: var(--active-background-color);
border-radius: 5px 5px 0 0 / 5px 5px 0 0;
box-shadow: none;
}
.segDetails[open] > .segSummary::before {
content: "▼ ";
color: cyan;
width: 1.0rem;
font-size: 1.0rem;
font-weight: bold;
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.segDetails[open] > .segSummary:hover {
background-color: var(--link-hover-background-color);
color: var(--link-hover-text-color);
}