HTML
CSS
JavaScript
jQuery

[jquery,js,css]'もっと読む'ボタンを作ってみる。

概要

  • ボタンを押したら開く。
  • もう一度、押したら閉じる。

1513987852271.gif

Sample https://jsfiddle.net/masanos/7wr2hpnt/6/

準備

<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>

Step1.開くボタンと閉じるボタンを作る

Sample

https://jsfiddle.net/masanos/7wr2hpnt/1/

code

test.html
<div class="container">
    <button class="btn btn-danger">
    Hide
    </button>
    <button class="btn btn-primary">
    Show
    </button>
    <ul>
        <li>Apple</li>
        <li>Banana</li>
        <li>Carbon</li>
    </ul>
</div>
test.js
$('.btn-danger').on('click', function() {
    $('li').hide();
})

$('.btn-primary').on('click', function() {
    $('li').show();
})

output

1513988278316.gif

補足

5秒間かけてのfadeIn , fadeOutもできる。

test.js
$('.btn-danger').on('click', function() {
    $('li').fadeOut(5000);
})

$('.btn-primary').on('click', function() {
    $('li').fadeIn(5000);
})

1513988506607.gif

スライドする

test.js
$('.btn-danger').on('click', function() {
    $('li').slideUp();
})

$('.btn-primary').on('click', function() {
    $('li').slideDown();
})

1513989168207.gif

Step2.ボタンを1つにする

test.html
<div class="container">
  <button class="btn btn-primary">
    <span class="btn_open">open</span>
    <span class="btn_close">close</span>
  </button>
  <ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Carbon</li>
  </ul>
</div>
test.js
$('.btn-danger').on('click', function() {
    $('li').slideUp();
})

$('.btn-primary').on('click', function() {
    $('li').slideDown();
})
test.css
.btn_open {
  display: none;
}

.open .btn_open {
  display: inline;
}

.open .btn_close {
  display: none;
}

ボタンを押した時に特定のclassを非表示にしている。

閉じている状態

close
<div class="container">
  <button class="btn btn-primary open">
    <span class="btn_open">open</span>
    <span class="btn_close">close</span>
  </button>
  <ul>
    <li style="display: none;">Apple</li>
    <li style="display: none;">Banana</li>
    <li style="display: none;">Carbon</li>
  </ul>
</div>

open.jpg

開いている状態

before
<div class="container">
  <button class="btn btn-primary">
    <span class="btn_open">open</span>
    <span class="btn_close">close</span>
  </button>
  <ul>
    <li style="">Apple</li>
    <li style="">Banana</li>
    <li style="">Carbon</li>
  </ul>
</div>

open2.jpg

完成

1513987852271.gif