JavaScriptで記事の追記を折りたたみ

 JavaScriptで記事を折りたたむ方法を紹介します。以前紹介したものよりJavaScriptが簡潔ですがcookieが使えないので用途によって使い分けたらいいと思います。こちらは記事が長くなった場合などに使用すれば便利かと。別ページに移動する必要もないのでスムーズに表示されます。Yahooニュースみたいな感じですね。
 
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
Java初心者のコメです。

JavaScript部分のドコに
body部分があるか分かりません・・・・。
【2011/03/21 01:14】 | TCYK #- | [edit]
はじめまして。

ご質問の主旨と違っていたらすいませんが
お答えさせていただきます。

javascriptでは折りたたみの内容がプログラミングされており、
body部分はクリックするとjavascriptでプログラミングされた内容が
実行されることになります。

ですので、javascriptの中にbody部分があるということはありません。
【2011/03/21 21:29】 | 管理人 #E2ywrYdA | [edit]
すごい助かりました
他のサイトの情報では上手くいかなかったので詰んでいたところでした
シンプルなコードで実現できるんですね
【2011/10/15 11:25】 | hound #- | [edit]
お役に立ててよかったです。

またお立ち寄りくださいね~
【2011/10/15 14:52】 | 管理人 #E2ywrYdA | [edit]
はじめまして。
とても参考になりました!ありがとうございました。

質問ですが、ゆっくり展開されるようにすることはできないのでしょうか。
よろしくお願いします。
【2012/01/18 21:21】 | - #w.3sQjgI | [edit]
はじめまして。

参考になってうれしいです。

ただこの記事の方法だとゆっくり展開させるのは難しいと思います。

アコーディオンメニューなんかを参考にすれば作りやすいかもしれません。

お役に立てずごめんなさい。
【2012/01/19 08:06】 | 管理人 #E2ywrYdA | [edit]
必要十分な折りたたみ機能をたったこれだけのJSで!
いまちょうど欲しい機能だったので、とても助かりました。
【2012/03/01 18:16】 | Clearwing #SFo5/nok | [edit]
Clearwing さん

コメントありがとうございます。

お役に立てて嬉しいです。

派手な動きをする折りたたみは他にもあると思いますが
シンプルさではこれかなと思ってます。

これからもよろしくお願いします。
【2012/03/01 21:14】 | 管理人 #E2ywrYdA | [edit]
はじめまして。 HP開設したての初心者の質問で恐縮ですが。

JavaScript のソースは、CSSに貼れば良いのでしょうか?
それとも、折りたたみをする記事ページ内に直接 貼るのでしょうか?
body部分は、記事ページ内に貼れば良いと分かるのですが、
JavaScript のソースをどこに貼ればいいのか分からなくて・・・。

これは本当にシンプルで使いやすそうなので、
ぜひ使用させて頂きたいです。
お馬鹿な質問ですが、どうかご回答、宜しくお願い致します。


【2012/06/28 12:06】 | つき #- | [edit]
先程、質問した者です。 ↑

JavaScriptは、記事ページの</head>上部に貼ってみたら、
ちゃんと折りたたみ表示されました。

いくつも増やせて、手間いらずで、本当に便利ですね。
何度もコメして申し訳ありません。
有難うございました。
【2012/06/28 13:35】 | つき #- | [edit]
つきさん

解決できてよかったです。

基本head内ですが、body内でも大丈夫だと思います。

またお立ち寄りくださいね~
【2012/06/28 17:48】 | 管理人 #E2ywrYdA | [edit]
初めまして。

HPを個人的に作っていて、これは良い物だと思い実装を試みているのですが、
どうにも実装できません。

リンクをクリックするとjavascriptの折りたたみではなく
何もなくなってしまいます。

アドレスには最後に#がついているので a href="#" が
原因のような気がしますがよくわかりません。

もしよろしければ、ご回答のほどをよろしくお願いします。
【2014/06/02 19:24】 | あか #- | [edit]
あかさま

コメントありがとうございます。
実装したものを見てみないと何ともいえませんが、
#が問題になることはないと思います。

クリックされたときに表示されるべきものが
表示されないということですので
HTMLの構造を見直してみてはいかがでしょうか?
【2014/06/03 06:25】 | 管理人 #E2ywrYdA | [edit]
ありがとうございます!

アドバイス通り、htmlの構造を見直して
いろいろチャレンジしてたら実装できました!
重ねてお礼申し上げます!
【2014/06/03 14:02】 | あか #- | [edit]
あかさま

うまくいってよかったです。
またお立ち寄りください~
【2014/06/04 21:28】 | 管理人 #E2ywrYdA | [edit]
<div id="PlagOpen1"> と <div id="PlagClose1"> を
<div name="PlagOpen"> と <div name="PlagClose"> に

onclickを "showPlagin(this);return false;" に

スクリプトを
<script type="text/javascript"> function showPlagin(elm){ var area =
elm.parentNode.parentNode; if( area.getAttribute('name') ==
'PlagOpen') { area.nextSibling.style.display = "block";
area.style.display = "none"; } else{ area.style.display = "none";
area.previousSibling.style.display = "block"; } }</script>

にすると同じページで複数使えます。

英字スパムに引っかかるので適当に余分なコメントおば。
ほげほげほげ
今日は暑いなあ
まだまだ書かないといけないのかな。
そろそろオッケーですか
【2014/09/21 11:27】 | 通りすがり #mQop/nM. | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加