Bootstrap Snippet Animated Tap panel, 3D Animated Tab panel, Animated tab panel in Jquery using HTML CSS jQuery

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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.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">
<section class="page">
        <section>
            <ul class="tabs-controls">
                <li class="tabs-controls-itme"><a href="#" class="tabs-controls-link tabs-controls-active" data-id="1">Home</a></li>
                <li class="tabs-controls-itme"><a href="#" class="tabs-controls-link" data-id="2">About</a></li>
                <li class="tabs-controls-itme"><a href="#" class="tabs-controls-link" data-id="3">Gallery</a></li>
                <li class="tabs-controls-itme"><a href="#" class="tabs-controls-link" data-id="4">Team</a></li>
                <li class="tabs-controls-itme"><a href="#" class="tabs-controls-link" data-id="5">Testimonial</a></li>
                <li class="tabs-controls-itme"><a href="#" class="tabs-controls-link" data-id="6">Faq</a></li>
            </ul>
        </section>
        <section class="cards-container">
            <div class="card card-current" id="1">
                <h1>Home</h1>
                <p>
                    The table containing the foreign key is called the child table, and the table containing the candidate key is called the referenced or parent table.The table containing the foreign key is called the child table, and the table containing the candidate key is called the referenced or parent table.The table containing the foreign key is called the child table, and the table containing the candidate key is called the referenced or parent table.
                </p>
                <div class="social">
                    <i class="fa fa-facebook"></i>
                    <i class="fa fa-twitter"></i>
                    <i class="fa fa-linkedin"></i>
                    <i class="fa fa-youtube"></i>
                </div>
            </div>
            <div class="card" id="2">
                <h1>ABOUT</h1>
                <p>
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
body{
            background: #015292;
            margin: 0;
            padding: 0;
            font-family: arial;
        }
        h1{
            margin: 0;
            font-size: 22px;
            line-height: 1;
            color: #423e37;
        }
        .page{
            width: 100vw;
            height: 100vh;
            min-height: 700px;
            overflow: hidden;
            margin-left: -25px;
            margin-top: 45px;
        }
        .tabs-controls{
            position: relative;
            z-index: 10;
            display: flex;
            justify-content: center;
            align-items: stretch;
            width: 100%;
            margin: 0 auto;
            box-sizing: border-box;
            padding: 50px 0 100px;
            list-style-type: none;
        }
        .tabs-controls-link{
            position: relative;
            display: block;
            padding: 16px 32px;
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
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script>
   $(document).ready(function() {
    var oldId = null;
    $('.tabs-controls-link').click(function(e) {
        e.preventDefault();
        if ($(this).hasClass('tabs-controls-link-active')) {
            return false;
        }
        var currentId = parseInt($(this).data('id'), 10);
        $('.tabs-controls-link-active').removeClass('tabs-controls-link-active');
        $(this).addClass('tabs-controls-link-active');
        if (currentId < oldId) { // item is hidden
            var timing = $('.card.hidden').length * 100;
            $('.card').each(function(index) {
                if (index > (currentId - 1 ) || index == (currentId - 1)) {
                    window.setTimeout(function() {
                        $('.card').eq(index).removeClass('hidden');
                    }, timing - (index * 100));
                }
            });
        } else {
            $('.card').each(function(index) {
                if (index < (currentId - 1)) {
                    window.setTimeout(function() {
                        $('.card').eq(index).addClass('hidden');
                    }, index * 100);
                }
            });
        }
        oldId = currentId;
    });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Animated Tap panel, 3D Animated Tab panel, Animated tab panel in Jquery "
Bootstrap 4.1.1 Snippet by RAJKUMAR123

Related: See More

Questions / Comments:

"Animated Tap panel, 3D Animated Tab panel, Animated tab panel in Jquery " Bootstrap 4.1.1 Snippet by RAJKUMAR123

Related: See More

Questions / Comments:

"Animated Tap panel, 3D Animated Tab panel, Animated tab panel in Jquery "
Bootstrap 4.1.1 Snippet by RAJKUMAR123