Close Tab Not Visible

  • Resolved mwarbinek

    (@mwarbinek)


    7 years, 6 months ago

    There are 2 issues with Tabbies.

    1. Close tab is hard to see and it is empty, leaving visitors to wonder what it is for, if they see it. Normally, as people expect is an “X” to close something.

    2. Accordion version of the close tab opens showing an empty container. There should be no reason for this and takes away from the design and layout of the page.

    I fixed these issues with Custom CSS. It would be better if the plugin is changed to fix these issues instead of us having to add more CSS.

    Anyway, here are my fixes for others who wish to achieve the same fix. This would be adding Custom CSS via Theme/WordPress customization panel.

    — Issue 1 —

    
li[id$='-tab1']:before {
content: "X";
font-family: sans-serif;
color: #C0C0C0;
background-color: transparent;
}
li[id$='-tab1'] {
border-width: 1px !important;
border-style: dashed !important;
}

    You can omit the CSS line giving the tab a dashed line. I did that to make it more distinctive. I want my visitors on my Tourism site to know quickly where to find things (close tab) and not second-guess it. This because a lot of visitors are one time only, not repeats, so the first success is the best success.

    — Issue 2 —

    @media screen and (max-width: 767px) {
[id$='-panel1'] {
display: none !important;
}
}

    This one addresses the mobile screen, where the empty accordion panel occurs from tapping the (first) close tab/accordion. I believe the width of 767px is the break point, after that size it reverts back to regular tabs.

    We cannot place any content into this close tab/accordion panel, so by default of the plugin, it creates an empty panel that will open when the close tab/accordion is tapped.

    The custom CSS will stop the empty panel from showing when the close tab/accordion is tapped. It still closes the other panels if they are open, so now it functions properly without the extra panel display.

    Hope this helps.

    • This topic was modified 7 years, 6 months ago by mwarbinek. Reason: added content for clairity
Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author cubecolour

    (@numeeja)

    Thre is no close tab element when the tabs are shown as tabs as one tab will always be open so tab’s content closes when another tab is selected.

    Similarly for the accordion, only one content section can be shown, but the open content can be closed by clicking the CSS-generated arrowhead icon, the direction of which indicates whether it will open or close the content.

    If you are getting an empty accordion panel, that is not what I’d expect to see unless the content section after the first tab has been deliberately left empty.

    Thread Starter mwarbinek

    (@mwarbinek)

    Thanks for the reply.

    Ok, I see that I could have added title=”” to the first tab and content right after it. Did not expect that (sorry). I thought [tabby] was the start of the shortcode only, since that was my past experiences with other tab shortcodes.

    For what I want to use it as, content in the first tab was not ideal since there will be a lot of content in the subsequent tabs which I wanted hidden until clicked. Hence the first tab became a “close tab”, and needed it to be that, closing content (panels) of the other tabs.

    This would also explain the first accordion panel, since no content was there, it would open as an empty panel, so I hid it. So yes, the first tab was intentionally left empty for reasons above.

    So, what this comes to now, is the Custom CSS is used to change the default appearance of the tabs, where I do not need to always change [tabby] (first tab) to [tabby title=””]. The custom CSS allows me to do less work.

    For a few tabs, the default style works fine if left unchanged, but when many tabs exist, then I feel the default style does not work as well.

    Here is an example of many tabs with default styling, with too many tabs the overall appearance can look cluttered,

    Tabby Default Style-Many Tabs

    With a Custom CSS change in the default styling, many tabs will look like this,

    First Tabby With Title and Content, and with Custom CSS.

    Changing the direction on the first tab, No title and no content, just the “X” as a closing tab, example here,

    First Tabby No Title and No Content, but with Custom CSS inserting “X” into the First Tab.

    I am not trying to get you to change the styling, I am just showing an alternate style to it.

    • This reply was modified 7 years, 6 months ago by mwarbinek. Reason: changed links
    • This reply was modified 7 years, 6 months ago by mwarbinek.
    • This reply was modified 7 years, 6 months ago by mwarbinek.
    Plugin Author cubecolour

    (@numeeja)

    When the plugin was created it was intended for a single row of tabs which look like tabs rather than as buttons. If the tabs are displayed as several rows of buttons it lessens the need for the tabs to then display as an accordion below a specific breakpoint.

    I have built a very lightweight tabs plugin for a client project which displays the tabs as rows of buttons. This was used on an ‘a-to-z’ index where there was a tab for each letter. I could further develop that into a more polished version with documentation for release a version as a tabby plugin.

    Thread Starter mwarbinek

    (@mwarbinek)

    Did not expect you to reply so fast. I changed the links above to flickr which is far better than photobucket and a lot less Ads.

    In my post just above I changed the links to show a better overall comparison view between styling versions.

    Anyway, yes, this can be developed to be more. For short amount of tabs it works fine, yet how will the plugin be generally used? Will more people include more tabs in it like I did?

    Of course, there is really not an unlimited thing to this when it comes to overall appearance and usability, no matter the CSS styling, too many tabs/accordions can end up as bad as a huge content page.

    In the end, I present styling options. The plugin is good, I hope you continue with it whether or not you build more into it.

    Thanks for the replies. ??

    • This reply was modified 7 years, 6 months ago by mwarbinek. Reason: changed some words
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Close Tab Not Visible’ is closed to new replies.