calidewberry

THANK YOU!
FYI: it actually does work in tabs, see below:

<!-- TAB TEST --> 
<div class="tabs">
    <ul class="tab-links">
        <li class="active"><a href="#tab1">EVENTS</a></li>
        <li><a href="#tab2">WORKSHOPS</a></li>
        <li><a href="#tab3">CALENDAR</a></li>
    </ul>

    <div class="tab-content">
        <div id="tab1" class="tab active">
            <article>
               <div class="container">
                    <h2>Upcoming Events</h2>
                    <!-- QUERRY TO GET EVENT COLUMS --> 
                    <div id="events-page-banner">
                        <div class="row">
                                <?php echo do_shortcode('
                                [events_list scope="future" limit="10" category="third-party-events"]
                                    <div class="col-sm-6 col-md-4 col-lg-3">        
                                        <div class="event-col">
                                            <div class="event-col-img">
                                                <a href="#_EVENTURL">#_EVENTIMAGE</a>
                                            </div>
                                            <p>#_EVENTDATES</p>
                                            <h3><a href="#_EVENTURL">#_EVENTNAME</a></h3> 
                                        </div>
                                    </div><!-- /Columns -->     
                                [/events_list]
                                '); ?>                                 
                        </div>
                    </div> 

                </div>    
            </article>
        </div>

            <div id="tab2" class="tab">
            <article>
                <div class="container">
                <h2>Upcoming WORKSHOPS</h2>
             <!-- QUERRY TO GET EVENT COLUMS --> 
                    <div id="events-page-banner">
                        <div class="row">
                                <?php echo do_shortcode('
                                [events_list scope="future" limit="10" category="workshops"]
                                    <div class="col-sm-6 col-md-4 col-lg-3">        
                                        <div class="event-col">
                                            <div class="event-col-img">
                                                <a href="#_EVENTURL">#_EVENTIMAGE</a>
                                            </div>
                                            <p>#_EVENTDATES</p>
                                            <h3><a href="#_EVENTURL">#_EVENTNAME</a></h3> 
                                        </div>
                                    </div><!-- /Columns -->     
                                [/events_list]
                                '); ?>                                 
                        </div>
                    </div>   
                </div>    
            </article>
        </div>
        
        <div id="tab3" class="tab">
            <article>
                <div class="container calendar-display">
                    <?php echo do_shortcode('[events_calendar]'); ?>
                </div>
            </article>
        </div>

    </div>
</div>   

<script>

    jQuery(document).ready(function() {
    jQuery('.tabs .tab-links a').on('click', function(e) {
    var currentAttrValue = jQuery(this).attr('href');
     
    jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
     
    jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
     
    e.preventDefault();
    });
    });

</script>

Thank you for your reply, I had seen that, I am pretty new at this, but have implemented your suggestion. The only problem is that the loop keeps repeating on the first loop on the same page and I don’t know how to stop this loop. I have tried both class_exists and !empty but i cant seem to end the if without getting a blank screen.

<!-- TAB TEST --> 
<div class="tabs">
    <ul class="tab-links">
        <li class="active"><a href="#tab1">EVENTS</a></li>
        <li><a href="#tab2">WORKSHOPS</a></li>

    </ul>

    <div class="tab-content">
    <!-- Third Party Events -->     
        <div id="tab1" class="tab active">
            <article>
                <div class="container">
                    <h2>Upcoming Events</h2>
                    <div id="events-page-banner">
                        <div class="container event-col-container">
                            <?php if (!empty('EM_Events')) {
                            echo EM_Events::output(array('scope'=>'future','category'=> 'third-party-events', 'limit'=>10, 'format'=>' 
                              <!-- Single Events -->
                                <div class="event-in-cols">
                                       <div class="event-col">
                                           <p>#_EVENTDATES</p>
                                            <div class="event-col-img">
                                                <a href="#_EVENTURL">#_EVENTIMAGE</a>        
                                            </div>
                                            <h3><a href="#_EVENTURL">#_EVENTNAME</a></h3> 
                                            <p>#_CATEGORYNAME</p>
                                        </div>
                                </div><!-- /Single Event -->
                            '));
                            } 
                            ?>
                            
                        </div> 
                    </div>                
                </div>    
            </article>
        </div>

    <!-- Workshops -->     
        <div id="tab2" class="tab active">
            <article>
                <div class="container">
                    <h2>Upcoming Workshops</h2>

                    <div id="events-page-banner">
                        <div class="container event-col-container">
                            <?php if (class_exists('EM_Events')) {
                            echo EM_Events::output(array('scope'=>'future','category'=> 'workshops', 'limit'=>10, 'format'=>' 
                              <!-- Single Events -->
                                <div class="event-in-cols">
                                       <div class="event-col">
                                           <p>#_EVENTDATES</p>
                                            <div class="event-col-img">
                                                <a href="#_EVENTURL">#_EVENTIMAGE</a>        
                                            </div>
                                            <h3><a href="#_EVENTURL">#_EVENTNAME</a></h3> 
                                            <p>#_CATEGORYNAME</p>
                                        </div>
                                </div><!-- /Single Event -->
                            '));
                            }
                            ?>  
                        </div> 
                    </div>                
                </div>    
            </article>
        </div>

    </div>
</div> 

Thank you!