Enable the border for the panel – Jquery

$('.body_panel').find('li.title_panel').click(function () { // added li class
            if ($(this).parent().find("ul").eq(0).is(':visible')) {
                $(this).parent().removeClass('active'); // Select ul relatively and remove class
                $(this).children('.icon-title-left_panel').show();
                $(this).children('.icon-title-down_panel').hide();
            } else {
                $(this).parent().addClass('active'); // Select ul relatively and add class
                $(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 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">&shy;</p>
                <p class="bi bi-arrow-down-square-fill icon-title-down_panel">&shy;</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>
        <ul class="body_panel">
            <li class="title_panel">
                <p class="bi bi-arrow-left-square-fill icon-title-left_panel">&shy;</p>
                <p class="bi bi-arrow-down-square-fill icon-title-down_panel">&shy;</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>