2018.1.27
投稿者: あたい js

クリックで隠れていた要素が表示される仕組み

コンテンツ量が多いページを作るときに、内容を隠してクリックでその下あたりに表示させたい時のJS！

HTML

<!-- 表示ボタン -->
<p class="openBtn"><i class="fa fa-chevron-down faColor">　</i>★★★項目名★★★</p>

<!-- 説明文 -->
<p class="textArea">★★★説明文★★★</p>

JS

$(function(){
$(".openBtn").click(function(){
$($(this).next(".textArea")).animate(
{height: "toggle", opacity: "toggle"},
"nomal"
);
});
});
JS(WPのとき）
jQuery(function($){
$(".openBtn").click(function(){
$($(this).next(".textArea")).animate(
{height: "toggle", opacity: "toggle"},
"nomal"
);
});
});

CSS

/* 表示ボタン */
.openBtn {
cursor: pointer;
padding: 10px;
border: 1px solid #9FD6D2;
border-left: 10px solid #9FD6D2;
color: #666;
}

/* 説明文 */
.textArea {
display: none;
padding: 10px 10px 30px 50px;
color: #666;
}

/* 表示ボタン ー 逆三角アイコン */
.faColor {
color: #9FD6D2;
}