toggle

<style>
    .product-info-box {
        max-width: 100%;
        border-radius: 8px;
        /* padding: 20px; */
        padding: 20px 11px 20px 11px;
        background-color: #ffffff;
        font-family: sans-serif;
        /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); */
        /* border: 1px solid #eee; */
    }

    .info-row {
        margin-bottom: 15px;
    }

    .info-title {
        color: #0b121980;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 4px;
    }

    .info-value {
        font-size: 16px;
        font-weight: 400;
        color: #0b1219;
        font-family: sans-serif;
    }

    .toggle-content {
        display: none;
        margin-top: 15px;
    }

    .toggle-button {
        display: block;
        width: 100%;
        text-align: center;
        border-top: 1px solid #e1e1e1;
        border-right: 0px;
        border-left: 0px;
        border-bottom: 0px;
        padding-top: 10px;
        margin-top: 15px;
        cursor: pointer;
        color: #ec407a;
        font-size: 14px;
        font-weight: 500;
        background: none;
        /* border: none; */
    }

    @media screen and (max-width: 600px) {

        .info-title,
        .info-value {
            font-size: 14px;
        }
    }
</style>

<div class="product-info-box">
    <div class="info-row">
        <div class="info-title">Item Weight</div>
        <div class="info-value">100 g</div>
    </div>
    <div class="info-row">
        <div class="info-title">Hsn Code</div>
        <div class="info-value">30049069</div>
    </div>

    <div class="toggle-content" id="moreContent">
        <!-- Add any additional info here -->
        <div class="info-row">
            <div class="info-title">Country Of Origin</div>
            <div class="info-value">India</div>
        </div>
        <div class="info-row">
            <div class="info-title">Customer care no</div>
            <div class="info-value">18001025353</div>
        </div>
        <div class="info-row">
            <div class="info-title">Customer care email id</div>
            <div class="info-value">Sun Pharmaceutical Industries Ltd</div>
        </div>
        <div class="info-row">
            <div class="info-title">Address of Manufacturer/Marketer</div>
            <div class="info-value">Acme Plaza, Andheri - Kurla Road, Andheri (E),Mumbai - 400 059</div>
        </div>
        <div class="info-row">
            <div class="info-title">Name of Manufacturer</div>
            <div class="info-value">Sun Pharma Laboratories Ltd</div>
        </div>
        <div class="info-row">
            <div class="info-title">Address of Manufacturer</div>
            <div class="info-value">Plot no.107-108,Namli Block,P.O.Ranipool, East Sikkim - 737 135</div>
        </div>
    </div>

    <button class="toggle-button" onclick="toggleMoreInfo(this)">Show more <span>▾</span></button>
</div>

<script>
    function toggleMoreInfo(button) {
        const content = document.getElementById('moreContent');
        const isVisible = content.style.display === 'block';
        content.style.display = isVisible ? 'none' : 'block';
        button.innerHTML = isVisible ? 'Show more <span>▾</span>' : 'Show less <span>▴</span>';
    }
</script>