Show all Game cards in Javascript

Question

Be able to find a memory game in Javascript and made some changes as you can see on my repository

What I would like to do is that when starting the Game it showed all the images and after 3 seconds hid the images as it was configured before, but I do not know how to do this, someone could be willing to see how to modify the code.

Code

This piece of hidden code does the effect of flipping the images;

function flip(n) {
    isPlaying && ($(n).css("pointer-events", "none"), $(n).toggleClass("flipped"), playSound("flip"), current ? ($(".card").css("pointer-events", "none"), current.attr("data") != $(n).attr("data") ? setTimeout(function() {
        current.toggleClass("flipped"), $(n).toggleClass("flipped"), current = null, playSound("incorrect"), isPlaying && $(".card").css("pointer-events", "auto")
    }, 600) : (point++, $(n).find("img").css({
        "-webkit-box-shadow": "0px 0px 15px 5px rgba(240,240,140,0.75)",
        "-moz-box-shadow": "0px 0px 15px 5px rgba(240,240,140,0.75)",
        "box-shadow": "0px 0px 15px 5px rgba(240,240,140,0.75)"
    }), current.find("img").css({
        "-webkit-box-shadow": "0px 0px 15px 5px rgba(240,240,140,0.75)",
        "-moz-box-shadow": "0px 0px 15px 5px rgba(240,240,140,0.75)",
        "box-shadow": "0px 0px 15px 5px rgba(240,240,140,0.75)"
    }), setTimeout(function() {
        $(n).css("opacity", "0").attr("onclick", "").children().children("img").css("cursor", "default"), current.css("opacity", "0").attr("onclick", "").children().children("img").css("cursor", "default"), current = null, playSound("correct"), point == numberCards ? (document.getElementById("bg-music").load(), playSound("win"), stopGame(), openModal("win")) : $(".card").css("pointer-events", "auto")
    }, 600))) : current = $(n))
}

This piece of code hides the images

function loadContent() {
    $(".progressbar").css("display", "none"), cards = shuffle(cards);
    for (var n = "", e = 0; e < cards.length; e++) n += '<div class="grid"><div class="card" data="' + cards[e] + '" onclick="flip(this)"><div class="front"><img src="img/back.jpg"/></div><div class="back"><img src="img/' + cards[e] + '.jpg"/></div></div></div>';
    $(".content").html(n), openModal("begin")
}

Answer 1

function loadContent() {
        $(".progressbar").css("display", "none"), cards = shuffle(cards);
}
 setTimeout(function(){ 
         for (var n = "", e = 0; e < cards.length; e++){
                 n += '<div class="grid"><div class="card" data="' + cards[e] + '" onclick="flip(this)"><div class="front"><img src="img/back.jpg"/></div><div class="back"><img src="img/' + cards[e] + '.jpg"/></div></div></div>';
            $(".content").html(n), openModal("begin")
        }          
    }, 3000);

This will make the cards hidden after 3 seconds You may have to add jquery to your project