サイドバーを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ちっく◇◆　Ｌifestyle　Ｏf　Ｈappy　Ａlcohol　Ｓatisfaction ぐうたら独身女の日常。と題されたとってもおもしろおかしい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">
お友達
	
whiteroseの日々
◆◇LOHASちっく◇◆
いくもん姉妹の日々♪
つばめ屋、日々ありがとう
ケダマ画報
サロン・ド・ライン
光と・・風を感じて・・・♪
花の散歩道
薔薇の館

	

ポイントサイト
	
Get Money（ゲットマネー）
ポイントサイト ちょびリッチ

	

作成サイト
	
whiteroseの日々
サロン・ド・ライン
ステンレス周南(株)
新南陽若山ライオンズクラブ
有限会社　アリイ
生活サポーターおりづる
社会福祉法人つくし園
社会福祉法人ひとつの会
花の散歩道
菓子工房　ボン・クラージュ！
薔薇の館

	

山口県関連
	
山口ブログ

	

応援してます！
	
新南陽若山ライオンズクラブ
農業生産法人㈱ロカヴォ

	

猫ブログ
	
かご猫　blog
くり(猫)もっと元気になぁ～れ☆
こころとからだがかたちんば
しゃべるねこ、しおちゃん
ねこ日和-別館-
ケダマ画報
ネコネコブログ
ファラオたちの日常
湾岸猫玉家

	


</ul>