We Keep Coding

Multiple dropmenu buttons - Open only clicked button

I found good split dropmenu button script.
Created multiple buttons, and problem is if I click one button then all dropmenus of other buttons open...
So what I want to accomplish is only to open dropmenu that i've clicked not all menus (10post per page so i have 10buttons) that are on page.
Guess I need some id recognition code in my .js.
my script:
$(function() {
var splitBtn = $(".x-split-button");
$("button.x-button-drop").on("click", function() {
if (!splitBtn.hasClass("open"))
splitBtn.addClass("open");
});
$(".x-split-button").click(function(event) {
event.stopPropagation();
});
$("html").on("click", function() {
if (splitBtn.hasClass("open"))
splitBtn.removeClass("open");
});
});
.x-split-button {
position: relative;
display: inline-block;
text-align: left;
margin-top: 20px;
}
.x-button {
position: relative;
margin: 0;
height: 30px;
float: left;
outline: none;
font-weight: 600;
line-height: 27px;
background: #F2F2F2;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 2px #E0E0E0;
}
.x-button:hover {
cursor: pointer;
background: #E0E0E0;
}
.x-button:active {
background: #D3D3D3;
}
.x-button.x-button-drop {
border-left: 0;
height: 30px;
}
.open > .x-button-drop-menu {
display: block;
}
.x-button-drop-menu {
position: absolute;
top: 27px;
right: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
background-color: #F2F2F2;
color: #000000;
background-clip: padding-box;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 2px #E0E0E0;
}
.x-button-drop-menu li a {
display: block;
padding: 3px 20px;
clear: both;
font-family: arial;
color: #000000;
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center><font color="green">1st forum post....text goes here....</font><br/>
<span class="x-split-button">
<button class="x-button x-button-main">Admin Options</button>
<button class="x-button x-button-drop">▼</button>
<ul class="x-button-drop-menu">
<li>
Edit
</li>
<li>
Delete
</li>
<li>
Move
</li>
</ul>
</span>
<br/><br/><br/><br/><br/><font color="green">2nd forum post....text goes here....</font><br/>
<span class="x-split-button">
<button class="x-button x-button-main">Admin Options</button>
<button class="x-button x-button-drop">▼</button>
<ul class="x-button-drop-menu">
<li>
Edit
</li>
<li>
Delete
</li>
<li>
Move
</li>
</ul>
</span>
</center>

jQuery $(this) is concerned about the element concerned in this function (Onclick). We use closest() to reach The parent container (.x-split-button) which is the targeted element in this case.
We can also use $(this).parent(".x-split-button").addClass("open");
In other situations, you could use $(this).parents(); when the container is not a direct parent.
$(function() {
var splitBtn = $(".x-split-button");
$("button.x-button-drop").on("click", function() {
if (!($(this).closest(".x-split-button").hasClass("open"))){
splitBtn.removeClass("open");
$(this).closest(".x-split-button").addClass("open");
}else{
$(this).closest(".x-split-button").removeClass("open");
}});
$(".x-split-button").click(function(event) {
event.stopPropagation();
});
$("body").on("click", function() {
if (splitBtn.hasClass("open"))
splitBtn.removeClass("open");
});
});
.x-split-button {
position: relative;
display: inline-block;
text-align: left;
margin-top: 20px;
}
.x-button {
position: relative;
margin: 0;
height: 30px;
float: left;
outline: none;
font-weight: 600;
line-height: 27px;
background: #F2F2F2;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 2px #E0E0E0;
}
.x-button:hover {
cursor: pointer;
background: #E0E0E0;
}
.x-button:active {
background: #D3D3D3;
}
.x-button.x-button-drop {
border-left: 0;
height: 30px;
}
.open > .x-button-drop-menu {
display: block;
}
.x-button-drop-menu {
position: absolute;
top: 27px;
right: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
background-color: #F2F2F2;
color: #000000;
background-clip: padding-box;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 2px #E0E0E0;
}
.x-button-drop-menu li a {
display: block;
padding: 3px 20px;
clear: both;
font-family: arial;
color: #000000;
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center><font color="green">1st forum post....text goes here....</font><br/>
<span class="x-split-button">
<button class="x-button x-button-main">Admin Options</button>
<button class="x-button x-button-drop">▼</button>
<ul class="x-button-drop-menu">
<li>
Edit
</li>
<li>
Delete
</li>
<li>
Move
</li>
</ul>
</span>
<br/><br/><br/><br/><br/><font color="green">2nd forum post....text goes here....</font><br/>
<span class="x-split-button">
<button class="x-button x-button-main">Admin Options</button>
<button class="x-button x-button-drop">▼</button>
<ul class="x-button-drop-menu">
<li>
Edit
</li>
<li>
Delete
</li>
<li>
Move
</li>
</ul>
</span>
</center>

Change style of li element on click

I have created a local navigation menu for my web site. It contains 2 li elements as shown on the picture Once you click on the item a black border should be displayed around the href and the name Item should be changed to white with black background.
$(document).ready(function() {
$("li").addClass("liNavA");
$("a").addClass("active");
});
div.figure {
background-color: black;
border-radius: 50%;
width: auto;
}
li.liNav {
list-style-type: none;
display: inline-block;
margin-top: 18px;
margin-left: 4px;
text-align: left;
border: solid 12px black;
border-radius: 24px;
background-color: black
}
li.liNavA {
list-style-type: none;
display: inline-block;
margin-top: 18px;
margin-left: 4px;
text-align: left;
border: solid 12px white;
border-radius: 24px;
color: white;
background-color: white;
}
a.active {
color: white;
text-decoration: none;
}
a.pasive {
color: black;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="localnavDiv">
<ul class="localNav">
<li class="liNav" id="exploreTitle"><a class="active" id="titleLi" id="exploreTitle">Explore</a></li>
<li class="liNavA"><a class="pasive" href="#">Who already joined</a></li>
<li class="liNav" ><a class="active" href="#">Why develop for us </a></li>
</ul>
</div>

<style type="text/css">
div.figure {
background-color: black;
border-radius: 50%;
width: auto;
}
li.liNav {
list-style-type: none;
display: inline-block;
margin-top: 18px;
margin-left: 4px;
text-align: left;
border: solid 2px black;
padding: 5px;
border-radius: 24px;
background-color: #FFFFFF
}
li.liNavA {
list-style-type: none;
display: inline-block;
margin-top: 18px;
margin-left: 4px;
text-align: left;
border: solid 2px white;
padding: 5px;
border-radius: 24px;
color: white;
background-color: #000000;
}
li.liNavA a {
color: white;
}
a.active {
text-decoration: none;
}
a.pasive {
text-decoration: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="localnavDiv">
<ul class="localNav">
<li class="liNav" id="exploreTitle"><a class="active" href="#">Explore</a></li>
<li class="liNav" id="liRight"><a class="pasive" href="#">Who already joined</a></li>
<li class="liNav" id="liLeft"><a class="active" href="#">Why develop for Hue</a></li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function() {
/**
* add event listner for every list-item
*/
$("#exploreTitle").click(function(){
$("#exploreTitle").attr('class', 'liNavA');
$("#liRight").attr('class', 'liNav');
$("#liLeft").attr('class', 'liNav');
})
$("#liRight").click(function(){
$("#liRight").attr('class', 'liNavA');
$("#exploreTitle").attr('class', 'liNav');
$("#liLeft").attr('class', 'liNav');
})
$("#liLeft").click(function(){
$("#liLeft").attr('class', 'liNavA');
$("#liRight").attr('class', 'liNav');
$("#exploreTitle").attr('class', 'liNav');
})
});
</script>

How can I change the provided jQuery to toggle menu correctly?

I have a hamburger menu icon displayed and want it to have a drop down menu, shown here:
<div id="nav-icon">
<div id="hamburger-nav"></div>
<ul id="nav-list">
<li><a id="about" href="#about">about</a></li>
<li><a id="work" href="#work">work</a></li>
<li><a id="contact" href="#contact">contact</a></li>
</ul>
</div>
This menu's display is set to "none". Below is my jQuery I am using to display the nav list. I want it to appear when clicked and disappear when clicked again (toggle). Why does this not work? What adjustments need to be made? jsfiddle here
$(document).ready(function() {
var n = $("#nav-list");
$("#nav-icon").click(function() {
if (n.css("display, none")) {
n.css("display, block");
} else {
n.css("display, none");
}
});
});

I would use :hidden to check if the menu is hidden/visible, then you need to separate the CSS in $.css() with quotes.
$(document).ready(function() {
var $n = $("#nav-list");
$("#nav-icon").click(function() {
if ($n.is(':hidden')) {
$n.css("display","block");
} else {
$n.css("display","none");
}
});
});
#nav-icon {
display: block;
padding: 1.3em;
position: absolute;
top: 1.6em;
right: .8em;
cursor: pointer;
}
#hamburger-nav,
#hamburger-nav::before,
#hamburger-nav::after {
content: "";
display: block;
width: 2.3em;
height: 3px;
background: #000;
}
#hamburger-nav::after {
transform: translateY(-.75em);
}
#hamburger-nav::before {
transform: translateY(.6em);
}
#nav-list {
display: none;
list-style: none;
position: absolute;
top: 4.2em;
left: -6em;
width: 12em;
height: 10em;
z-index: 5;
background: #fff;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
#nav-list li {
text-align: center;
position: relative;
right: 2.8em;
padding: .95em;
width: 12em;
font-weight: 600;
border-top: 1px solid #ccc;
}
#nav-list a {
color: #000;
text-decoration: none;
}
#top:hover {
border-bottom: 2px solid #0f0;
}
#middle:hover {
border-bottom: 2px solid #f00;
}
#botttom:hover {
border-bottom: 2px solid #00f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav-icon">
<div id="hamburger-nav"></div>
<ul id="nav-list">
<li><a id="top" href="#about">about</a></li>
<li><a id="middle" href="#work">work</a></li>
<li><a id="bottom" href="#contact">contact</a></li>
</ul>
</div>

