I have created a panel for my WordPress site.
I want to change the color of the border whenever my panel is opened to make it look nicer.
For this, I have used the following code, but it did not help:
.MyPanel ul:active {
border: 2px solid #ff000059 !important;
}
or
.MyPanel ul:focus-visible {
border: 2px solid #ff000059 !important;
}
By clicking on the panel and opening it, the border will appear only when you click and then it will be hidden. And also it shows and hides border panel content by clicking which I don’t want.
The full code of the professional panel for WordPress:
$('.body_panel').find('li').click(function () {
if ($(this).parent().find("ul").eq(0).is(':visible')) {
$(this).children('.icon-title-left_panel').show();
$(this).children('.icon-title-down_panel').hide();
} else {
$(this).children('.icon-title-left_panel').hide();
$(this).children('.icon-title-down_panel').show();
}
});
$('.MyPanel').find('li').click(function (evt) {
evt.stopPropagation();
$(this).children('ul').slideToggle();
});
.MyPanel {
max-width: 1200px;
width: 85%;
display: block;
margin: 2rem auto 1rem;
padding: 6px;
text-align: right;
direction: ltr;
overflow: hidden;
}
.MyPanel ul {
border: 2px solid #f3f3f359;
box-shadow: 0 0 2px #000, inset 0 0 200px #f3f3f375;
padding: 20px 25px 55px;
list-style: none;
border-radius: 20px;
margin-bottom: 2rem;
}
.MyPanel ul:active {
border: 2px solid #ff000059 !important;
}
.MyPanel ul:focus-visible {
border: 2px solid #ff000059 !important;
}
.MyPanel ul ul li {
padding-top: 50px;
}
.MyPanel ul li {
cursor: pointer;
position: relative;
font-family: 'byekan';
font-size: 25px;
}
.MyPanel ul li h3 {
position: absolute;
top: -25px;
right: 0;
width: 92%;
padding: 0 0 5px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
direction: rtl;
}
.MyPanel ul li h3:hover {
color: #5000ff;
text-shadow: 0 0 2px #e63131, 0 0 4px #fff;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.MyPanel ul.box-contect_panel li.contect_panel hr.contect_panel-hr-start,
.MyPanel ul.box-contect_panel li.contect_panel hr.contect_panel-hr-end {
width: 90%;
border-top: 5px solid #0fd2ff;
margin: 20px auto 0;
border-radius: 50%;
list-style: none;
}
.MyPanel ul.box-contect_panel li.contect_panel hr.contect_panel-hr-end {
margin: 50px auto 0;
}
.MyPanel ul.box-contect_panel li.contect_panel h4 {
line-height: 50px;
text-align: justify;
font-family: 'samim';
font-size: 20px;
direction: rtl;
width: 90%;
margin: 40px auto 0;
}
.MyPanel ul li .icon-title-left_panel,
.MyPanel ul li .icon-title-down_panel {
position: absolute;
top: -40px;
left: 0;
font-size: 35px;
color: #80c2fe;
}
.MyPanel ul li .icon-title-left_panel:hover,
.MyPanel ul li .icon-title-down_panel {
color: #0086ff;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.MyPanel ul li .icon-title-down_panel {
display: none;
color: #ff8484;
}
.MyPanel ul li .icon-title-down_panel:hover {
color: #f00;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.MyPanel ul li ul {
display: none;
box-shadow: none;
border: none;
margin: 0 0 -60px;
}
.MyPanel ul li ul li {
cursor: context-menu;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet" />
<div class="MyPanel">
<ul class="body_panel">
<li class="title_panel">
<p class="bi bi-arrow-left-square-fill icon-title-left_panel">­</p>
<p class="bi bi-arrow-down-square-fill icon-title-down_panel">­</p>
<h3>title</h3>
<ul class="box-contect_panel">
<li class="contect_panel">
<hr class="contect_panel-hr-start">
<h4>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis veniam voluptas doloremque saepe sapiente! Dolorum
fugiat excepturi velit culpa ab.
</h4>
<hr class="contect_panel-hr-end">
</li>
</ul>
</li>
</ul>
</div>
<div class="MyPanel">
<ul class="body_panel">
<li class="title_panel">
<p class="bi bi-arrow-left-square-fill icon-title-left_panel">­</p>
<p class="bi bi-arrow-down-square-fill icon-title-down_panel">­</p>
<h3>title</h3>
<ul class="box-contect_panel">
<li class="contect_panel">
<hr class="contect_panel-hr-start">
<h4>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis veniam voluptas doloremque saepe sapiente! Dolorum
fugiat excepturi velit culpa ab.
</h4>
<hr class="contect_panel-hr-end">
</li>
</ul>
</li>
</ul>
</div>
2
Answers
Common practice is to add a ‘active’ class when the element is active and remove it when it’s not then just style the active class .
This is only you need to do