横並びのリンクをクリックすると下にコンテンツを表示・非表示と切り替えます。

初期状態では、コンテンツはすべて非表示されています。

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

$(function(){
  $("#slidepanel ul.slidebtn li").each(function(){
  var btn = $(this);
  var panel = $(".mod_slidelink_panel_entry");
  btn.click(function(){
    var id = btn.prop("id");
    if($(".mod_slidelink_panel_entry."+id).css("display")=="none"){
			if($(".mod_slidelink_panel_entry.open").size()){
		  $("#slidepanel ul.slidebtn li").removeClass("open").addClass("close");
			$(".mod_slidelink_panel_entry.open:not(animated)").removeClass("open").addClass("close").slideUp("fast",function(){
			$(".mod_slidelink_panel_entry."+id).slideDown("fast").removeClass("close").addClass("open");
			$(btn).removeClass("close").addClass("open");})
			}else{
			$(".mod_slidelink_panel_entry."+id).slideDown("fast").removeClass("close").addClass("open");
			$(btn).removeClass("close").addClass("open");
			}
    }else{
		$(".mod_slidelink_panel_entry."+id).slideUp("fast");
		$(".mod_slidelink_panel_entry."+id).removeClass("open").addClass("close");
		$(btn).removeClass("open").addClass("close");}

		});
  });
});

HTMl

<div id="slidepanel" class="mod_slidelink">
<ul class="slidebtn ex_clearfix">
<li id="panel01">表示「1」</li>
<li id="panel02">表示「2」</li>
</ul>
<div class="mod_slidelink_panel">
<div class="mod_slidelink_panel_entry panel01">
<p>表示「1」の内容。表示「1」の内容。表示「1」の内容。表示「1」の内容。表示「1」の内容。表示「1」の内容。表示「1」の内容。表示「1」の内容。表示「1」の内容。表示「1」の内容。表示「1」の内容。表示「1」の内容。表示「1」の内容。表示「1」の内容。</p>
<!-- mod_slidelink_panel_entry_end --></div>
<div class="mod_slidelink_panel_entry panel02">
<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;
}