The problem is with the typos you have in your code (https://codepen.io/anon/pen/rwyNqM):
$(document).ready(function() {
var n = $("#nav-list");
$("#nav-icon").click(function() {
// This is how we check the current display value.
if (n.css("display") === "none") {
// First parameter and second parameter should be in quotes.
n.css("display", "block");
} else {
n.css("display", "none");
}
});
});

Play with toggle class more easy and simply can apply some effect just by CSS. Check out this 2 option:
with pure javascript:
document.getElementById("nav-icon").onclick = function(){
this.classList.toggle('show-nav-list');
}
#nav-icon {
display: block;
padding: 1.3em;
position: absolute;
top: 1.6em;
right: .8em;
cursor: pointer;
}
#hamburger-nav,
#hamburger-nav::before,
#hamburger-nav::after {
content: "";
display: block;
width: 2.3em;
height: 3px;
background: #000;
}
#hamburger-nav::after {
transform: translateY(-.75em);
}
#hamburger-nav::before {
transform: translateY(.6em);
}
#nav-list {
display:none;
list-style: none;
position: absolute;
top: 4.2em;
left: -6em;
width: 12em;
height: 10em;
z-index: 5;
background: #fff;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
#nav-list li {
text-align: center;
position: relative;
right: 2.8em;
padding: .95em;
width: 12em;
font-weight: 600;
border-top: 1px solid #ccc;
}
#nav-list a {
color: #000;
text-decoration: none;
}
#top:hover {
border-bottom: 2px solid #0f0;
}
#middle:hover {
border-bottom: 2px solid #f00;
}
#botttom:hover {
border-bottom: 2px solid #00f;
}
.show-nav-list #nav-list {
display:block !important;
}
<div id="nav-icon">
<div id="hamburger-nav"></div>
<ul id="nav-list" >
<li><a id="top" href="#about">about</a></li>
<li><a id="middle" href="#work">work</a></li>
<li><a id="bottom" href="#contact">contact</a></li>
</ul>
</div>
or With Jquery:
$(function(){
$('#nav-icon').click(function(){
$("#nav-list").toggleClass("show-nav-list")
})
})
/* Check last line of this CSS, i add .show-nav-list class CSS*/
#nav-icon {
display: block;
padding: 1.3em;
position: absolute;
top: 1.6em;
right: .8em;
cursor: pointer;
}
#hamburger-nav,
#hamburger-nav::before,
#hamburger-nav::after {
content: "";
display: block;
width: 2.3em;
height: 3px;
background: #000;
}
#hamburger-nav::after {
transform: translateY(-.75em);
}
#hamburger-nav::before {
transform: translateY(.6em);
}
#nav-list {
display: none;
list-style: none;
position: absolute;
top: 4.2em;
left: -6em;
width: 12em;
height: 10em;
z-index: 5;
background: #fff;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
#nav-list li {
text-align: center;
position: relative;
right: 2.8em;
padding: .95em;
width: 12em;
font-weight: 600;
border-top: 1px solid #ccc;
}
#nav-list a {
color: #000;
text-decoration: none;
}
#top:hover {
border-bottom: 2px solid #0f0;
}
#middle:hover {
border-bottom: 2px solid #f00;
}
#botttom:hover {
border-bottom: 2px solid #00f;
}
.show-nav-list {
display:block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="nav-icon">
<div id="hamburger-nav"></div>
<ul id="nav-list">
<li><a id="top" href="#about">about</a></li>
<li><a id="middle" href="#work">work</a></li>
<li><a id="bottom" href="#contact">contact</a></li>
</ul>
</div>

Your code is good u have few syntax mistakes
$(document).ready(function() {
var n = $("#nav-list");
$("#nav-icon").click(function() {
if (n.css("display") == "none") {
n.css("display","block");
} else {
n.css("display","none");
}
/*
* n.slideToggle();
* n.toggle();
* n.fadeToggle();
*
*/
});
});
#nav-icon {
display: block;
padding: 1.3em;
position: absolute;
top: 1.6em;
right: .8em;
cursor: pointer;
}
#hamburger-nav,
#hamburger-nav::before,
#hamburger-nav::after {
content: "";
display: block;
width: 2.3em;
height: 3px;
background: #000;
}
#hamburger-nav::after {
transform: translateY(-.75em);
}
#hamburger-nav::before {
transform: translateY(.6em);
}
#nav-list {
display: none;
list-style: none;
position: absolute;
top: 4.2em;
left: -6em;
width: 12em;
height: 10em;
z-index: 5;
background: #fff;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
#nav-list li {
text-align: center;
position: relative;
right: 2.8em;
padding: .95em;
width: 12em;
font-weight: 600;
border-top: 1px solid #ccc;
}
#nav-list a {
color: #000;
text-decoration: none;
}
#top:hover {
border-bottom: 2px solid #0f0;
}
#middle:hover {
border-bottom: 2px solid #f00;
}
#botttom:hover {
border-bottom: 2px solid #00f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav-icon">
<div id="hamburger-nav"></div>
<ul id="nav-list">
<li><a id="top" href="#about">about</a></li>
<li><a id="middle" href="#work">work</a></li>
<li><a id="bottom" href="#contact">contact</a></li>
</ul>
</div>

align toggled div directly below parent

Having a little trouble trying to get a toggled div to align directly below the parent. It seems to appear to the right and slightly over the top of the parent.
This will be for use on an editor toolbar, the the text editor stackoverflow and various forums use.
Unsure on the best and simplest way to solve it.
$(document).on('click', ".editor-dropdown", function() {
$('.editor-dropdown-content', this).toggle(); // p00f
});
.editor-dropdown {
background: #ffffff;
border: 1px solid #ddd;
cursor: pointer;
float: left;
padding: 5px 14px;
}
.editor-dropdown-content {
display: none;
z-index: 900;
position: absolute;
background: #ffffff;
border: 1px solid #ddd;
padding: 5px 14px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="editor-dropdown">
Header
<b class="caret-down"></b>
<div class="editor-dropdown-content">
<span class="dropdown-option" data-tag="h1">H1</span> H2 H3 H4
</div>
</div>
Example: https://codepen.io/anon/pen/JNQZzM

Set the parent to position: relative then use top/left positioning to put the menu where you want it. If you want everything to align better, I would make the "header" text an element and apply the border/padding/etc to it and style the menu the same way set to left: 0; top: 100%; to left-align it and put it below "header"
$(document).on('click', ".editor-dropdown", function()
{
$('.editor-dropdown-content', this).toggle(); // p00f
});
.editor-dropdown {
float: left;
position: relative;
}
.dropdown-header {
background: #ffffff;
border: 1px solid #ddd;
cursor: pointer;
padding: 5px 14px;
display: inline-block;
}
.editor-dropdown-content {
display: none;
z-index: 900;
position: absolute;
background: #ffffff;
left: 0;
top: 100%;
border: 1px solid #ddd;
padding: 5px 14px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="editor-dropdown">
<span class="dropdown-header">Header</span>
<b class="caret-down"></b>
<div class="editor-dropdown-content">
<span class="dropdown-option" data-tag="h1">H1</span> H2 H3 H4
</div>
</div>

Please put "Header" text under span tag and give it a class like below:
<div class="editor-dropdown">
<span class="dropdoanHeader">Header</span>
<b class="caret-down"></b>
<div class="editor-dropdown-content">
<span class="dropdown-option" datatag="h1">H1</span>
H2
H3
H4
</div>
</div>
After that replace below css
.editor-dropdown
{
background: #ffffff;
border: 1px solid #ddd;
cursor: pointer;
float: left;
}
.dropdoanHeader
{
padding: 5px 14px;
}
.editor-dropdown-content
{
position:absolute;
padding-left:10px;
background: #ffffff;
border: 1px solid #ddd;
padding: 5px 14px;
}

I edited the CSS like below
.editor-dropdown-content
{
display: none;
z-index: 900;
position:relative;
background: #ffffff;
border: 1px solid #ddd;
padding: 5px 14px;
left: 60;
bottom: 100;
}
Was able to align it below header . Check the codepen below
https://codepen.io/anon/pen/xdoJKp

Is this what you are after?
$(document).on('click', ".editor-dropdown", function()
{
$('.editor-dropdown-content').toggle(); // p00f
});
.editor-dropdown
{
background: #ffffff;
border: 1px solid #ddd;
cursor: pointer;
padding: 5px 14px;
width: 200px;
}
.editor-dropdown-content
{
display: none;
background: #ffffff;
border: 1px solid #ddd;
padding: 5px 14px;
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="editor-dropdown">Header
<b class="caret-down"></b>
</div>
<div class="editor-dropdown-content">
<span class="dropdown-option" data-tag="h1">H1</span>
H2
H3
H4
</div>

You could try adding position: absolute; to the .editor-dropdown and then left: 0; to .editor-dropdown-content.
However, better is probably to take the .editor-dropdown-content out of the .editor-dropdown
https://codepen.io/anon/pen/dWBjpQ

Take a look at this one?
HTML:
<div class="editor-dropdown">
Header
<b class="caret-down"></b>
</div>
<div class="editor-dropdown-content">
<span class="dropdown-option" data-tag="h1">H1</span>
<span class="dropdown-option" data-tag="h1">H2</span>
<span class="dropdown-option" data-tag="h1">H3</span>
<span class="dropdown-option" data-tag="h1">H4</span>
</div>
Css:
.editor-dropdown
{
background: #ffffff;
border: 1px solid #ddd;
cursor: pointer;
padding: 5px 14px;
}
.editor-dropdown-content
{
display: none;
z-index: 900;
top: 40px;
background: #ffffff;
border: 1px solid #ddd;
padding: 5px 14px;
}
.dropdown-option {
display:block;
}
Javascript:
$(document).on('click', ".editor-dropdown", function()
{
$('.editor-dropdown-content').toggle(); // p00f
});
https://codepen.io/anon/pen/ZKdjLJ

How to set inner element border upon the outer one?

Here is my code:
.compare_header_box{
padding: 35px 30px;
direction: rtl;
}
.compare_header_box_title{
font-size: 30px;
width: 100px;
float: right;
margin-right: 5px;
margin-top: 4px;
}
.compare_header_box_items{
width: 100%;
border-bottom: 1px solid #ccc;
direction: ltr;
}
.compare_header_box_items a{
display: inline-block;
font-size: 16px;
padding: 15px 40px;
}
.compare_header_box_items a:hover{
text-decoration: none;
background-color: #f1f1f1;
color: black;
}
.compare_header_box_items .active{
border-top: 3px solid orange;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid white;
}
<div class="compare_header_box">
<span class="compare_header_box_title active">List</span>
<div class="compare_header_box_items">
gp
in
tw
<a class="active" href="./fb">fb</a>
</div>
</div>
As you see border-bottom: 1px solid white; doesn't seem to appear. I want to set it exactly upon the border-bottom: 1px solid #ccc;. How can I do that?

Make use of pseudo elements,
.compare_header_box_items .active {
position: relative;
border-top: 3px solid orange;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.compare_header_box_items .active:after {
content: '';
position: absolute;
width: 100%;
height: 1px;
background-color: #fff;
bottom: -1px;
left: 0;
}
I hope this is what you require
.compare_header_box {
padding: 35px 30px;
direction: rtl;
}
.compare_header_box_title {
font-size: 30px;
width: 100px;
float: right;
margin-right: 5px;
margin-top: 4px;
}
.compare_header_box_items {
width: 100%;
border-bottom: 1px solid #ccc;
direction: ltr;
}
.compare_header_box_items a {
display: inline-block;
font-size: 16px;
padding: 15px 40px;
}
.compare_header_box_items a:hover {
text-decoration: none;
background-color: #f1f1f1;
color: black;
}
.compare_header_box_items .active {
position: relative;
border-top: 3px solid orange;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.compare_header_box_items .active:after {
content: '';
position: absolute;
width: 100%;
height: 1px;
background-color: #fff;
bottom: -1px;
left: 0;
}
<div class="compare_header_box">
<span class="compare_header_box_title active">List</span>
<div class="compare_header_box_items">
gp
in
tw
<a class="active" href="./fb">fb</a>
</div>
</div>

Add margin-bottom: -1px to a tags in .compare_header_box_items div
Thus code will become:
.compare_header_box_items a {
display: inline-block;
font-size: 16px;
padding: 15px 40px;
margin: 0 0 -1px; /* add this line */
}
The reason your code not working is, main div border begin when inner links area ends which includes their borders too. Thus adding a 1 pixel negative margin will make them two borders overlap.

As a hot fix, just add: margin-bottom: -1px;
check below code snippet.
.compare_header_box{
padding: 35px 30px;
direction: rtl;
}
.compare_header_box_title{
font-size: 30px;
width: 100px;
float: right;
margin-right: 5px;
margin-top: 4px;
}
.compare_header_box_items{
width: 100%;
border-bottom: 1px solid #ccc;
direction: ltr;
}
.compare_header_box_items a{
display: inline-block;
font-size: 16px;
padding: 15px 40px;
}
.compare_header_box_items a:hover{
text-decoration: none;
background-color: #f1f1f1;
color: black;
}
.compare_header_box_items .active{
border-top: 3px solid orange;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #fff;
margin-bottom: -1px;
}
<div class="compare_header_box">
<span class="compare_header_box_title active">List</span>
<div class="compare_header_box_items">
gp
in
tw
<a class="active" href="./fb">fb</a>
</div>
</div>

Use box-shadow instead of border, which allows you to avoid shifting the positions of elements:
box-shadow: 0 1px white;
(Note that I have substituted red for emphasis in the snippet below.)
.compare_header_box {
padding: 35px 30px;
direction: rtl;
}
.compare_header_box_title {
font-size: 30px;
width: 100px;
float: right;
margin-right: 5px;
margin-top: 4px;
}
.compare_header_box_items {
width: 100%;
border-bottom: 1px solid #ccc;
direction: ltr;
}
.compare_header_box_items a {
display: inline-block;
font-size: 16px;
padding: 15px 40px;
}
.compare_header_box_items a:hover {
text-decoration: none;
background-color: #f1f1f1;
color: black;
}
.compare_header_box_items .active {
border-top: 3px solid orange;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
box-shadow: 0 1px red; /* white; */
}
<div class="compare_header_box">
<span class="compare_header_box_title active">List</span>
<div class="compare_header_box_items">
gp
in
tw
<a class="active" href="./fb">fb</a>
</div>
</div>

Hyy
Only this things is possible and your problem will solve...
.compare_header_box_items .active {
position: relative;
bottom: -1px;
}
Add this css and your problem will solve.
Thanks :)
Appreciate my answer.

The white border seems to appear bro. But the background is also white. Change the background and you will see the white background or as part of your code you can just hover over it and check the border. To the result part, there are so many answers above. This answer is only to say that the border is visible and element next to it appears.
Even SOF uses padding to fix it. If you remove, you will see border-bottom #CCC
background.