Collapse Bootstrap на чистом JQuery

286

19 марта 2017, 05:44

Помогите верстать это место. В Bootstrap'е оно называется Collapse. Я хочу сделать чисто на HTML, JQuery:

Answer 1

Самый лёгкий accordion с минимальным использованием JQuery. Для анимации нужно в CSS добавить transition и указывать фиксированную высоту для пунктов:

$(function() { 
  $('.accordion-item-title').click(function() { 
    var $item = $(this).parents('.accordion-item'); 
     
    $item.toggleClass('accordion-item--active').siblings('.accordion-item--active').removeClass('accordion-item--active'); 
  }); 
});

body {font-family: arial;} 
 
.body { 
    width: 80%; 
    margin: 0 auto; 
} 
 
.title { 
    padding: 20px 0; 
} 
 
.title-text { 
    text-transform: uppercase; 
    font-size: 32px; 
    font-weight: 700; 
    color: black; 
} 
.title-line { 
    width: 65px; 
    height: 4px; 
    margin: 15px 0; 
    background-color: black; 
} 
 
.accordion { 
    display: flex; 
    flex-direction: column; 
} 
 
.accordion-item { 
    height: 45px; 
    margin: 5px 0; 
    border: 1px solid #e0e0e0; 
    overflow: hidden; 
} 
.accordion-item.accordion-item--active {height: auto;} 
 
.accordion-item-title { 
    padding: 12px; 
    text-transform: uppercase; 
    font-size: 18px; 
    font-weight: 700; 
    color: black; 
    cursor: pointer; 
} 
.accordion-item--active .accordion-item-title { 
    color: #57d4e5; 
} 
 
