%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /var/www/cwg/wp-content/themes/cwg/
Upload File :
Create Path :
Current File : //var/www/cwg/wp-content/themes/cwg/template-terms.php

<?php


    /**
    * Template Name: Terms-Conditions
    */

get_header();
?>
<!----Should be placed when there is no carousel-->
<div class="js-headerGap"></div>
<div class="cwg-container-main">

<div class="terms-container">
    <div class="tabs">
        <div class="sidebar-tabs" >
            <ul id="tabs-nav">
                <?php
                
                    if( have_rows('flexible_content') ):
                    $i = 1;
                    while( have_rows('flexible_content') ) : the_row();
                        $sub_value = get_sub_field('title');
                ?>

                <li><a href="#tab-<?php echo $i++ ?>"><?php echo $sub_value ?></a></li>

                <?php
                    endwhile;
                    else :      
                    endif;
                ?>
            </ul> 
        </div>
        <div class="tabs-content" id="tabs-content">
            <?php
            if( have_rows('flexible_content') ):
                $i = 1;
                while( have_rows('flexible_content') ) : the_row();
                    $sub_title = get_sub_field('title');
                    $sub_update = get_sub_field('last_updated');
                    $sub_value = get_sub_field('content');
            ?>

                <div class="tab-content" id="tab-<?php echo $i++ ?>">
                <div class="tab-header">
                    <h2><?php echo $sub_title ?></h2>
                    <span><?php echo $sub_update ?></span>
                </div>
                    <?php echo $sub_value ?>
                </div>

            <?php
                endwhile;
                else :
                endif;
            ?>
        </div>
    </div>
</div>

    <style>

        .terms-container{
            width:90%;
            max-width:1200px;
            margin:auto;
            margin-top:80px;
        }

        .tabs{
            display:flex;
        }

        .sidebar-tabs{
            width:250px;
        }

        .sidebar-tabs ul{
            position:sticky;
            top:90px;
            margin-top:-15px;
        }

        .sidebar-tabs ul li a{
            color:#A9A9A9;
            text-transform:uppercase;
            padding:15px 0px 10px 0px;
            border-bottom:1px solid #E8E8E8;
            display:block;
        }

        .sidebar-tabs ul li.active a{
            color:#000;
            border-bottom:1px solid #000;
        }

        .tabs-content{
            width:calc(100% - 250px);
            padding-left:100px;
            box-sizing:border-box;
        }

        .tab-content .tab-header{
            margin-bottom:20px;
        }

        .tabs-content h2{
            color:#000;
            font-size:20px;
            text-transform:uppercase;
        }

        .tabs-content span{
            font-size:20px;
            color:#A9A9A9;
        }

        .tabs-content h3{
            font-size:14px;
            font-weight:normal;
            border-bottom:1px solid #000;
            padding-bottom:10px;
            margin-bottom:20px;
            padding-top:30px;
        }

        .tabs-content h3 strong{
            font-weight:normal;
        }

        .tabs-content p{
            margin-bottom:30px;
            font-size:12px;
            padding-left:20px;
        }


        @media only screen and (max-width: 930px) {

            .terms-container {
                width: 100%;
            }

            .sidebar-tabs{
                position:fixed;
                left:0;
                top:100px;
                background:#fff;
                width:100%;
            }

            .sidebar-tabs ul{
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top:0;
            }

            #tabs-nav li{
                display: inline-block;
                font-size:14px;
            }

            .sidebar-tabs ul li a {
                padding: 15px 10px 10px 10px;
            }

            .tabs-content {
                width:100%;
                padding-left:0px;
            }


        }


    </style> 


<script>


    jQuery(document).ready(function(){

        // Show the first tab and hide the rest
        jQuery('#tabs-nav li:first-child').addClass('active');
        jQuery('.tab-content').hide();
        jQuery('.tab-content:first').show();

        // Click function
        jQuery('#tabs-nav li').click(function(){
        jQuery('#tabs-nav li').removeClass('active');
        jQuery(this).addClass('active');
        jQuery('.tab-content').hide();
        
        var activeTab = jQuery(this).find('a').attr('href');
        jQuery(activeTab).fadeIn();
        return false;
        });

    });

</script>

</div>
<?php
get_footer();

?>

Zerion Mini Shell 1.0