I make use of the (built-in) WordPress image gallery, it contains 36 images(figures). I want to break up the gallery and standard hide the images from the 26th image, then insert a new figure element which acts like a button and if clicked shows the other images and hide the button, kind of toggle.

I’m new to javaScript and pieced together 2 functions, when applied to the page from Chrome developer console, it works like i want it to, but when i call the function from WordPress functions.php like described in the code below, it shows the rest of the images for like 2 seconds and then it starts over.

Please, review my code, give me suggestions, is this good coding, what goes wrong?

Thnx in advance!

// insert images javaScript
function createGalleryFigure() {
    var elems = document.querySelectorAll(".gallery-item");
    var n = 26;
    for (var i = n; i < elems.length; i++) {
        elems[i].style.display = "none";

    var galleryDiv = document.getElementById("gallery-4");

    var a = document.createElement("FIGURE");
        a.setAttribute("class", "gallery-item");
        a.setAttribute("id", "meerButton");
        galleryDiv.style.cssText = 'display:inline';

    var b = document.createElement("DIV");
        b.setAttribute("class", "gallery-icon landscape");

    var c = document.createElement("DIV");
        c.setAttribute("class", "meer");

    var d = document.createElement("A");
        d.setAttribute("onclick", "showOther();");
        d.setAttribute("id", "moreProjects");
        d.setAttribute("class", "no-lightbox");

    var e = document.createElement("IMG");
        e.setAttribute("width", "400");
        e.setAttribute("height", "168");
        e.setAttribute("src", "pathToImage");
        e.setAttribute("class", "image-overlay attachment-full size-full");
        e.setAttribute("id", "meer");
        e.setAttribute("alt", "Meer projecten");
        e.setAttribute("aria-describedby", "gallery-4-666");
        e.setAttribute("sizes", "(max-width: 400px) 85vw, 400px");
        e.setAttribute("title", "Meer projecten");

    var f = document.createElement("DIV")
        f.setAttribute("class", "overlay");

    var g = document.createElement("DIV")
        g.setAttribute("class", "text");
        g.innerHTML = "Meer projecten";

// Show Other Elements
function showOther() {
    var elems = document.querySelectorAll(".gallery-item");
    var n = 26;
    for (var i = n; i < elems.length; i++) {
        elems[i].style.display = "inline-block";
        elems[i].style.maxWidth = "33.33%";
        elems[i].style.padding = "0 1.1400652% 2.2801304%";
        elems[i].style.textAlign = "center";
        elems[i].style.verticalAlign = "top";
        elems[i].style.width = "100%";
    var button = document.querySelector('#meerButton');
        button.style.display = "none";

// functions.php
 add_action( 'wp_footer', 'hideProjects' );

function hideProjects()
    if( !is_page( 'overzicht-projecten' ) )

    <script type="text/javascript" src="pathToScript"></script>
    <script type="text/javascript">
        window.onload = createGalleryFigure();        

Read more here: Javascript functions review + When applied to a specific WordPress page it reloads?


If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Wordpress related questions and answers: