Define adaptable border line in CSS

Question

I'm using JavaScript to create tabs with changing content inside.

I would like the tabs content to have border, but the "active" tab (the tab the user currently reading/using) will not have border line, like this:

The problem is I can't get the top border to stay in the content section, instead it goes above the tabs as you can see in this codepen (The border colored in red).

I'm using this CSS code to put the border:

.toggle .panels .panel:after{
  content:'';
  width:34.3%;
  height:4px;
  background:gray;
  position: absolute;
  top:-1px;
}

Another problem is that I don't know how to adjust the border to skip the active tab, meaning, once the user switch tabs, the border disappear from the active tab (like in the image above), but all the other tabs will have border under them.

How can I adjust the border to skip the active tabs and fix its location on screen?

Answer 1

There you go its not a perfect solution but a hack

Replace below styles with the current one

.toggle .tabs .tab.active {
        color: #dd4b39;
        background: white;
        border-right: 1px solid black;
        border-top: 1px solid black;
        border-left: 1px solid black;
        z-index: 11;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
        overflow: hidden;
    }
    .panels {
        border-top: 1px solid #000;
        margin-top: -2px;
    }

SNIPPET

 (function() { $(function() { var toggle; return toggle = new Toggle('.toggle'); }); this.Toggle = (function() { Toggle.prototype.el = null; Toggle.prototype.tabs = null; Toggle.prototype.panels = null; function Toggle(toggleClass) { this.el = $(toggleClass); this.tabs = this.el.find(".tab"); this.panels = this.el.find(".panel"); this.bind(); } Toggle.prototype.show = function(index) { var activePanel, activeTab; this.tabs.removeClass('active'); activeTab = this.tabs.get(index); $(activeTab).addClass('active'); this.panels.hide(); activePanel = this.panels.get(index); return $(activePanel).show(); }; Toggle.prototype.bind = function() { var _this = this; return this.tabs.unbind('click').bind('click', function(e) { return _this.show($(e.currentTarget).index()); }); }; return Toggle; })(); }).call(this);

 @import url(https://fonts.googleapis.com/css?family=Raleway:100,400,700); /*Tabs animation*/ .toggle { margin: 0 auto; width: 100%; font-family: "Raleway"; direction: rtl; } .toggle .tabs { position: absolute; margin-top: -32px; overflow: hidden; line-height: 36px; } .toggle .tabs .tab:hover { background: #e6e6e6; } .toggle .tabs .tab { float: right; background: #a3a3a3; color: #444; height: 31px; cursor: pointer; border-right: 1px solid black; border-top: 1px solid black; border-left: 1px solid black; } .toggle .tabs .tab.active { color: #dd4b39; background: white; border-right: 2px solid black; border-top: 2px solid black; border-left: 2px solid black; z-index: 11; border-bottom: 2px solid #fff; margin-bottom: -2px; overflow: hidden; } .toggle .panels .panel { background: white; padding: 20px 10px; display: none; border-right: 1px solid black; border-bottom: 1px solid black; border-left: 1px solid black; } .panels { border-top: 2px solid #000; margin-top: -2px; } .toggle .panels .panel:first-child { display: block; } .toggle .tabs .tab.active { color: #dd4b39; background: white; border-right: 1px solid black; border-top: 1px solid black; border-left: 1px solid black; z-index: 11; border-bottom: 2px solid transparent; margin-bottom: -1px; overflow: hidden; } .panels { border-top: 1px solid #000; margin-top: -2px; }

 <br/> <br/> <br/> <br/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <div class='toggle'> <div class='tabs'> <div class='tab active' style="padding-right: 20px; padding-left: 20px;">אא</div> <div class='tab' style="padding-right: 20px; padding-left: 20px;">בבב</div> <div class='tab' style="padding-right: 20px; padding-left: 20px;">גגגג</div> <div class='tab' style="padding-right: 20px; padding-left: 20px;">דדדדד</div> </div> <div class='panels'> <div class='panel'>פאנל 1</div> <div class='panel'>פאנל 2</div> <div class='panel'>פאנל 3</div> <div class='panel'>פאנל 4</div> </div> </div>

Answer 2

Check if below snippet meets your need:

Just modified your code from codepen..

 (function() { $(function() { var toggle; return toggle = new Toggle('.toggle'); }); this.Toggle = (function() { Toggle.prototype.el = null; Toggle.prototype.tabs = null; Toggle.prototype.panels = null; function Toggle(toggleClass) { this.el = $(toggleClass); this.tabs = this.el.find(".tab"); this.panels = this.el.find(".panel"); this.bind(); } Toggle.prototype.show = function(index) { var activePanel, activeTab; this.tabs.removeClass('active'); activeTab = this.tabs.get(index); $(activeTab).addClass('active'); this.panels.hide(); activePanel = this.panels.get(index); return $(activePanel).show(); }; Toggle.prototype.bind = function() { var _this = this; return this.tabs.unbind('click').bind('click', function(e) { return _this.show($(e.currentTarget).index()); }); }; return Toggle; })(); }).call(this);

 @import url(https://fonts.googleapis.com/css?family=Raleway:100,400,700); /*Tabs animation*/ .toggle { margin: 0 auto; width: 50%; font-family: "Raleway"; direction: rtl; } .toggle .tabs { position: absolute; margin-top: -32px; overflow: hidden; line-height: 36px; } .toggle .tabs .tab:hover { background: #e6e6e6; } .toggle .tabs .tab { float: right; background: #a3a3a3; color: #444; height: 31px; cursor: pointer; border: 1px solid black; /* Added this line */ } .toggle .tabs .tab.active { z-index: 2; color: #dd4b39; background: white; height: 32px; /* Added this line */ border-bottom: 0; } .toggle .panels .panel { background: white; padding: 20px 10px; display: none; border: 1px solid black; /* Added this line */ z-index: 0; } .toggle .panels:after{ z-index: 0; content:''; width:50%; height:1px; background: black; position: absolute; top:-1px; } .toggle .panels .panel:first-child { display: block; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <br/> <br/> <div class='toggle'> <div class='tabs'> <div class='tab active' style="padding-right: 20px; padding-left: 20px;">אא</div> <div class='tab' style="padding-right: 20px; padding-left: 20px;">בבב</div> <div class='tab' style="padding-right: 20px; padding-left: 20px;">גגגג</div> <div class='tab' style="padding-right: 20px; padding-left: 20px;">דדדדד</div> </div> <div class='panels'> <div class='panel'>פאנל 1</div> <div class='panel'>פאנל 2</div> <div class='panel'>פאנל 3</div> <div class='panel'>פאנל 4</div> </div> </div>

Answer 3

For the second problem, I have edited the CSS as:

.toggle .tabs .tab {
  float: right;
  background: #a3a3a3;
  color: #444;
  height: 31px;
  cursor: pointer;
  border-bottom:2px solid black;
}
.toggle .tabs .tab.active {
  color: #dd4b39;
  background: white;
  border-right: 2px solid black;
  border-top: 2px solid black;
  border-left: 2px solid black;
  border-bottom:none;
}

Answer 4

I think you need it

.toggle .tabs .tab.active{
    border-bottom: 2px solid red;
}