Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • February 6, 2019 at 5:21 pm #1063704
    ngavy

    Hello. there.

    I have struggled with tabs and. finally, I found tab section which is great to display my idea to my homepage.
    it has been almost done but need a little help.
    since it is the main page, we need to make short and simple. but someone needs to see more information, then he/she will make a click.
    but before that action has occurred, we want the tab section’s content in the main page needs to be hidden until somebody make a click.
    Please let me know what to do. and thanks

    February 7, 2019 at 9:49 am #1063956
    Nikko

    Hey ngavy,

    Edit your tab section then in For Developers: Section ID set to mytab
    Go to Enfold > General Styling > Quick CSS, then add this css code:

    #mytab .av-tab-section-inner-container {
    display: none;
}

    In your functions.php file, add this code:

    function toggleTS(){
?>
<script>
	jQuery(document).ready(function() {
		let ctr = 0;
		jQuery('#mytab').find('.av-section-tab-title').on('click', function() {
			if( ctr > 0) {
				jQuery('#mytab .av-tab-section-inner-container').show();
			}
			ctr++;
		});
	});
</script>
<?php
}
add_action('wp_footer', 'toggleTS');

    Hope it helps.

    Best regards,
    Nikko

    February 7, 2019 at 10:53 am #1064004
    ngavy

    Hello. Nikko. I did what you said to me. but nothing happened. could you check any wrong on my site?
    please.

    February 7, 2019 at 10:57 am #1064009
    ngavy

    Edit your tab section then in For Developers: Section ID set to mytab

    what does this mean?

    February 7, 2019 at 11:08 am #1064015
    Nikko

    Hi ngavy,

    When you edit the Tab Section you should see this option/field For Developers: Section ID, I added mytab
    I have then cleared cache in Autoptimize and it’s working fine now.

    Best regards,
    Nikko

    February 7, 2019 at 12:30 pm #1064064
    ngavy

    Great!
    I need to ask you one more thing.

    how can I resize the letter size?
    for the desktop is ok. but when it goes to mobile view is too big title letter?

    could you help me change mobile view size?

    February 7, 2019 at 12:36 pm #1064070
    Nikko

    Hi ngavy,

    Are you referring on the Tab Section Titles?

    Best regards,
    Nikko

    February 8, 2019 at 5:32 am #1064407
    ngavy

    Hi. Nikko.
    not tab section titles. but the titles of posts in the magazine section. could you tell me how to change size?
    thanks.

    February 8, 2019 at 4:50 pm #1064644
    Nikko

    Hi ngavy,

    I see, there’s no option to do that but it can be done by going to Enfold > General Styling > Quick CSS, and add this css code:

    @media only screen and (max-width:767px) {
  #top #wrap_all #main h3.av-magazine-title.entry-title {
    font-size: 18px;
  }
}

    this only affects mobile devices.

    Best regards,
    Nikko

    February 11, 2019 at 6:53 am #1065311
    ngavy

    Perfect !!!
    Thanks Nikko!!!

    February 11, 2019 at 10:55 am #1065376
    Nikko

    Hi ngavy,

    Glad that we are able to help you :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘tab section's content in main page need to be hidden until somebody make a click’ is closed to new replies.