Show tab name only when that tab is selected (Form Tabs Widget)

  • Profile Image
    swbrodie
    Asked on February 07, 2021 at 06:58 AM

    Hello,

    I have created a form with multiple tabs. I need to show only the name of the tab that is selected and page numbers for other tabs when it's not selected. When another page is selected it should show that tab name and the numbers for the other pages.

    Something like this would be ideal (I have named only one tab in this instance to demonstrate the use-case)

    Thank you in advance.

    Screenshot
  • Profile Image
    jonathan
    Answered on February 07, 2021 at 07:12 AM

    Hi,

    I think this is possible using custom injected CSS codes. Please allow me some more time to research and figure out a workaround. I will update you here as soon as I can.

  • Profile Image
    swbrodie
    Answered on February 07, 2021 at 08:17 AM


  • Profile Image
    roneet
    Answered on February 07, 2021 at 09:54 AM

    Let me convey your message to my colleague. He will connect with you as soon as he is online.

    Thanks.

  • Profile Image
    swbrodie
    Answered on February 08, 2021 at 09:21 AM

    Any update on this?

  • Profile Image
    ashwin_d
    Answered on February 08, 2021 at 09:59 AM

    I am sorry for the trouble caused to you. I did try to quickly come up with custom CSS code for your requirement, but I was not successful.

    Unfortunately my colleague @jonathan is not available online. I am sending a note to my colleague, and he will get back to you as soon as he is back online.

  • Profile Image
    swbrodie
    Answered on February 09, 2021 at 08:45 AM

    Is there any update on this?

  • Profile Image
    jonathan
    Answered on February 09, 2021 at 08:58 AM

    I apologize for the delays. Unfortunately I also could not come up with the resolution yet using injected CSS codes.

    1612878797_602293cdaabf3_zzz 2021-02-09

    I am afraid it is not possible to interchange the tab number with the tab text/name using injected CSS only on the form. At most it may require using the form full source code and use a separate jquery scripts injected for the functionality.

    I will still try seek assistance from my colleagues if they have idea using injected CSS codes only.

    I will let you know here how it goes.

  • Profile Image
    jonathan
    Answered on February 09, 2021 at 06:26 PM

    Update:

    We're able to come up with the resolution using injected CSS codes. Please try the following in your form.

    ul#tabs-list > li{
        text-align:left !important;
    }
    ul#tabs-list > li:before {
        counter-increment: section;
        content: counter(section);
    }
    ul#tabs-list {
        counter-reset: section;
    }
    .liContent {
        visibility: hidden;
        width: auto !important;
        font-size: 1px;
    }
    .current .liContent {
        visibility: visible;
        font-size: 14px;
    }


    It should work like this

    2880489.gif


    Let us know if you need further assistance.


  • Profile Image
    swbrodie
    Answered on February 12, 2021 at 12:37 PM

    Hi Jonathan,

    Thank you so much for this. Your support has been wonderful. This works perfectly!

    Cheers,

    SW


  • Profile Image
    jonathan
    Answered on February 12, 2021 at 03:02 PM

    You're quite welcome. :~) Contact us anytime should you need assistance again.

    Best