パカパカ

タイプNOアニメーション系 その他 類似の音

目次

オノマトペ

Clickしてみてね

パカパカする
パカパカ開いたり閉じたりするよ
タブとかアコーディオンの代わりに使うべし

ソースコード

あくまでも一例なので参考程度に使ってください。

パカパカHTML

<div class="sample">

<span>パカパカする</span>
<div>
パカパカ開いたり閉じたりするよ<br>
タブとかアコーディオンの代わりに使うべし
</div>

</div>

パカパカCSS

.sample {
	margin:0 auto;
	width:100%;
	max-width:300px;
	min-width:150px;
	min-height:250px;
}
.sample span {
	padding:.5em 1em;
	box-sizing:border-box;
	display:block;
	background-color:#333;
	color:#FFF;
}
.sample div {
	padding:.5em 1em;
	border:1px solid #CCC;
	box-sizing:border-box;
	background-color:#FFF;
	display:none;
}

パカパカJS

$(function(){
	$('.sample span').on('click', function() {
　		$(this).next().toggle();
	});
});

使い方

  • このボタン押したら「パカパカ」して詳細項目の入力欄が出てきてほしい！
  • このボタンクリックしたら、「パカパカ」して、説明文がでてくるようにしたい