下からニョッキっ！と出てくるボックス。

デモページへ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

// Top tab
$(function(){
  $(".mod_tab_inner_text").css("display","none");
  $(".mod_tab").each(function(){
  var tab = $(this);
  var tabopen = tab.find(".mod_tab_inner_header");
  var tabpanel = tab.find(".mod_tab_inner_text");
  $(tabopen).click(function(){
  if($(tabpanel).css("display")=="none"){
    $(tab).addClass("selected");
    $(tabpanel).slideDown("fast");
    }else{
    $(tab).removeClass("selected");
    $(tabpanel).slideUp("fast");
    }
   });
  });
});

HTMl

<div class="mod_tabbox ex_clearfix">
<div class="mod_tab">
<div class="mod_tab_inner type01">
<div class="mod_tab_inner_header">
<h2 class="tabtitle">Title Click！</h2>
<p>リード文など入れてもいいかも</p>
<!-- /mod_tab_inner_header--></div>
<div class="mod_tab_inner_text">
<p>詳細な説明文や広告文をいれるとか？でしょうか？</p>
<!-- /mod_tab_inner_text--> </div>
<!-- /mod_tab_inner--></div> 
<!-- /mod_tab--></div>


<div class="mod_tab">
<div class="mod_tab_inner type02">
<div class="mod_tab_inner_header">
<h2 class="tabtitle">Title Click！</h2>
<p>リード文など入れてもいいかも</p>
<!-- /mod_tab_inner_header--></div>
<div class="mod_tab_inner_text">
<p>詳細な説明文や広告文をいれるとか？でしょうか？<br />
長い場合もダイジョウブ！<br />
図も入ります。</p>
<!-- /mod_tab_inner_text--> </div>
<!-- /mod_tab_inner--></div> 
<!-- /mod_tab--></div>


<div class="mod_tab last">
<div class="mod_tab_inner type03">
<div class="mod_tab_inner_header">
<h2 class="tabtitle">Title Click！</h2>
<p>リード文など入れてもいいかも</p>
<!-- /mod_tab_inner_header--></div>
<div class="mod_tab_inner_text">
<p>詳細な説明文や広告文をいれるとか？でしょうか？</p>
<!-- /mod_tab_inner_text--> </div>
<!-- /mod_tab_inner--></div> 
<!-- /mod_tab--></div>

<!-- /mod_tabbox--></div>

CSS

/* mod_tabbox
-----------------------------------------*/
.mod_tabbox {
  margin: 0 auto;
  width: 1010px;
  z-index: 222;
}
.mod_tabbox .mod_tab {
  position: relative;
  float: left;
  width: 330px;
  min-height: 100px;
  height: auto!important;
  height: 100px;
  margin: 0 10px 0 0;
}
.mod_tabbox .mod_tab.last { margin-right: 0px; }
.mod_tabbox .mod_tab_inner {
  display: block;
  width: 276px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  background-color:#FFCC00;
  color:#FFF;
  border:7px solid #FFF;
	/*border-radius*/
	-webkit-border-radius:14px;
	-moz-border-radius:14px;
	border-radius:14px;
}
.mod_tabbox .mod_tab_inner.type01{
  background-color:#FFCC00;
}
.mod_tabbox .mod_tab_inner.type02{
  background-color:#66CC00;
}
.mod_tabbox .mod_tab_inner.type03{
  background-color:#EC1B23;
}

.mod_tabbox .mod_tab_inner_header {
  position: relative;
  padding:20px 20px 20px 60px;
  height: 46px;
  background: transparent url('img/icon_hint.png') no-repeat 20px 20px;
  cursor: pointer;
}
.mod_tabbox .mod_tab_inner_header .tabtitle {
  font-size: 125%;
  font-weight: 600px;
}
.mod_tabbox .mod_tab_inner_text {
  padding:0px 30px 20px 30px;
}
.mod_tabbox .mod_tab_inner p {
  line-height: 20px;
  font-size: 86.7%;
}

/* .selected */
.mod_tabbox .mod_tab.selected .mod_tab_inner {
	/*box-shadow*/
	-webkit-box-shadow:0px 0px 4px #CCC;
	-moz-box-shadow:0px 0px 4px #CCC;
	box-shadow:0px 0px 4px #CCC;
}
.mod_tabbox .mod_tab.selected .mod_tab_inner_header .tabtitle {

}