function sr_playlist_albums(){ ?>
    <div class="tabs tabsRow">
        <ul id="tabs-nav">
            <?php
                $terms = get_terms('playlist-category');
                $i = 0;
                foreach ($terms as $term) :
            ?>
                <li <?php if ($i == 0) echo 'class="active"'; ?>><a href="#tab-<?php echo $term->slug; ?>"><?php echo $term->name; ?></a></li>
            <?php
                $i++;
                endforeach;
            ?>
        </ul>
        <div id="tab-content">
            <?php foreach ($terms as $term) :
                $args = array(
                    'post_type' => 'sr_playlist',
                    'tax_query' => array(
                        array(
                            'taxonomy' => 'playlist-category',
                            'field' => 'term_id',
                            'terms' => $term->term_id,
                        ),
                    ),
                );

                $query = new WP_Query($args);
            ?>
                <div id="tab-<?php echo $term->slug; ?>" class="tab-content">
                    <div class="row tabsRow">
                        <?php while ($query->have_posts()) : $query->the_post();
                            $coverUrl = esc_url(get_the_post_thumbnail_url(get_the_ID(), 'full'));
                        ?>
                        <div class="col-md-3">
                            <div class="albumWrapper">
                                <div class="albumImg">
                                    <img src="<?php echo $coverUrl; ?>" alt="<?php echo esc_url(get_the_title()); ?>">
                                </div>
                                <div class="albumInfo">
                                    <h4><?php echo get_the_title(); ?></h4>
                                    <a href="<?php echo esc_url(get_the_permalink()); ?>"  class="albumPlay">
                                        <span>▶<span>
                                    </a>
                                </div>
                                <img src="<?php echo get_stylesheet_directory_uri(). '/img/castel.png'; ?>" class="imgAbsAlbum" alt="<?php echo esc_url(get_the_title()); ?>">
                            </div>
                        </div>
                        <?php endwhile; ?>
                    </div>
                </div>
            <?php endforeach; ?>
            <?php wp_reset_postdata(); ?>
        </div>
    </div>
<?php
}
add_shortcode('sr_albums_code','sr_playlist_albums');

function tabs_script(){ ?>
    <script>
    jQuery(document).ready(function($) {
        $('#tabs-nav li:first-child').addClass('active');
        $('.tab-content').hide();
        $('.tab-content:first').show();
        
        // Click function
        $('#tabs-nav li').click(function(){
          $('#tabs-nav li').removeClass('active');
          $(this).addClass('active');
          $('.tab-content').hide();
          
          var activeTab = $(this).find('a').attr('href');
          $(activeTab).fadeIn();
          return false;
        });
    });
</script>
<?php }
add_action('wp_footer', 'tabs_script');