Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 4, 2018 at 6:26 pm #1005721
    ideance

    Hello,

    We are using the tabs feature and need a close button for each of the tabs (as the content can get pretty long on some pages). So we created a button that we added on top of the tabs that links to the page itselfs (refreshing the entire content on the page and closing the tabs). Each of the tabs has also a custom id. We would need a more elegant solution to achieve that (ajax based function) to close all / any of the tabs. This close button would be useful especially for the mobile users.

    Here’s the button code we’re using at the moment:
    [av_button label='Close' link='manually,http://www.domainname.com/' link_target='' size='small' position='left' label_display='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' av_uid='av-raoc' admin_preview_bg='']

    Thanks!

    • This topic was modified 6 years, 2 months ago by ideance.
    September 5, 2018 at 3:30 am #1005850
    Ismael

    Hey ideance,

    Thank you for using Enfold.

    Add this script in the functions.php file.

    add_action('wp_footer', 'ava_custom_script_close_tab');
function ava_custom_script_close_tab(){
	?>
	<script type="text/javascript">
		(function($) {	
            function removeHash () { 
                history.pushState("", document.title, window.location.pathname + window.location.search);
            }

            $('.tabcontainer .avia-button').on('click', function(e) {
                e.preventDefault();

                var section = $(this).parents('.av_tab_section');
                var title = section.parents('.tabcontainer').find('.tab_titles');
                var fake = section.find('.tab');
                var tab = $(this).parents('.tab_content');

                fake.removeClass('active_tab');
                title.find('div[data-fake-id="'+ fake.data("fake-id") + '"]').removeClass('active_tab');
                tab.removeClass('active_tab_content');

                removeHash();
            });
		})(jQuery);
	</script>
	<?php
}

    That script will close the active tab section when you click the button.

    Best regards,
    Ismael

    September 5, 2018 at 8:41 am #1005908
    ideance

    Great job, works like a charm.
    Thanks again guys! You rock!

    September 5, 2018 at 9:19 am #1005932
    Rikard

    Hi,

    Great, glad we could help :-)

    Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    September 5, 2018 at 9:39 am #1005939
    ideance

    Please close the topic, that was all I needed. Thanks again!

    September 5, 2018 at 10:35 am #1005974
    Ismael

    Hi,

    Awesome! Glad we could help!

    Please take a moment to review our theme and show your support https://themeforest.net/downloads
    Don’t forget to bookmark Enfold Documentation for future reference.

    Thank you for using Enfold :)

    Best regards,
    Ismael

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Close button for the tabs’ is closed to new replies.