イグトランスさん、表示・非表示機能の組み込みありがとうございました。
他のトピックでも機能していることを確認しました。
これからもよろしくお願いいたします。
追伸:「少し変更しています」はTip:の記述だけでしょうか、興味深々です。
現在、[hide=説明文]テキスト[/hide]のような、
ユーザー記述対応を試行錯誤しています。
コード: 全て選択
<dl aria-expanded="false">
<dt>
<a href="javascript:void(0)"
onclick="var topElement = this.parentNode.parentNode;
var e = topElement.getElementsByTagName('dd')[0];
if (e.hasAttribute('hidden')) {
e.removeAttribute('hidden');
this.textContent = 'ここをクリックすると非表示にします。';
topElement.setAttribute('aria-expanded', 'true');
} else {
e.setAttribute('hidden', '');
this.textContent = 'ここをクリックすると内容が表示されます。';
topElement.setAttribute('aria-expanded', 'false');
}">
ここをクリックすると内容が表示されます。
</a>
</dt>
<dd hidden>{TEXT}</dd>
</dl>
コード: 全て選択
<dl class="codebox">
<dt>
<a href="javascript:void(0);"
onclick="var el = this.parentNode.parentNode.getElementsByTagName('dd')[0];
var v = el.style.display != 'none';
el.style.display = v ? 'none' : 'block';
this.innerHTML = (v ? '[SPOILER]' : '[HIDE]'); "
>
[SPOILER]
</a>
</dt>
<dd style="display: none;">
{TEXT}
</dd>
</dl>
コード: 全て選択
<dl class="codebox">
<dt>
<a href="javascript:void(0);"
onclick="var el = this.parentNode.parentNode.getElementsByTagName('dd')[0];
var v = el.style.display != 'none';
el.style.display = v ? 'none' : 'block';
this.innerHTML = (v ? '[hide=ここをクリックすると内容が表示されます。]'
:
'[hide=ここをクリックすると非表示にします。]'); "
>
[hide=ここをクリックすると内容が表示されます。]
</a>
</dt>
<dd style="display: none;">
{TEXT}
</dd>
</dl>
コード: 全て選択
<dl aria-expanded="false">
<dt>
<a href="javascript:void(0)"
onclick="var topElement = this.parentNode.parentNode;
var e = topElement.getElementsByTagName('dd')[0];
if (e.hasAttribute('hidden')) {
e.removeAttribute('hidden');
this.textContent = 'ここをクリックすると非表示にします。';
topElement.setAttribute('aria-expanded', 'true');
} else {
e.setAttribute('hidden', '');
this.textContent = 'ここをクリックすると内容が表示されます。';
topElement.setAttribute('aria-expanded', 'false');
}">
ここをクリックすると内容が表示されます。
</a>
</dt>
<dd hidden>{TEXT}</dd>
</dl>
そうなんです。omasuさんの掲示板のように、phpBBのスタイル次第ではそうなるようです。このフォーラムでもそうしたほうがいいとは思うのですが、そこまで対処できていません(将来なんとかするかも)。以前のhideも現状のように修飾がない表示だったと記憶しているので、最低限以前と同じ状態の再現はできているだろうと思っています。※class="codebox"は非表示エリアを網掛けする機能の様です。
これについて調べていました。どうやらこれなら[hide=説明文]{text}[/hide]の記述改修が可能かな?
と思ってしまいました。
なお[hide]タグ内の{text}は、
[hide={text1}]{text2}[/hide]というように、
番号付けができるので、試行錯誤してみます。
コード: 全て選択
[hide]{TEXT}[/hide]
コード: 全て選択
[hide={TEXT1;optional}]{TEXT2}[/hide]
コード: 全て選択
[hide={TEXT1;optional}]{TEXT2}[/hide]
コード: 全て選択
<dl aria-expanded="false" class="codebox">
<dt>
<a href="javascript:void(0)"
if ({TEXT1} == NULL)
{
{TEXT1} = 'ここをクリックすると内容が表示されます。'
};
onclick="var topElement = this.parentNode.parentNode;
var e = topElement.getElementsByTagName('dd')[0];
if (e.hasAttribute('hidden')) {
e.removeAttribute('hidden');
this.textContent = 'ここをクリックすると非表示にします。';
topElement.setAttribute('aria-expanded', 'true');
} else {
e.setAttribute('hidden', '');
this.textContent = {TEXT1};
topElement.setAttribute('aria-expanded', 'false');
}">
{TEXT1}
</a>
</dt>
<dd hidden>
{TEXT2}
</dd>
</dl>
というエラーが発生し、それを無視し突破して、警告
トークン {TEXT} が HTMLタグ 内で使用されています。XSS 攻撃を受ける可能性があり、セキュリティ上非常に危険です。
HTMLタグ 内ではより限定的な {SIMPLETEXT} または {INTTEXT} が使用されるべきです。
この危険性を十分承知した上でどうしてもトークン {TEXT} を HTMLタグ 内で使用したい場合は “はい” をクリックしてください。
コード: 全て選択
[hide]test1[/hide]
[hide=test2]test2[/hide]
コード: 全て選択
<dl aria-expanded="false" class="codebox">
<dt>
<a href="javascript:void(0)"
onclick="var topElement = this.parentNode.parentNode;
var e = topElement.getElementsByTagName('dd')[0];
if (e.hasAttribute('hidden')) {
e.removeAttribute('hidden');
this.textContent = 'ここをクリックすると非表示にします。';
topElement.setAttribute('aria-expanded', 'true');
} else {
e.setAttribute('hidden', '');
this.textContent = 'ここをクリックすると内容が表示されます。';
topElement.setAttribute('aria-expanded', 'false');
}">
ここをクリックすると内容が表示されます。
</a>
</dt>
<dd hidden>
{TEXT2}
</dd>
</dl>
コード: 全て選択
[hide=最終実行速度比較が表示されます。]
コード: 全て選択
[hide={TEXT1;optional}]{TEXT2}[/hide]
コード: 全て選択
<dl class="codebox">
<dt>
<a href="javascript:void(0);"
onclick="
var el = this.parentNode.parentNode.getElementsByTagName('dd')[0];
var v = el.style.display != 'none';
el.style.display = v ? 'none' : 'block';
this.innerHTML = (v ?
'ここをクリックすると内容を表示します。'
:
'ここをクリックする非表示にします。'
) + ' {TEXT1}';
"
>
ここをクリックすると内容を表示します。 {TEXT1}
</a>
</dt>
<dd style="display: none;">
{TEXT2}
</dd>
</dl>
説明情報警告
トークン {TEXT} が HTMLタグ 内で使用されています。XSS 攻撃を受ける可能性があり、セキュリティ上非常に危険です。
HTMLタグ 内ではより限定的な {SIMPLETEXT} または {INTTEXT} が使用されるべきです。
この危険性を十分承知した上でどうしてもトークン {TEXT} を HTMLタグ 内で使用したい場合は “はい” をクリックしてください。
コード: 全て選択
表示・非表示を切り替えます。[hide=説明文]本文[/hide]
コード: 全て選択
[hide=説明文]
本文1
本文2
[/hide]
[hide]
本文1
本文2
[/hide]
コード: 全て選択
<a onclick="…"><span>ここをクリックすると内容を表示します。</span>{TEXT1}</a>
コード: 全て選択
<div aria-expanded="false">
<a href="javascript:void(0)"
onclick="var topElement = this.parentNode;
var headerElements = this.getElementsByTagName('span');
var e = topElement.getElementsByTagName('div')[0];
if (e.hasAttribute('hidden')) {
e.removeAttribute('hidden');
headerElements[0].setAttribute('hidden', '');
headerElements[0].setAttribute('aria-hidden', 'true');
headerElements[1].removeAttribute('hidden');
headerElements[1].setAttribute('aria-hidden', 'false');
topElement.setAttribute('aria-expanded', 'true');
} else {
e.setAttribute('hidden', '');
headerElements[0].removeAttribute('hidden');
headerElements[0].setAttribute('aria-hidden', 'false');
headerElements[1].setAttribute('hidden', '');
headerElements[1].setAttribute('aria-hidden', 'true');
topElement.setAttribute('aria-expanded', 'false');
}">
{TEXT1}
<span aria-hidden="false"> [ここをクリックすると内容が表示されます]</span>
<span hidden aria-hidden="true"> [ここをクリックすると非表示にします]</span>
</a>
<div hidden>{TEXT2}</div>
</div>
コード: 全て選択
<div class="spoiler">
<div class="spoiler-header">
<button onclick="
var
a=parentNode.nextSibling.style,
b=firstChild.style,c=lastChild.style;
b.display=a.display;
a.display=c.display=(b.display)?
''
:
'none';
return!1
"
>
<span>
Show
</span>
<span style="display:none">
Hide
</span>
</button>
<span class="spoiler-title">
Spoiler: {TEXT1}
</span>
</div>
<div class="spoiler-content" style="display:none">
{TEXT2}
</div>
</div>
コード: 全て選択
<div class="codebox">
<div>
<button onclick="
var
a=parentNode.nextSibling.style,
b=firstChild.style,
c=lastChild.style;
b.display=a.display;
a.display=c.display=(b.display)?
''
:
'none';
return!1
"
>
<span>
ここをクリックすると内容を表示します。 {TEXT1}
</span>
<span style="display:none">
ここをクリックすると非表示にします。 {TEXT1}
</span>
</button>
</div>
<div style="display:none">
{TEXT2}
</div>
</div>
コード: 全て選択
[hide={TEXT1?}]{TEXT2}[/hide]
コード: 全て選択
表示・非表示を切り替えます。[hide]本文[/hide] または [hide=説明文]本文[/hide]
コード: 全て選択
/* BB Code styles
----------------------------------------*/
/* Quote block */
blockquote {
background-color: #EBEADD;
border-color:#DBDBCE;
}
blockquote blockquote {
/* Nested quotes */
background-color:#EFEED9;
}
blockquote blockquote blockquote {
/* Nested quotes */
background-color: #EBEADD;
}
/* Code block */
.codebox {
background-color: #FFFFFF;
border-color: #C9D2D8;
}
.codebox p {
border-bottom-color: #CCCCCC;
}
.codebox code {
color: #2E8B57;
}
コード: 全て選択
<div class="codebox">
を
<div style="background-color: #FFFFFF; border:1px solid #C9D2D8;">
にしても一応動作しました。※ボーダーが機能しないので記述を変更しました。
<div・・・>の行の前に<br>改行が欲しいな、とも思いました。
コード: 全て選択
[hide={TEXT1?}]{TEXT2}[/hide]
コード: 全て選択
<div class="codebox">
<div>
<a href="javascript:void(0);"
onclick="
var el0 = this.parentNode.parentNode.getElementsByTagName('dd')[0];
var v0 = el0.style.display != 'none';
el0.style.display = v0 ? 'none' : 'block';
var el1 = this.parentNode.parentNode.getElementsByTagName('dd')[1];
var v1 = el1.style.display != 'none';
el1.style.display = v1 ? 'none' : 'block';
var el2 = this.parentNode.parentNode.getElementsByTagName('dd')[2];
var v2 = el2.style.display != 'none';
el2.style.display = v2 ? 'none' : 'block';
"
>
<dd style="display: block;">
{TEXT1} [ここをクリックすると内容を表示します。]
</dd>
<dd style="display: none;">
{TEXT1} [ここをクリックすると非表示にします。]
</dd>
</a>
<dd style="display: none;">
{TEXT2}
</dd>
</div>
</div>
コード: 全て選択
<div class="codebox">
<div>
<a onclick="
var a=parentNode.nextSibling.style,
b=firstChild.style,
c=lastChild.style;
b.display=a.display;
a.display=c.display=(b.display)? '' : 'none';
return!1
"
>
<span>
{TEXT1} [ここをクリックすると内容を表示します。]
</span>
<span style="display:none">
{TEXT1} [ここをクリックすると非表示にします。]
</span>
</a>
</div>
<div style="display:none">
{TEXT2}
</div>
</div>
コード: 全て選択
表示・非表示を切り替えます。[hide]本文[/hide] または [hide=説明文]本文[/hide]