.accordion-item-content { 
    padding: 12px; 
    color: #707070; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script> 
 
<div class="body"> 
  <div class="title"> 
    <div class="title-text">Our mission</div> 
    <div class="title-line"></div> 
  </div> 
  <div class="accordion"> 
    <div class="accordion-item"> 
      <div class="accordion-item-title">We build your dream</div> 
      <div class="accordion-item-content">Content text</div> 
    </div> 
    <div class="accordion-item"> 
      <div class="accordion-item-title">Connecting people</div> 
      <div class="accordion-item-content">Content text</div> 
    </div> 
    <div class="accordion-item"> 
      <div class="accordion-item-title">Make the world more beautiful</div> 
      <div class="accordion-item-content">Content text</div> 
    </div> 
    <div class="accordion-item"> 
      <div class="accordion-item-title">Nithing to fear</div> 
      <div class="accordion-item-content">Content text</div> 
    </div> 
  </div> 
</div>

С фиксированной высотой и анимацией:

$(function() { 
  $('.accordion-item-title').click(function() { 
    var $item = $(this).parents('.accordion-item'); 
     
    $item.toggleClass('accordion-item--active').siblings('.accordion-item--active').removeClass('accordion-item--active'); 
  }); 
});

body {font-family: arial;} 
 
.body { 
    width: 80%; 
    margin: 0 auto; 
} 
 
.title { 
    padding: 20px 0; 
} 
 
.title-text { 
    text-transform: uppercase; 
    font-size: 32px; 
    font-weight: 700; 
    color: black; 
} 
.title-line { 
    width: 65px; 
    height: 4px; 
    margin: 15px 0; 
    background-color: black; 
} 
 
.accordion { 
    display: flex; 
    flex-direction: column; 
} 
 
.accordion-item { 
    height: 45px; 
    margin: 5px 0; 
    border: 1px solid #e0e0e0; 
    overflow: hidden; 
    transition: height 0.3s linear; 
} 
.accordion-item.accordion-item--active {height: 100px;} 
 
.accordion-item-title { 
    padding: 12px; 
    text-transform: uppercase; 
    font-size: 18px; 
    font-weight: 700; 
    color: black; 
    cursor: pointer; 
    transition: color 0.3s linear; 
} 
.accordion-item--active .accordion-item-title { 
    color: #57d4e5; 
} 
 
.accordion-item-content { 
    padding: 12px; 
    color: #707070; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script> 
 
<div class="body"> 
  <div class="title"> 
    <div class="title-text">Our mission</div> 
    <div class="title-line"></div> 
  </div> 
  <div class="accordion"> 
    <div class="accordion-item"> 
      <div class="accordion-item-title">We build your dream</div> 
      <div class="accordion-item-content">Content text</div> 
    </div> 
    <div class="accordion-item"> 
      <div class="accordion-item-title">Connecting people</div> 
      <div class="accordion-item-content">Content text</div> 
    </div> 
    <div class="accordion-item"> 
      <div class="accordion-item-title">Make the world more beautiful</div> 
      <div class="accordion-item-content">Content text</div> 
    </div> 
    <div class="accordion-item"> 
      <div class="accordion-item-title">Nithing to fear</div> 
      <div class="accordion-item-content">Content text</div> 
    </div> 
  </div> 
</div>

Вариант с анимацией JQuery. Мы по началу записываем в свойство пункта аккордеона его настоящую высоту и присваиваем ему новую - 45px. Далее при нажатии анимацией из 45px изменяем на его настоящую высоту. Анимационная смена цвета заголовка - это уже побочная анимация и её мы записываем в CSS:

$(function() { 
  $('.accordion-item').each(function() { 
    var $self = $(this), 
        _height = $self.outerHeight(); 
   
    $self.prop('_height', _height).css('height', 45); 
  }); 
   
  $('.accordion-item-title').click(function() { 
    var $item = $(this).parents('.accordion-item'), 
        $item_height = $item.prop('_height'); 
     
    if( !$item.hasClass('accordion-item--active') ){ 
      $item.animate({'height': $item_height}, 300) 
           .addClass('accordion-item--active') 
           .siblings('.accordion-item--active') 
           .animate({'height': 45}, 300) 
           .removeClass('accordion-item--active'); 
    }else{ 
      $item.animate({'height': 45}, 300) 
           .removeClass('accordion-item--active'); 
    }; 
  }); 
});

body {font-family: arial;} 
 
.body { 
    width: 80%; 
    margin: 0 auto; 
} 
 
.title { 
    padding: 20px 0; 
} 
 
.title-text { 
    text-transform: uppercase; 
    font-size: 32px; 
    font-weight: 700; 
    color: black; 
} 
.title-line { 
    width: 65px; 
    height: 4px; 
    margin: 15px 0; 
    background-color: black; 
} 
 
.accordion { 
    display: flex; 
    flex-direction: column; 
} 
 
.accordion-item { 
    margin: 5px 0; 
    border: 1px solid #e0e0e0; 
    overflow: hidden; 
} 
 
.accordion-item-title { 
    padding: 12px; 
    text-transform: uppercase; 
    font-size: 18px; 
    font-weight: 700; 
    color: black; 
    cursor: pointer; 
    transition: color 0.3s linear; 
} 
.accordion-item--active .accordion-item-title { 
    color: #57d4e5; 
} 
 
.accordion-item-content { 
    padding: 12px; 
    color: #707070; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script> 
 
<div class="body"> 
  <div class="title"> 
    <div class="title-text">Our mission</div> 
    <div class="title-line"></div> 
  </div> 
  <div class="accordion"> 
    <div class="accordion-item"> 
      <div class="accordion-item-title">We build your dream</div> 
      <div class="accordion-item-content">Content text</div> 
    </div> 
    <div class="accordion-item"> 
      <div class="accordion-item-title">Connecting people</div> 
      <div class="accordion-item-content">Content text</div> 
    </div> 
    <div class="accordion-item"> 
      <div class="accordion-item-title">Make the world more beautiful</div> 
      <div class="accordion-item-content">Content text</div> 
    </div> 
    <div class="accordion-item"> 
      <div class="accordion-item-title">Nithing to fear</div> 
      <div class="accordion-item-content">Content text</div> 
    </div> 
  </div> 
</div>

Ещё есть вариант с использованием JQueryUI:

$(function() { 
  $('.accordion').accordion(); 
});

body {font-family: arial;} 
 
.body { 
    width: 80%; 
    margin: 0 auto; 
} 
 
.title { 
    padding: 20px 0; 
} 
 
.title-text { 
    text-transform: uppercase; 
    font-size: 32px; 
    font-weight: 700; 
    color: black; 
} 
.title-line { 
    width: 65px; 
    height: 4px; 
    margin: 15px 0; 
    background-color: black; 
} 
 
.accordion { 
    display: flex; 
    flex-direction: column; 
} 
 
.accordion-item-title { 
    margin: 10px 0 0; 
    padding: 12px; 
    text-transform: uppercase; 
    font-size: 18px; 
    font-weight: 700; 
    color: black; 
    border: 1px solid #e0e0e0; 
    cursor: pointer; 
    transition: color 0.3s linear; 
    outline: none; 
} 
.accordion-item-title.ui-state-active { 
    color: #57d4e5; 
    border-bottom: 0; 
} 
 
.accordion-item-content { 
    padding: 12px; 
    color: #707070; 
    border: 1px solid #e0e0e0; 
    border-top: 0; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<div class="body"> 
  <div class="title"> 
    <div class="title-text">Our mission</div> 
    <div class="title-line"></div> 
  </div> 
  <div class="accordion"> 
    <h3 class="accordion-item-title">We build your dream</h3> 
    <div class="accordion-item-content">Content text</div> 
    <h3 class="accordion-item-title">Connecting people</h3> 
    <div class="accordion-item-content">Content text</div> 
    <h3 class="accordion-item-title">Make the world more beautiful</h3> 
    <div class="accordion-item-content">Content text</div> 
    <h3 class="accordion-item-title">Nithing to fear</h3> 
    <div class="accordion-item-content">Content text</div> 
  </div> 
</div>