<?php ?>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.0/css/bulma.min.css" />
<style>
    .columns {
    min-height: 60vh;
    }

    .tabs-wrapper {
    display: flex;
    }

    .tabs {
    flex-grow: 2;
    min-width: 150px;
    margin-right: 30px;
    }
    .tabs ul {
    display: block;
    text-align: left;
    border-bottom-color: transparent !important;
    }
    .tabs ul li {
    display: block;
    }
    .tabs ul li.is-active a {
    border-right-color: #3273dc;
    }
    .tabs ul li a {
    display: block;
    border-bottom-color: transparent !important;
    border-right: 2px solid #dbdbdb;
    }

    .content-wrap .tab-content {
    padding-top: 12px;
    display: none;
    animation: fadeInLeft 0.5s;
    }
    .content-wrap .tab-content.is-active {
    display: block;
    }

    @-webkit-keyframes fadeInLeft {
    from {
        -webkit-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0);
        opacity: 0;
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    }
    @keyframes fadeInLeft {
    from {
        -webkit-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0);
        opacity: 0;
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    }
    .fadeInLeft {
    opacity: 0;
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    }

</style>
<div class="wrap proqyz_shortcodes">
    <h2>Shortcodes</h2>
    <p>Here’s a complete list of all available ProQyz blocks/shortcodes. Click on the name for more information on how to use them, as well as all the available parameters.</p>

    <br />
        <div class="container-fluid">
            <div class="columns">
            <div class="column">
                <div class="box">
                    <div class="tabs-wrapper">
                        <div class="tabs">
                            <ul>
                                <li data-target="progress-report" class="is-active"><a>Progress Report</a></li>
                                <li data-target="course-grid"><a>Course Grid</a></li>
                                <li data-target="course"><a>Course</a></li>
                                <li data-target="quizzes"><a>Quizzes</a></li>
                                <li data-target="quiz"><a>Quiz</a></li>
                            </ul>
                        </div>
                        <div class="content-wrap">
                            <div id="pictures" class="tab-content is-active">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quodsi ipsam honestatem undique pertectam atque absolutam. Summae mihi videtur inscitiae. Traditur, inquit, ab Epicuro ratio neglegendi doloris. Age, inquies, ista parva sunt. Duo
                                Reges: constructio interrete.</p>
                            </div>
                            <div id="music" class="tab-content">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quodsi ipsam honestatem undique pertectam atque absolutam. Summae mihi videtur inscitiae. Traditur, inquit, ab Epicuro ratio neglegendi doloris. Age, inquies, ista parva sunt.</p>
                            </div>
                            <div id="videos" class="tab-content">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quodsi ipsam honestatem undique pertectam atque absolutam. Summae mihi videtur inscitiae. Traditur, inquit, ab Epicuro ratio neglegendi doloris. Age, inquies, ista parva sunt. Duo
                                Reges: constructio interrete.</p>
                            </div>
                            <div id="documents" class="tab-content">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quodsi ipsam honestatem undique pertectam atque absolutam. Summae mihi videtur inscitiae. Traditur, inquit, ab Epicuro ratio neglegendi doloris. Age, inquies, ista parva sunt.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </div>
    

</div>

<script>
    jQuery(document).ready(function($){
        $('.tabs ul li').on('click', function() {
        var target = $(this).attr('data-target');   $(this).siblings('li').removeClass('is-active');
            $(this).addClass('is-active');
            $('.tab-content').removeClass('is-active');
            $('#' + target).addClass('is-active');
        })
    });
</script>