Bootstrap Snippet animated accordion using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js" type="text/javascript"></script>
<div class="accordion">
<ul class="accordion__list">
    <li class="accordion__item" id="AllStaff">
    <div class="accordion__itemTitleWrap">
    <h3 class="accordion__itemTitle">All-Staff Courses</h3>
    <div class="accordion__itemIconWrap">
    <em class="fa fa-angle-up" aria-hidden="true"></em>
    </div>
    </div>
    <div class="accordion__itemContent">
    <div class="container CourseContainer">
    <div class="row">
    <div class="col-lg-4 botm-margn ">
    <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;">
    <img alt="" src="/portals/21/Images/BUCourses/COVID-19(2)COVID-19SocialDistancing_PersonalHygiene.png" class="img-responsive" />
    <div class="black_hover_block">
    <div class="blur">
    </div>
    <div class="black_hover_block_text">
    <h5 class="titl-h5">COVID-19: Social Distancing & Personal Hygiene</h5>
    <p>
    It's important to know about COVID-19, social distancing and personal hygiene to not only protect yourself but also to do your part in preventing the spread. There is currently no vaccine to prevent coronavirus disease 2019 (COVID-19). Information contained in this course is based on the CDC and World Health Organization.
    <br />
    <br />
    <strong>Approximate time: 30 mins.</strong>
    </p>
    <div class="block_header">
    </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
    .accordion {
    max-width: 1280px;
    margin: 0 auto;
    }
    .accordion__itemTitle {
    margin: 0;
    font-family: 'industry', sans-serif;
    font-weight: 700;
    font-size: 1em;
    position: relative;
    z-index: 10;
    color: #fff;
    }
    .accordion__list {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .accordion__item {
    border-bottom: 1px solid #000;
    visibility: hidden;
    }
    .accordion__item:last-child {
    border-bottom: 0;
    }
    .accordion__item.is-active .accordion__itemTitleWrap::after {
    -webkit-transform: translateX(-20%);
    transform: translateX(-20%);
    }
    .accordion__item.is-active .accordion__itemIconWrap {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    }
    .accordion__itemTitleWrap {
    display: flex;
    height: 2.5em;
    align-items: center;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var Accordion = function() {
var
toggleItems,
items;
var _init = function() {
toggleItems     = document.querySelectorAll('.accordion__itemTitleWrap');
toggleItems     = Array.prototype.slice.call(toggleItems);
items           = document.querySelectorAll('.accordion__item');
items           = Array.prototype.slice.call(items);
_addEventHandlers();
TweenLite.set(items, {visibility:'visible'});
TweenMax.staggerFrom(items, 0.9,{opacity:0, x:-100, ease:Power2.easeOut}, 0.3);
};
var _addEventHandlers = function() {
toggleItems.forEach(function(element, index) {
element.addEventListener('click', _toggleItem, false);
});
}
var _toggleItem = function() {
var parent = this.parentNode;
var content = parent.children[1];
if(!parent.classList.contains('is-active')) {
parent.classList.add('is-active');
TweenLite.set(content, {height:'auto'});
TweenLite.from(content, 0.6, {height: 0, immediateRender:false, ease: Back.easeOut});
} else {
parent.classList.remove('is-active');
TweenLite.to(content, 0.3, {height: 0, immediateRender:false, ease: Power1.easeOut});
}
};
return {
init: _init
};
}();
Accordion.init();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"animated accordion"
Bootstrap 4.1.1 Snippet by ronnydodd

Related: See More

Questions / Comments:

"animated accordion" Bootstrap 4.1.1 Snippet by ronnydodd

Related: See More

Questions / Comments:

"animated accordion"
Bootstrap 4.1.1 Snippet by ronnydodd