ぬるっ

タイプマイクロインタラクション系 ボタン・リンク系 類似の音

目次

オノマトペ

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;
}

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

使い方

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