クリックでコンテンツを表示・非表示を切り替えます。

デモページへopen_in_new

JSを読み込みます

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="tool.js"></script>

[tool.js]JavaScript

// slide Panel
$(function() {
    var Allpanel = $(".mod_slidelink_panel_entry");
    var Allbtn = $("#slidepanel ul.slidebtn li a");
    $("#slidepanel ul.slidebtn li").each(function() {
        var panelset = $(this);
        var panelbtn = $(panelset).find("a");
        panelbtn.click(function() {
            var anchor = panelbtn.attr("href");
            if ($(anchor).css("display") == "none") {
                if ($(".mod_slidelink_panel_entry.open").size()) {
                    $(Allbtn).removeClass("open").addClass("close");
                    $(".mod_slidelink_panel_entry.open:not(animated)").removeClass("open").addClass("close").slideUp("fast", function() {
                        $(anchor).slideDown("fast").removeClass("close").addClass("open");
                        $(panelbtn).removeClass("close").addClass("open");
                    })
                } else {
                    $(anchor).slideDown("fast").removeClass("close").addClass("open");
                    $(panelbtn).removeClass("close").addClass("open");
                }
            } else {
                $(anchor).slideUp("fast");
                $(anchor).removeClass("open").addClass("close");
                $(panelbtn).removeClass("open").addClass("close");
            }
            return false;
        });
    });
});

HTMl

<div id="slidepanel" class="mod_slidelink">
<ul class="slidebtn ex_clearfix">
<li><a href="#panel01">表示「1」</a></li>
<li><a href="#panel02">表示「2」</a></li>
</ul>
<div class="mod_slidelink_panel">
<div id="panel01" class="mod_slidelink_panel_entry">
<p>表示「1」の内容。表示「1」の内容。表示「1」の内容。表示「1」の内容。表示「1」の内容。表示「1」の内容。表示「1」の内容。表示「1」の内容。表示「1」の内容。表示「1」の内容。表示「1」の内容。表示「1」の内容。表示「1」の内容。表示「1」の内容。</p>

<!-- mod_slidelink_panel_entry_end --></div>
<div id="panel02" class="mod_slidelink_panel_entry">
<p>表示「2」の内容はこちら。表示「2」の内容はこちら。表示「2」の内容はこちら。表示「2」の内容はこちら。表示「2」の内容はこちら。表示「2」の内容はこちら。表示「2」の内容はこちら。表示「2」の内容はこちら。表示「2」の内容はこちら。表示「2」の内容はこちら。表示「2」の内容はこちら。表示「2」の内容はこちら。表示「2」の内容はこちら。表示「2」の内容はこちら。表示「2」の内容はこちら。表示「2」の内容はこちら。表示「2」の内容はこちら。表示「2」の内容はこちら。表示「2」の内容はこちら。</p>
<p>表示「2」の内容はこちら。表示「2」の内容はこちら。表示「2」の内容はこちら。表示「2」の内容はこちら。表示「2」の内容はこちら。表示「2」の内容はこちら。表示「2」の内容はこちら。表示「2」の内容はこちら。表示「2」の内容はこちら。表示「2」の内容はこちら。表示「2」の内容はこちら。表示「2」の内容はこちら。表示「2」の内容はこちら。表示「2」の内容はこちら。表示「2」の内容はこちら。表示「2」の内容はこちら。表示「2」の内容はこちら。表示「2」の内容はこちら。表示「2」の内容はこちら。</p>
<!-- mod_slidelink_panel_entry_end --></div>
<!-- mod_slidelink_panel_end --></div>
<!-- mod_slidelink_end --></div>

CSS

body{
 color:#333;
}
body p{
 margin-bottom:5px;
}

.mod_slidelink{
 padding:13px 0 0 0;
 position:relative;
}
.mod_slidelink ul.slidebtn{
  position:absolute;
  top:-15px;
  left:0px;
  width:290px;
}
.mod_slidelink ul.slidebtn li{
  float:left;
  margin:0 20px 0 0;
 padding:0 0 10px 0;
  cursor:pointer;
  text-decoration:underline;
}
.mod_slidelink ul.slidebtn li.open{
 text-decoration:none;
	background:transparent url('img/bg_panelopen.gif') no-repeat bottom center;
}
.mod_slidelink_panel{
}
.mod_slidelink_panel_entry{
  display:none;
  border:solid 4px #66CC00;
}
.mod_slidelink_panel_entry p{
 margin:20px;
}