How put two functional arrows in the Tab Section ?

And that function does not include the case if there are more than one tab-section on that page!

i did it this way – an for simplicity reasons i only take html entities to form the arrows:
this to child-theme functions.php

function ava_tab_section_arrows(){
?>
<script>
(function($) {
    $('.av-tab-section-container').each(function() {
        $(this).find('.av-tab-section-outer-container').prepend("<div class='av-tabsection-navs av-tabsection-nav-prev'>&lang;</div><div class='av-tabsection-navs av-tabsection-nav-next'>&rang;</div>");
        var arrowColor = $(this).find('.av-tab-section-tab-title-container').css('background-color');
        $(this).find('.av-tabsection-navs').css('color', arrowColor);

        var that = this;
        $('.av-tabsection-nav-prev', this).on('click', function(){	
        	$(this).closest('.av-tab-section-outer-container').find('.av-active-tab-title').prev().trigger('click');  
        });
        $('.av-tabsection-nav-next', this).on('click' , function(){	
            $(this).closest('.av-tab-section-outer-container').find('.av-active-tab-title').next().trigger('click');
        });
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'ava_tab_section_arrows');

this to quick css:

.av-layout-tab .container {
  padding-left: 100px;
  padding-right: 100px;
}
.av-tabsection-navs {
  opacity: 0.1;
  position: absolute;
  top: 55%;
  cursor: pointer;
  z-index: 5;
  font-family: arial;
  font-size: 40px;
  font-weight: bold;
  color: #333;
  height: 40px;
  width: 40px;
  transition: all 1s ease
}
.av-tab-section-outer-container:hover .av-tabsection-navs {
  opacity: 1;
  transition: all 1s ease;
  text-shadow: 8px 1px 5px #aaa;
}
.av-tab-section-outer-container:hover .av-tabsection-navs {
  transition: all 1s ease;
  transform: scale(1.5);
}
.av-tabsection-navs.av-tabsection-nav-prev {
  left: 0;
  text-align: right;
}
.av-tabsection-navs.av-tabsection-nav-next {
  right: 0;
  float: left;
}
@media only screen and (max-width:767px)  {
  .responsive #top #wrap_all .av-layout-tab .container {
    padding: 0 30px;
  }
  .av-tabsection-navs {
    width: 25px;
  }
}

Result page: https://webers-testseite.de/tab-section/
If your tab-title background is white – overwrite the calculated color of the arrows by css with important.

• This reply was modified 3 years, 8 months ago by Guenni007.

One thing to mention – of course, you shouldn’t set up the hover styles, because the mobile devices don’t support that.
So either you hide these arrows then – or you have to set up the settings for avia_desctop class only and leave the opacity at 1 for the avia_mobile.
Sorry

f.e.:

.avia_mobile .av-tabsection-navs {
    opacity: 1;
}

by the way – loop these arrows
if the first tab is shown and you click to the left side the last sibling tab is shown – rotation like in post navigation:

function ava_tab_section_arrows(){
?>
<script>
(function($) {
    $('.av-tab-section-container').each(function() {
        $(this).find('.av-tab-section-outer-container').prepend("<div class='av-tabsection-navs av-tabsection-nav-prev'>&lang;</div><div class='av-tabsection-navs av-tabsection-nav-next'>&rang;</div>");
        var arrowColor = $(this).find('.av-tab-section-tab-title-container').css('background-color');
        $(this).find('.av-tabsection-navs').css('color', arrowColor);

        var that = this;
        $('.av-tabsection-nav-prev', this).on('click', function(){  
          if($(this).closest('.av-tab-section-outer-container').find('.av-active-tab-title').prev().length){
            $(this).closest('.av-tab-section-outer-container').find('.av-active-tab-title').prev().trigger('click'); 
          }
          else{
            $(this).closest('.av-tab-section-outer-container').find('.av-active-tab-title').siblings(":last").trigger('click');
          }
        });

        $('.av-tabsection-nav-next', this).on('click' , function(){ 
          if($(this).closest('.av-tab-section-outer-container').find('.av-active-tab-title').next().length){
            $(this).closest('.av-tab-section-outer-container').find('.av-active-tab-title').next().trigger('click');
          }
          else{
            $(this).closest('.av-tab-section-outer-container').find('.av-active-tab-title').siblings(":first").trigger('click');
          }
        });
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'ava_tab_section_arrows');

Thanks for this brilliant solution @Guenni007 !
I’ve been looking for a way to do this for ages! I think that partly makes up for a missing element in Enfold which is a “section slider” :)
The only problem I’m having is that actually if I try to put 2 or more tab sections on the same page, when I click on the arrow, it slides every tab of every tab section on the same page!
Would you have an idea on how to overcome that problem ?
Thanks a lot in advance for your help!

Hello Gunter,

Well for me, this option displays arrows only next to the tabs and only on small screens.

What I need is what @Guenni007 proposed, which are arrows on each side of the tab section content allowing to switch from tab to tab, as a slider. I even hid the tabs header .av-tab-section-tab-title-container since I don’t need tabs to be displayed. But unfortunately there isn’t a “Slider Section” that would allow to do that… maybe an idea for a future release ? :))

But yes, It would be amazing to have a fix for this bug earlier if possible.
Thanks a lot in advance!

• This reply was modified 1 year, 5 months ago by maxgorelkine.

Well that’s just perfect! Exactly what I needed!
Thank you soooo much!