html jQuery的でスライドパネル

Posted 2021-05-11

//ボタンを押すと指定したコンテンツが表示される
//javascript
$(function(){
    $(".open").click(function(){
      $("#slideBox").slideToggle("slow");
    });
});

//css
.open{
  background: #999;
  color: #fff;
  cursor: pointer;
  width: 50px;
  padding: 10px;
}
#slideBox{
  padding: 10px; 
  border: 1px #ccc solid;
  display: none;
}

//html
<p class="open">ボタン</p>
<div id="slideBox">
  こちらにコンテツ部分が表示されます。こちらにコンテツ部分が表示されます。こちらにコンテツ部分が表示されます。
  こちらにコンテツ部分が表示されます。こちらにコンテツ部分が表示されます。こちらにコンテツ部分が表示されます。
</div>