WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

2列に並んだリストを押すと押したエリアの下がアコーディオンで開く

f:id:mmmmofu:20161017201158p:plain

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>アコーディオン</title>
  <link rel="stylesheet" href="css/style.css">
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="js/jquery.easing.1.3.js"></script>
  <script src="js/script.js"></script>
</head>
<body>
  <div class="wrapper">
    <ul class="list clearfix">
      <li>リスト1-1</li>
      <li>リスト1-2</li>
    </ul>
    <ul class="content">
      <li>
        <p>リスト1-1のコンテンツ</p>
        <p class="close">CLOSE</p>
      </li>
      <li>
        <p>リスト1-2のコンテンツ</p>
        <p class="close">CLOSE</p>
      </li>
    </ul>
    <ul class="list clearfix">
      <li>リスト2-1</li>
      <li>リスト2-2</li>
    </ul>
    <ul class="content">
      <li>
        <p>リスト2-1のコンテンツ</p>
        <p class="close">CLOSE</p>
      </li>
      <li>
        <p>リスト2-2のコンテンツ</p>
        <p class="close">CLOSE</p>
      </li>
    </ul>
    <ul class="list clearfix">
      <li>リスト3-1</li>
      <li>リスト3-2</li>
    </ul>
    <ul class="content">
      <li>
        <p>リスト3-1のコンテンツ</p>
        <p class="close">CLOSE</p>
      </li>
      <li>
        <p>リスト3-2のコンテンツ</p>
        <p class="close">CLOSE</p>
      </li>
    </ul>
  </div>
</body>
</html>

CSS

@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.clearfix:after {
  content: '.';
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

body {
  font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
}

.wrapper {
  width: 750px;
  margin: 100px auto 800px;
}

.wrapper .list {
  margin-bottom: 10px;
}

.wrapper .list li {
  float: left;
  width: 365px;
  border: 5px solid #000;
  box-sizing: border-box;
  margin-left: 20px;
  line-height: 100px;
  text-align: center;
  font-size: 20px;
  cursor: pointer;
  -webkit-transition: all .3s linear;
  -o-transition: all .3s linear;
  transition: all .3s linear;
}

.wrapper .list li:first-child {
  margin-left: 0;
}

.wrapper .list li:hover {
  background: #00ffba;
}

.wrapper .list li.active {
  background: #00ffba;
}

.wrapper .content {
  margin-bottom: 10px;
}

.wrapper .content li {
  display: none;
  position: relative;
  width: 750px;
  height: 600px;
  border: 5px solid #000;
  box-sizing: border-box;
  padding: 20px 40px;
}

.wrapper .content li p {
  line-height: 1.6;
}

.wrapper .content li .close {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: -0.04em;
  cursor: pointer;
}

JavaScript

$(function(){
  var flg = false;
  $('.list li').on('click',function(){

    var current = $(this).index();
    var y =$(this).parent('.list').next('.content').find('li').eq(current);
    var top = '';

    //同じリストを選択した場合
    if($(this).hasClass('active')) {
      $('.content li').stop().slideUp(400, 'easeOutQuad');
      $('.list li').removeClass('active');
      flg = false;
      return false;
    }

    //クリックしたリストに.activeを追加
    $('.list li').removeClass('active');
    $(this).addClass('active');

    //コンテンツが開いており、表示しているリストと違うものを選択した場合
    if(flg == true) {
      $('.content li').stop().slideUp(400, 'easeOutQuad');
      $(y).stop().stop().slideDown(400, 'easeOutQuad', function(){
        top = $(y).offset().top;
        $('body,html').animate({scrollTop:top}, 600, 'easeOutCubic');
      });
      return false;
    }

    //コンテンツが開いていない場合
    $(y).stop().slideDown(400, 'easeOutQuad');
    top = $(y).offset().top;
    $('body,html').animate({scrollTop:top}, 600, 'easeOutCubic');
    flg = true;
  });

  //CLOSEボタンを押した場合
  $('.close').on('click',function(){
    var y =$(this).parents('.content');
    var top = $(y).offset().top;
    $('body,html').stop().animate({scrollTop:top}, 400, 'easeOutCubic');
    $('.content li').stop().slideUp(400, 'easeOutQuad');
  });
});