[jquery]slideToggleを使った単純な自分のID名と一致するclassの開閉パネル

普通のアコーディオンとか、スライドパネルではちょっと対応出来ない用
ソース・JSのカスタマイズ前提の素体なのでこのまま使ってもあんまり意味なしです。
このまま使うなら別のjquery使ったほうが良いですレベルです。

<div class="btn" id="id1">ボタン1</div>
<div class="btn" id="id2">ボタン2</div>
<div class="btn" id="id3">ボタン3</div>
<div class="btn" id="id4">ボタン4</div>

<div class="more id1">中身1</div>
<div class="more id2">中身2</div>
<div class="more id3">中身3</div>
<div class="more id4">中身4</div>

<script type="text/javascript" charset="utf-8">
$(function(){
	$(".btn").on('click', function(){
		var id = $(this).attr("id");
		$(".more").slideUp();
		$(".more."+id).slideToggle();

	});
});
</script>

【jquery】タイトルを抽出して目次を作成+ページ内スクロール

プラグイン入れるのが微妙なラインだったんで簡単な目次作成のjqueryさくっと。
キュレーションとかブログサイトは目次付きが主流らしいですね~。

動作サンプルはこっち

HTML

<div id="mokuji"></div>
<div style="height:1000px;"></div>
<h3 class="title">あああ</h3>
<div style="height:1000px;"></div>
<h3 class="title">いいい</h3>
<div style="height:1000px;"></div>
<h3 class="title">ううう</h3>
<div style="height:1000px;"></div>

JS

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=4.3'></script>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js?ver=4.3'></script>
<script>
$(document).ready(function(){
    var count = 1;
    $('<p>目次</p>').appendTo('#mokuji');
     $("h3.title",this).each(function(){
     	$('<span class="links">' + $(this).text() + '</span>').appendTo('#mokuji');
     	count++;
     });
    $(document).on("click",".links ", function() {
        var i = $(".links").index(this)
        var p = $("h3.title").eq(i).offset().top;
        $('html,body').animate({ scrollTop: p }, 'fast');
        return false;
    });
});
</script>

CSS

<style>
span {display:block;cursor:pointer;}
</style>