サイドバーをjQueryでアコーディオン仕様にしてみた。

ブログロール

なんだかサイドバーが果てしなく長くなってきたので

ブログロールだけ折りたたみにしてみた。

jQueryは実装されているので、導入は簡単!
導入がまだの方は、Download jQuery | jQueryからダウンロードしてくださいませ。
意味が良くわからない方は7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座 | OZPAの表4をどうぞ♪

実装方法

head内に以下を挿入。

他に、jsのコードがあれば一緒にしてもいいはず。

衝突回避で、スクリプト内の”$”をすべて”jQuery”に置き換えています。

<script type="text/javascript">
jQuery(function(){
	//ブログロールの折り畳み
	jQuery(".widget_links .xoxo").hide();
	jQuery(".widget_links").hover(function() {
		jQuery(this).children('ul').slideDown(200);
	}, function() {
		jQuery(this).children('ul').hide(200);
	});
});
</script>

ブログロール部分は出力されると以下の様になりますので、4行目で折りたたむ(隠す)部分を指定します。
例:”.widget_links .xoxo”

5行目で、マウスオーバーして折りたたみを開く部分、ここでは”h3”タイトルにマウスオーバーしたら隠れていた部分が開きます。
例:”.widget_links”

<li id="linkcat-28" class="widget-container widget_links"><h3 class="widget-title">お友達</h3>
	<ul class='xoxo blogroll'>
<li><a href="http://rose.hughughag.net/" title="whiteroseの日々 びっくりする程豪勢な食卓事情や趣味のプリザーブドフラワー作品やガーデニングのことや・・・楽しいブログですよ♪ねこもりや作。" target="_blank">whiteroseの日々</a></li>
<li><a href="http://memepi.blog86.fc2.com/" title="◆◇LOHASちっく◇◆ Lifestyle Of Happy Alcohol Satisfaction ぐうたら独身女の日常。と題されたとってもおもしろおかしいHappyになれる癒しブログ" target="_blank">◆◇LOHASちっく◇◆</a></li>
<li><a href="http://ameblo.jp/toramomoe/" title="つばめ屋、日々ありがとう 姪っ子のブログ つばめ一家の日々が綴られています♪" target="_blank">つばめ屋、日々ありがとう</a></li>
<li><a href="http://kedamagaho.blog64.fc2.com/" title="ケダマ画報 「家庭画報」をもじったようなブログタイトルが妙に癒されます。ケダマさんのセンスの感じられるあったかいサイトですよ!" target="_blank">ケダマ画報</a></li>
<li><a href="http://line.hughughag.net/" title="サロン・ド・ライン 岩国市周東町の片田舎のちいさなちいさな美容室サロン・ド・ライン。日々のちょっとしたできごとや思うこと感じたこと思いつくままに。" target="_blank">サロン・ド・ライン</a></li>
<li><a href="http://yellowcamelia.blog18.fc2.com/" title="光と・・風を感じて・・・♪ とにかく美しい写真に癒されます。元々楽天でお知り合いになった猫仲間。pansyのハンドルネームどおりの透明感あふれるページは必見!" target="_blank">光と・・風を感じて・・・♪</a></li>
<li><a href="http://masae.hughughag.net/" title="散歩道で出会った綺麗な花や空たち。" target="_blank">花の散歩道</a></li>
<li><a href="http://otake.hughughag.net/" title="花と美味しいものと旅の思い出と・・・" target="_blank">薔薇の館</a></li>
	</ul>
</li>

 

2013/11/25 ちょっと変えてみた。

マウスオーバーじゃわかりにくいっぽいから、クリックで動作するようにして、かつ一番目のブログロール「お友達」を開いておくように。

<script type="text/javascript">
jQuery(document).ready(function(){  
jQuery('.widget_links h3').click(function() {
    jQuery('.widget_links h3').removeClass("selected").next().slideUp(); 
    jQuery(this).toggleClass("selected").next().slideToggle();
}).next().hide();
jQuery('.widget_links h3:first').toggleClass("selected").next().show(); 
});
</script>

2013/11/26 もっと、簡単な記述方法がありました。

<script type="text/javascript">
    jQuery(function(){
        jQuery(".bookmark h4").on("click", function() {
            jQuery(this).next().slideToggle();
            jQuery(this).toggleClass("active");
        });
jQuery('.bookmark h4:first').toggleClass("active").next().show(); 
    });
</script>

リンクウィジェットを使用せず、Post Snippetsを使ってます。

以下を「<?php」と「?>」を省いてPost Snippets に設定。

<?php wp_list_bookmarks('title_before=<h4>&title_after=</h4>&show_images=0'); ?>
<ul class="bookmarks">
  • お友達

  • ポイントサイト

  • 作成サイト

  • 山口県関連

  • 応援してます!

  • 猫ブログ

  • </ul>

    テキストウイジェットに↑上記の様に書いてます。

    参考:
    リンクをリストタグで表示するwp list bookmarks | WordPress攻略本

    超簡単jQuery!”toggle系メソッド”を使ってアコーディオンメニューやタブをさくっと実装する方法 | 株式会社LIG

    参考サイト

    [WordPress]jQueryによるカテゴリのアコーディオン表示 | HI-ROM.COM BLOG
    7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座 | OZPAの表4

    雑感

    最近、お友達のブログの更新情報や、人気記事などサイドバーに表示したいものが増えてきてサイドバーがとっても長くなってきていたので、なんか良い手はないかなーと思ってたんだけど、このアコーディオン型、ほんとはちょっと冒険。



    というのも、あまりインターネットに詳しくない人にとってこれって、きっと、わかりにくいと思う。
    だけど、あえてやってみたのは、実験的な意味あいが大きい。
    このリンクがどれほど機能しているかは、未知数ですしね。

    コメントを残す

    メールアドレスが公開されることはありません。 が付いている欄は必須項目です

    CAPTCHA