Display social media icons for sharing

by developer_success

HTML

<div id="social_box" class="ux-social-box">
    <ul class="social-chat">
        <li>
            <a href="https://zalo.me/0903728335" target="_blank">
                <img src="https://trangdesigner.id.vn/wp-content/uploads/2025/05/ic_zalo.png" alt="Zalo" />
            </a>
        </li>
        <li>
            <a href="https://t.me/developer_success" target="_blank">
                <img src="https://trangdesigner.id.vn/wp-content/uploads/2025/05/ic_telegram.webp" alt="Telegram" />
            </a>
        </li>
        <li>
            <a href="https://m.me/developer.success" target="_blank">
                <img src="https://trangdesigner.id.vn/wp-content/uploads/2025/05/ic_messenger.png" alt="Messenger" />
            </a>
        </li>
        <li>
            <a class="o"><img src="https://trangdesigner.id.vn/wp-content/uploads/2025/05/icon-vipo.jpg" alt="VIPO" /></a>
        </li>
        <li>
            <a class="c">
                <svg width="58" height="58" viewBox="0 0 58 58" fill="none">
                    <circle cx="29" cy="29" r="29" fill="#DC3837" />
                    <path d="M35.41 22.59L22.59 35.41M35.41 35.41L22.59 22.59" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
            </a>
        </li>
    </ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

CSS

#social_box {
    position: fixed;
    right: 20px;
    bottom: 30px;
    z-index: 9999;
}
.social-chat {
    list-style: none;
    padding: 0;
    margin: 0;
}
.social-chat li {
    margin: 5px 0;
}
.social-chat li a img {
    width: 58px;
    height: 58px;
    border-radius: 50%;
}
.social-chat li a.o img {
    padding: 2px;
    margin-bottom: 4px;
}
.social-chat li a:not(.o) {
    display: none;
}
.social-chat li a.o {
    background: #e03;
    border-radius: 50%;
    display: block;
}
.social-chat li a.c {
    display: none;
    cursor: pointer;
}

JavaScript

jQuery(document).ready(function ($) {
    $("#social_box")
        .find("a.c")
        .click(function () {
            $("#social_box").find("a[href],a.c").hide();
            $("#social_box").find("a.o").show();
        });

    $("#social_box")
        .find("a.o")
        .on("click", function () {
            $("#social_box").find("a[href],a.c").show();
            $(this).hide();
        });
});