Skip to content

Instantly share code, notes, and snippets.

@yu-smc
Last active July 5, 2018 03:24
Show Gist options
  • Save yu-smc/51870365158f37df1915ef72418df8ca to your computer and use it in GitHub Desktop.
Save yu-smc/51870365158f37df1915ef72418df8ca to your computer and use it in GitHub Desktop.
複数項目の詳細表示 / 非表示を、JQuery5行で実装する ref: https://qiita.com/yu-smc/items/9bbd57f1e842eda20a18
.pulldown {
width: 300px;
margin: 0 0 10px 20px;
}
.pulldown-head {
background-color: lightgreen;
height: 40px;
}
.pulldown-body {
display: none;
background-color: lightgray;
height: 200px;
}
//data-slideがslide1の要素をクリックした時
$('.' + $(this).data('slide'))==$('slide1')
//data-slideがslide2の要素をクリックした時
$('.' + $(this).data('slide'))==$('slide2')
<div class="pulldown-head" data-slide="slide1" data-fade="fade1">ここを押すと表示 / 非表示</div>
<div class="pulldown-body slide1">
<p class="fade1">詳細部分をフェードイン / アウト</p>
</div>
$(function(){
$('.pulldown-head').on('click', function(){
$('.' + $(this).data('slide')).slideToggle(700);
$('.' + $(this).data('fade')).fadeToggle(700);
})
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment