Мессенджеры одной кнопкой

.socials-fixed{
    position: fixed;
    right: 40px;
    bottom: 100px;
    z-index: 20;
    
    @media(max-width: 1400px){
        right: 17px;
        bottom: 100px;
    }
    @media(max-width: 800px){
        right: 10px;
        bottom: 90px;
    }
    .soc--inner{
        display: block;
        width: 50px;
        height: 50px;
        margin-bottom: 10px;
        border-radius: 50%;
        
        @media(max-width: 800px){
            width: 40px;
            height: 40px;
            margin-bottom: 6px;
        }
    }
    .whatsapp{
        background: #40c351 url('../img/whatsapp.svg') no-repeat 53% 47%;
        background-size: 52%;
    }
    .telegram{
        background: #29b6f6 url('../img/email_send.svg') no-repeat 47% 50%;
        background-size: 52%;
    }
    
    .socials-fixed-list{
        display: none;
        border-radius: 40px;
    }
    .btn-soc-fixed{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: @color-1 url('../img/chat-svgrepo-com.svg') no-repeat 50% 50%;
        background-size: 20px;
        cursor: pointer;
        transition: 0.3s all;
        
        @media(max-width: 800px){
            width: 40px;
            height: 40px;
        }
        &:hover{
            background-color: @text;
        }
    }
    .btn-soc-fixed.active{
        background: @color-1 url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e") no-repeat 50% 50%;
        background-size: 20px;
        
        &:hover{
            background-color: @text;
            
            @media(max-width: 800px){
                background-color: @color-1;
            }
        }
    }
}

<div class="socials-fixed">
    <div class="socials-fixed-list">
        <a class="soc--inner whatsapp" href="https://api.whatsapp.com/send?phone=<?php the_field('whatsapp', 'option'); ?>&text=Здравствуйте%2C%20у%20меня%20возникли%20вопросы%2C%20можете%20помочь%3F%20😊" target="_blank" title="Написать в WhatsApp"></a>
        <a class="soc--inner telegram" href="https://t.me/<?php the_field('telegram', 'option'); ?>" title="Telegram"></a>
    </div>
    <div class="btn-soc-fixed"></div>
    <div class="socials-fixed_bg"></div>
</div>

//виджет мессенджеров
(function(){
    $(document).ready(function(){
        $('.btn-soc-fixed').click(function(){
            $(this).parent().children('.socials-fixed-list').slideToggle();
            $(this).toggleClass('active');
            return false;
        });
    });
})();
//виджет мессенджеров