X

折りたたみメニューで Javascript が Off でも 追記部分を表示!!

[HINAGATA:HINAGATAでの折りたたみメニュー](http://hinagata.biz/log/2004/09/16/0144.html “HINAGATA:HINAGATAでの折りたたみメニュー”)や[Ogawa::Memoranda: Javascriptでの表示・非表示切り替え](http://as-is.net/blog/archives/000907.html#more “Ogawa::Memoranda: Javascriptでの表示・非表示切り替え”)を見て、自分も[亜細亜ノ蛾 – ヘッドライン](http://asiamoth.com/headline/ “亜細亜ノ蛾 – ヘッドライン”) では追記部分を隠すようにしてみた。
しかしこれだと、Javascript を Off にしている場合、追記部分が表示されないので、以下のようにするといいな、と思った。


[HINAGATA](http://hinagata.biz/log/2004/09/16/0144.html “HINAGATA:HINAGATAでの折りたたみメニュー”)でのオリジナルソース (コー●とかカゴ●ではなく) はこのようになっている。

<MTEntryIfExtended>
<p class="extended">
<span >

これに、以下を追加してみる。


(省略)
<div id="more" class="hidden">
<$MTEntryMore$>
</div>
<noscript><!--Javascript が Off の場合は、-->
<$MTEntryMore$><!--改めて MTEntryMore を表示する -->
</noscript><!--Javascript が On の場合、この内容は表示されない -->
</MTEntryIfExtended>

しかし、この場合は Javascript を On にしている環境では画面に表示されないが、ページのサイズは無駄に肥大している (MTEntryMore が二回読み込まれる)。効率が悪い。そこで、こうするとどうだろう ? (助言をいただき、さっそく修正しました。コメント参照)

<MTEntryIfExtended>
<p class="extended">
<span ><script type="text/javascript">document.write('<div class="hidden">');</script>
<div id="more"><$MTEntryMore$></div>
<script type="text/javascript">document.write('</div>');</script>

要するに、Javascript が On の環境では document.write が働いて、<div id="more" class="hidden"> になる。

Javascript が Off の環境では <noscript> の内容が適用されるので、<div id="more"> になる。つまり hidden にならない。

<p class="extended"></p> も、Javascript で表示させてもイイかも。

上記は、もっといい方法を教えて頂いたので、修正しました。ありがとうございます!!


まぁ、自分の環境ではうまくいっているけど……います。

自分は、Javascript の事はほとんど知らなかった人なので、ここの内容を試す場合は “自己責任” ということでお願いします。ですが、kaminogoya さんと (o) さんのおかげで、シンプルで美しい物になりました。

ブログやっていて良かったなー、とつくづく思いました。これからも(なるべく)頑張って更新します。

asiamoth: