Viewing 1 replies (of 1 total)
  • Plugin Author cubecolour

    (@numeeja)

    this is a responsive plugin. The tabs will display as tabs when the browser is wider than the value set as the responsive breakpoint in the media queries of the plugin’s stylesheet. They will display in the horizontal ‘accordion’ configuration on browsers with a narrow viewport width.

    You can force it to display like that all the time (somewhat defeating the object of the plugin) if you follow the instruction in the plugin’s faq to unhook the plugin’s stylesheet & add the tweaked version of the css below to your child theme if you’re using one or include it via a custom css plugin

    .responsive-tabs-wrapper .responsive-tabs__heading { display: none; }
    .responsive-tabs-wrapper .responsive-tabs__list__item { display: inline; cursor:pointer; }
    
    .responsive-tabs-wrapper .responsive-tabs__list { display: none; }
    .responsive-tabs-wrapper .responsive-tabs__heading { display: block; cursor: pointer; }
    .responsive-tabs-wrapper .responsive-tabs__panel--closed-accordion-only { display: none; }
    
    .responsive-tabs-wrapper {
    	clear: both;
    	margin-bottom: 20px;
    	zoom: 1;
    }
    .responsive-tabs-wrapper:before,
    .responsive-tabs-wrapper:after {
        content: "";
        display: table;
    }
    .responsive-tabs-wrapper:after {
        clear: both;
    }
    .responsive-tabs-wrapper {
    	border-top: 1px solid #ddd;
    }
    
    .responsive-tabs-wrapper .responsive-tabs__heading {
    	background: #fff;
    	color: #909090;
    	padding: 10px 0 10px 20px;
    	border: 1px solid #ddd;
    	border-top: none;
    	font-size: 18px;
    	margin: 0;
    	position: relative;
    }
    
    .responsive-tabs-wrapper .responsive-tabs__heading:after {
    	content:"";
    	display: block;
    	position: absolute;
    	right: 20px;
    	top: 20px;
    	width: 0;
    	height: 0;
    	border-left: 6px solid transparent;
    	border-right: 6px solid transparent;
    	border-top: 6px solid #444;
    }
    
    .responsive-tabs-wrapper .responsive-tabs__heading:hover {
    color: #606060;
    }
    
    .responsive-tabs-wrapper .responsive-tabs__heading--active,
    .responsive-tabs-wrapper .responsive-tabs__heading--active:hover {
    	background: #e3e3e3;
    	color: #606060;
    }
    
    .responsive-tabs-wrapper .responsive-tabs__heading--active:after {
    	border-bottom: 6px solid #404040;
    	border-top: 0;
    	top: 18px;
    }
    
    .responsive-tabs-wrapper .responsive-tabs__panel {
    	border-top: none;
    	margin: 0;
    }

Viewing 1 replies (of 1 total)

The topic ‘Horizontal Tabs’ is closed to new replies.