Vertical Tabs

Tabby responsive tabs was not designed to provide vertical tabs, however I think it should be possible to do this with some custom CSS.

I don’t currently have a custom stylesheet to provide this but I may look into this for to a future version of the plugin or as part of an add-on if I ever had a specific requirement for this in one of my own projects or if someone commissioned the work.

I made accordion menu because i couldn’t make unlimited characters within each tab without it making two rows of tabs…

Maybe you might like this CSS design. I am back because when the page loads it loads with all tabs closed and would like it to open on tab one when page loads.

.responsive-tabs .responsive-tabs__heading {
display: none;
}

.responsive-tabs .responsive-tabs__list__item {
display: inline;
cursor:pointer;
}

.responsive-tabs-wrapper {
clear: both;
margin-bottom: 20px;
zoom: 1;
width: 550px;
position: relative;
margin-left: auto;
margin-right: auto;
display: block;
padding-top: 115px;
}

.responsive-tabs-wrapper:before,
.responsive-tabs-wrapper:after {
content: “”;
display: table;
}
.responsive-tabs-wrapper:after {
clear: both;
}

.responsive-tabs .responsive-tabs__heading:focus,
.responsive-tabs .responsive-tabs__list__item:focus {
outline: 1px solid transparent;
}

.responsive-tabs .responsive-tabs__heading–active:focus,
.responsive-tabs .responsive-tabs__list__item–active:focus {
outline: none;
}

.responsive-tabs .responsive-tabs__list {
font-size: 18px;
line-height: 18px;
margin: 20px 0 10px 0;
padding-bottom:0;
}

.responsive-tabs .responsive-tabs__list__item {
border: 1px solid transparent;
border-bottom: none;
line-height: 1;
margin: 0 14px 0 0;
padding: 10px 20px;
}

.responsive-tabs .responsive-tabs__list__item:hover {
color: #222;
}

.responsive-tabs .responsive-tabs__list__item–active,
.responsive-tabs .responsive-tabs__list__item–active:hover {
background: #fff;
border-color: #ddd;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: #606060;
}

.responsive-tabs .responsive-tabs__panel–closed-accordion-only {
display: block;
}

/* — ACCORDION — */

.responsive-tabs .responsive-tabs__list {
display: none;
}

.responsive-tabs .responsive-tabs__panel–closed-accordion-only {
display: none;
}

.responsive-tabs .responsive-tabs__heading {
position: relative;
display: block;
cursor: pointer;
margin: 0;
padding: 10px 0 10px 20px;
background: rgba(0,0,0,.6);
border: 1px solid rgba(0,0,0,.6);
border-radius: 5px;
font-family: ‘Pieces of Eight’;
font-size: 22px;
font-weight: normal;
color: rgba(255,255,255,1);
text-shadow: 2px 2px 2px rgba(0,0,0,1);
text-align: center;
}

.responsive-tabs .responsive-tabs__heading:after {
content:””;
display: block;
position: absolute;
right: 20px;
top: 20px;
height: 0;
width: 0;
}

.responsive-tabs .responsive-tabs__heading:hover {
background: rgba(0,0,0,.3);
color: red;
}

.responsive-tabs .responsive-tabs__heading–active {
background: rgba(0,0,0,.3);
border-radius: 5px 5px 0px 0px;
border-bottom:none;
color: red;
}

.responsive-tabs .responsive-tabs__heading–active:hover {
background: rgba(0,0,0,.3);
color: red;
}

.responsive-tabs .responsive-tabs__heading–active:after {
border-top: 0;
top: 18px;
}

.responsive-tabs .responsive-tabs__panel {
height: 350px;
padding: 10px 0px 0px 0px;
background: rgba(0,0,0,.3);
border: 1px solid rgba(0,0,0,.6);
border-radius:0px 0px 5px 5px;
border-top: none;
overflow: hidden;
}

Found the solution to my problem… Changed “display: none;” to “display: block;” and the first tab in accordion mode is opened by default. Example…

.responsive-tabs .responsive-tabs__panel–closed-accordion-only {
display: block;
}

All’s good in my hood with Tabby. ??

Hi-
I’m having a similar issue so I thought you might be able to help…
I have a tab container which is I used the custom setting from the examples in wordpress https://www.artbeyondsight.org/dic/wp-admin/admin.php?page=shortcodes-ultimate-examples but the colors are now right- but how would i change the code to make the tabs vertical instead of horizontal?
I tried it by adding in some suggestions here but it didn’t do anything to the tabs

[su_tabs class=”my-custom-tabs”][su_tabs vertical=”yes”]
<style>
.responsive-tabs .responsive-tabs__panel–closed-accordion-only {display: block;}
.su-tabs.my-custom-tabs { background-color: #9999FF}
.su-tabs.my-custom-tabs .su-tabs-nav span { font-size: 1.3em }
.su-tabs.my-custom-tabs .su-tabs-nav span.su-tabs-current { background-color: #CCCCFF }
.su-tabs.my-custom-tabs .su-tabs-pane {
padding: 1em;
font-size: 1.3em;
background-color: #CCCCFF;
}
</style>

What else should I do differently?

ski4life, this is a resolved topic in the Tabby responsive tabs forum. It does not relate to your issue as you are not using Tabby Responsive Tabs.

For assistance with your specific issue you should post your question as a new topic in the relevant forum for the plugin you are using.

Wish to have it vertical too …