【コピペでOK】 開閉可能なread more的なもの 【jQuery】

今回はめずらしくjQueryの記事です。

例えばTopicsなど、タイトルだけ読んでもらって、気になるものだけ選択して見てもらえるような機能をつけることができます。1画面目に入る情報をなるべく増やしたいときなどにも使えます。
また、「すべて閉じる」ボタンを用意することで、複数開けたものをひとつずつ閉じなくても一気に画面をすっきりさせることができます。
何年か前にTwitterのタイムラインも似たような機能が一瞬搭載されていたと思います。


デモ・コードは次の通りです。



 HTML側で「more」や「close」の文字を変えたら、jsの7,9,14,25,35行目の文字列も合わせて変更する必要があります。

余談

このスクリプトは以前仕事で書いたものに少し手を加えたものです。
先日HDDの整理をしていたら当時のデータが出てきたので、簡単なスクリプトですがせっかくなので少し手を加えてコピペで利用可能なリソースとして記事に出すことにしました。

恐らく今後jQueryの記事を新しく書くことはないと思います。この仕事をしていた当時はスクリプト関係に強いスタッフが他にいたので、自分でjQueryを使ったスクリプトを書いたのは前にも後にもこれ一度きりだったと思います。
というわけで執筆者はjsに関して昔も今も初心者ですので、もっとスマートな記述方法があるかもしれません。
何かアドバイス等があればコメント欄で教えてくださると幸いです。


それでは、今回はこれで終わります。