JavaScript Show invisible divs on click

I ran into a problem that when I click on the button, it just flips the icon but only makes the invisible fields visible on the second click. Are there any idea how to do it? (Heres a gif to show my problem: https://ibb.co/cvz7pWC ) Also heres my code :

function moreSoc() {
    
    var moresoc = document.getElementById("moresoc");
    var btnText = document.getElementById("mbtn");

    if (moresoc.style.display === "none" ) {
        moresoc.style.display = "block";
        mbtn.innerHTML = "More ▲";
    } else {
        moresoc.style.display = "none";
        mbtn.innerHTML = "More ▼"
    }

}

.morebutton {
    border: none;
    background: #fff;
    color: #111;
    font-size: 32px;
}

#moresoc {
    display: none;
}

<div class="wrapper more">
            <button class="morebutton" id="mbtn" onclick="moreSoc()">More ▲</button>
        </div>
        <section class="social-links" id="moresoc">
            <div class="wrapper">
                <h2>Others</h2>
                    <div class="social-link facebook">
                        <p>Facebook</p>
                    </div>
                    <div class="social-link instagram">
                        <p>Instagram</p>
                    </div>
                    <div class="social-link twitter">
                        <p>Twitter</p>
                    </div>
                    <div class="social-link youtube">
                        <p>Youtube</p>
                    </div>
            </div>
        </section>

Answer

This could be to do with you not being to read element.style.display as none the first time round. This is because it has not yet been set by JavaScript, but just by css. I suggest changing your if statement to check for not "block".

function moreSoc() {
    
    var moresoc = document.getElementById("moresoc");
    var btnText = document.getElementById("mbtn");

    if (moresoc.style.display != "block" ) {
        moresoc.style.display = "block";
        mbtn.innerHTML = "More ▲";
    } else {
        moresoc.style.display = "none";
        mbtn.innerHTML = "More ▼"
    }

}

.morebutton {
    border: none;
    background: #fff;
    color: #111;
    font-size: 32px;
}

#moresoc {
    display: none;
}

<div class="wrapper more">
            <button class="morebutton" id="mbtn" onclick="moreSoc()">More ▼</button>
        </div>
        <section class="social-links" id="moresoc">
            <div class="wrapper">
                <h2>Others</h2>
                    <div class="social-link facebook">
                        <p>Facebook</p>
                    </div>
                    <div class="social-link instagram">
                        <p>Instagram</p>
                    </div>
                    <div class="social-link twitter">
                        <p>Twitter</p>
                    </div>
                    <div class="social-link youtube">
                        <p>Youtube</p>
                    </div>
            </div>
        </section>