Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Scroll to tab item

  • Hi there,

    I have created tabs with GB and I would like to know if it’s possible that when a tab button is clicked, it scroll to the tab item. I thought to add an anchor on the tab item and link it on the tab button, but it’s not possible to add a link on a tab button.

    For a real example, in private information, I’ve added a website link where I want to do that. The visitor scroll and see the button “Loiret”, “Yvelines”, “Paris”, if he clicks on a tab button and if the tab item is not in his view, then he should have a scroll to the tab item.

    Thank’s!

  • Hi there,

    Not sure I saw any scroll when I clicked the tab buttons on the example site, this is what I see:
    https://app.screencast.com/uAdcrxTPEYBQi

    Let me know if I miss anything!

  • Sorry my explanation must the confusing. Right now there’s no scroll, but I want to have a scroll to the tab item when a button tab is clicked.

  • I see, in this case, try this:

    1. select container as the tab button type.
    https://app.screencast.com/NXlH4NR1eVIKO

    2. add container anchor link to the tab button container:
    https://app.screencast.com/9ozna2Lqohuc0

    3. add the HTML anchor to the tab items container:
    https://app.screencast.com/mIvLrs9iXtWXo

    To have smooth-scroll for the tab buttons, try adding this PHP code and enable GP’s smooth scroll at cusotmizer > general.

    add_filter( 'generate_smooth_scroll_elements', function( $elements ) {
      $elements[] = 'a[href*="#"]';
      
      return $elements;
    } );

    Adding PHP: https://docs.generatepress.com/article/adding-php/

    Let me know if this helps!

  • Weirdly, when I try to set the tab button type as container, all the content of the page disappear.

    See, some screenshots:

    Before setting the tab button type as container

    After setting the tab button type as container

    If you want to see by yourself, I let you an access to the site in the private information.

    (Since WP 6.5 has just been released, I thought that it was maybe the problem, so I tested on 6.4. But same problem)

  • Your tab block is corrupted as you modified its deafualt layout, so it’s not possible for it to convert the button to container anymore.

    You need to move the containers around and replicate the default tabs block layout, means the tab buttons container must be the direct child of the tabs block.

    Then you can convert button to container, after the converting is finished feel free to drag the tab buttons container back into the colonne 2container.

  • Got it!

    It works well, however:

    Since buttons are not semantically buttons (just divs), it’s less accessible. Is there any way, to have the same “functionality” but without losing accessibility?

    By converting buttons to containers, it breaks the button styling. (before and after). Is there any way to keep the styling?

    Thanks!

  • Hi there,

    Accessibility is ok. As we add the role="button" to the DIV.
    You can see it in the HTML eg.

    <div class="gb-container gb-container-33fcb3ed gb-container-23f87dcb gb-tabs__button" role="button" tabindex="0" aria-controls="yvelines" aria-expanded="false">

    So browsers and a11y functions will recognise and treat it as a button.

    For the style issue, re-add the missing styles to the block

  • Good to know for accessibility!

    For the style issue, since I used a global style button, it didn’t work with the container, but I manually added all the styling, and now it’s all good!

    Thanks for your help Ying and David!

  • Glad to hear that!

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