Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • September 14, 2021 at 9:55 am #1320865
    emilconsor

    Hey,

    we are using the tab section on our website. Unfortunately, there was no option to initially have all tabs closed.

    I researched in the forum and found one thread that deals with this subject.

    The suggestion was to edit the tab.php in /wp-content/themes/enfold/config-templatebuilder/avia-shortcodes/tabs and set the “$inital = 1;” to “= 0;”.

    So I created a “shortcodes” file in my child theme and added this to my functions.php: 

    add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);
function avia_include_shortcode_template($paths)
{
  $template_url = get_stylesheet_directory();
      array_unshift($paths, $template_url.'/shortcodes/');

  return $paths;
}

    But it didn’t work out. How can I close all Tabs.

    Thanks in advance.

    Kind regards

    September 15, 2021 at 11:54 am #1321021
    Ismael

    Hey emilconsor,

    Thank you for the inquiry.

    You will have to directly modify the enfold/config-templatebuilder/avia-shortcodes/tab_section/tab_section.php file. Look for this code around line 567.

    	/**
				 * Bugfix: Set no-scroll to avoid auto smooth scroll when initialising tab section and multiple tab sections are on a page - removed in js.
				 */
				$active_tab = $i == $atts['initial'] ? 'av-active-tab-title no-scroll' : '';

    Above it, add this code to set the initial tab to zero.

    $atts['initial'] = 0;

    Best regards,
    Ismael

    September 15, 2021 at 4:08 pm #1321083
    emilconsor

    Hey Ismael,

    thank you, the code worked. But It’s not quite what I expected.

    The tabs are closed, but it’s just a whitespace. I created Screenshots for better understanding.

    How it is: https://savvyify.com/img/image/HfWMn
    How it should be: https://savvyify.com/img/image/Hl82t

    I need the tabs fully removed until the user clicks it.

    Hope that clarifies my problem.

    Best regards,
    Emil

    September 19, 2021 at 6:48 pm #1321542
    Mike

    Hi,
    Thank you for your patience, I tested this by editing the file \wp-content\themes\enfold\config-templatebuilder\avia-shortcodes\tab_section\tab_section.php lines 568-569 as above:

    $atts['initial'] = 0;
	$active_tab = $i == $atts['initial'] ? 'av-active-tab-title no-scroll' : '';

    on our demo and found that the tab section inner container shows as an empty section because the content is in the div just off the screen, so I wrote a script that changes the display of the inner container to none if no tab titles have the active class. Try adding this code to the end of your functions.php file in Appearance ▸ Editor:

    function custom_check_for_active_tab_title() { ?>
    <script>
(function($){
	setTimeout(function(){
    if ($('#plugins .av-tab-section-tab-title-container').children('a[aria-controls^="av-tab-section"].av-active-tab-title').length === 0) {
    	$('#plugins .av-tab-section-inner-container').css({"display": "none"});
    }
	},300);
	 $('#plugins a[aria-controls^="av-tab-section"]').on('click', function() {
	 	setTimeout(function(){
	 	if ($('#plugins .av-tab-section-tab-title-container').children('a[aria-controls^="av-tab-section"].av-active-tab-title').length > 0) {
    	$('#plugins .av-tab-section-inner-container').css({"display": "block"});
    }	
	 	},300);
	 });
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_check_for_active_tab_title');

    You will note in the script I used the ID #plugins, this was the ID of the section I tested on, you can remove it, but I recommend changing it to an ID you will use for this section on your site so the script doesn’t affect other sections.
    You will also note that I had to use a setTimeout because the class is added after the DOM so we have wait a little bit. 300ms.

    Best regards,
    Mike

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.