How to replace several divs in html with several other hidden divs using javascript using a button toggle feature

Question

These are the div's that I would like to replace:

The Html:

<div class="row" id="goodPageTopics">
    <div class="col-md-12 text-center">
        <ul class="list-unstyled text-center">
            <li class="filter btn btn-primary" data-filter="all">ALL</li>
            <li class="filter btn btn-primary" data-filter=".branding">POLITICS</li>
            <li class="filter btn btn-primary" data-filter=".design">ETHICS</li>
            <li class="filter btn btn-primary" data-filter=".development">MISCALULATIONS</li>
        </ul>
    </div>
    <div class="mix branding col-md-3">
        <div class="img-wrapper">
            <img class="img-responsive" src="images/projects/project1.png" />
            <a href="#project-1">
                <div class="img-info bg-primary">Click to see more info</div>
            </a>
        </div>
    </div>
    <div class="mix development col-md-3">
        <div class="img-wrapper">
            <img class="img-responsive" src="images/projects/project2.png" />
            <a href="#project-2">
                <div class="img-info bg-success">Click to see more info</div>
            </a>
        </div>
    </div>
    <div class="mix design col-md-3">
        <div class="img-wrapper">
            <img class="img-responsive" src="images/projects/project3.png" />
            <a href="#project-3">
                <div class="img-info bg-warning">Click to see more info</div>
            </a>
        </div>
    </div>
    <div class="mix branding col-md-3">
        <div class="img-wrapper">
            <img class="img-responsive" src="images/projects/project4.png" />
            <a href="#project-4">
                <div class="img-info bg-danger">Click to see more info</div>
            </a>
        </div>
    </div>
    <div class="mix design col-md-3">
        <div class="img-wrapper">
            <img class="img-responsive" src="images/projects/project5.png" />
            <a href="#project-5">
                <div class="img-info bg-info">Click to see more info</div>
            </a>
        </div>
    </div>
    <div class="mix seo col-md-3">
        <div class="img-wrapper">
            <img class="img-responsive" src="images/projects/project6.png" />
            <a href="#project-6">
                <div class="img-info bg-primary">Click to see more info</div>
            </a>
        </div>
    </div>
    <div class="mix design col-md-3">
        <div class="img-wrapper">
            <img class="img-responsive" src="images/projects/project7.png" />
            <a href="#project-7">
                <div class="img-info bg-success">Click to see more info</div>
            </a>
        </div>
    </div>
    <div class="mix seo col-md-3">
        <div class="img-wrapper">
            <img class="img-responsive" src="images/projects/project8.png" />
            <a href="#project-8">
                <div class="img-info bg-warning">Click to see more info</div>
            </a>
        </div>
    </div>
</div>

The button is what triggers the divs to be switched out I have already made the other divs but I have made them hidden so they show up untill they are wanted

JavaScript:

document.getElementById('change-page').addEventListener('click', function () {
    toggle(document.querySelectorAll('.goodPageTopics'));
});

function toggle(elements, specifiedDisplay) {
    var element, index;

    elements = elements.length ? elements : [elements];
    for (index = 0; index < elements.length; index++) {
        element = elements[index];

        if (isElementHidden(element)) {
            element.style.display = '';

            // If the element is still hidden after removing the inline display
            if (isElementHidden(element)) {
                element.style.display = specifiedDisplay || 'block';
            }
        } else {
            element.style.display = 'none';
        }
    }

    function isElementHidden(element) {
        return window.getComputedStyle(element, null).getPropertyValue('display') === 'none';
    }
};

Also the Nav for the topics switch the divs around using data-filters and I'm not quite sure how they work but they flip out if I do anything with em so if any has information on that it would be much appreciated.

In addition to that I am using bootstrap and would be willing to accept a Jquery answer but JavaScript is preferred.

Why did you add the jQuery tag if your code doesn't use jQuery? — , Dec 31 '15 at 20:10
Well I'm willing to use jQuery if you guys have a solution.... — cosmichero2025, Dec 31 '15 at 20:10
Possible duplicate of [Replace Div with another Div](http://stackoverflow.com/questions/5062916/replace-div-with-another-div) — RisingSun, Dec 31 '15 at 20:11
Well I tried that one but it didn't seem to work with my preticular problem after some fiddling — cosmichero2025, Dec 31 '15 at 20:14
I'm very confused...what divs are hidden in your above example? You must have the style attribute set in CSS, which is fine, but if you want to use JS to modify it, move the `display` property into your `style` attribute. That way you can simply set the ones that are visible to hidden and vice versa. Let me know if I need to show you code example. — Battle_707, Dec 31 '15 at 20:41

score 1 · Accepted Answer · answered Dec 31 '15 at 22:23

A couple of issues here. You haven't shown us the html codes for your button but I made one for testing named "CHANGE VIEW" at buttom of snippet :D

secondly

document.querySelectorAll('.goodPageTopics')); //is incorrect

in your html you have goodPageTopics as an id not a class

change the above line to

document.querySelectorAll('#goodPageTopics>*')

and finally here is a snippet to see other adjustments

document.getElementById('change-page').addEventListener('click', function () {
    toggle(document.querySelectorAll('#goodPageTopics>*'));
});

function toggle(elements, specifiedDisplay) {
    var element, index;

   elements = elements.length ? elements : elements;
   // console.log(elements);
    for (index = 0; index < elements.length; index++) {
        element = elements[index];
console.log(element,index);
            if(isElementHidden(element)) {
            console.log(isElementHidden(element));
                element.style.display = 'inline-block';
            }
        else {
            element.style.display = 'none';
        }
    }

    function isElementHidden(element) {
    // console.log(element);
    console.log(window.getComputedStyle(element, null).getPropertyValue('display') === 'none');
        return window.getComputedStyle(element, null).getPropertyValue('display') === 'none';
       
    }
};

.mix2{
display:none;
}
.mix1 {
  display:inline-block;
}

<div class="row" id="goodPageTopics">
    <div class="col-md-12 text-center">
        <ul class="list-unstyled text-center">
            <li class="filter btn btn-primary" data-filter="all">ALL</li>
            <li class="filter btn btn-primary" data-filter=".branding">POLITICS</li>
            <li class="filter btn btn-primary" data-filter=".design">ETHICS</li>
            <li class="filter btn btn-primary" data-filter=".development">MISCALULATIONS</li>
        </ul>
    </div>
    <div class="mix1">
        <div class="img-wrapper">
            <img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT4A9fe0YBJNZ7tPBy3k-oym1bS6U2wlEjmt8CLcS_DN3wBPsgZCg" />
            <a href="#project-1">
                <div class="img-info bg-primary">Click to see more info 1</div>
            </a>
        </div>
    </div>
    <div class="mix1">
        <div class="img-wrapper">
            <img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTRlxRebVidbrtuW7v9gT4VZgYPT7G3vSUuOnabGaLfUVKeYcSw" />
            <a href="#project-2">
                <div class="img-info bg-success">Click to see more info 2</div>
            </a>
        </div>
    </div>
    <div class="mix1">
        <div class="img-wrapper">
            <img class="img-responsive" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU5tUsmZNqnT16dHtYc8WBqWUDXu3dOVOixYDBKBTThAuoU2hx" />
            <a href="#project-3">
                <div class="img-info bg-warning">Click to see more info 3</div>
            </a>
        </div>
    </div>
    <div class="mix1">
        <div class="img-wrapper">
            <img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTHr-vzSiowlKsNztwRWplAQnVch4hOZy6aUIKWaA89ank-_fd9gw" />
            <a href="#project-4">
                <div class="img-info bg-danger">Click to see more info 4</div>
            </a>
        </div>
    </div>
    <div class="mix1">
        <div class="img-wrapper">
            <img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQOArgeYK7H0JwbEGOQz5axbe7m1JIaty77MS0Z-Mdan-J8GYOX" />
            <a href="#project-5">
                <div class="img-info bg-info">Click to see more info 5</div>
            </a>
        </div>
    </div>
    <div class="mix2">
        <div class="img-wrapper">
            <img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS8OoyP1DLBzSPKpOJiIjUeVtahu67PdDfVtvP1BQJlAcdZiAUMSA" />
            <a href="#project-6">
                <div class="img-info bg-primary">Click to see more info 6</div>
            </a>
        </div>
    </div>
    <div class="mix2">
        <div class="img-wrapper">
            <img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRH181kjqkxFXqYU4bTP8zdfiAfO4iceJrxA4lMPXMCKY61eX9v" />
            <a href="#project-7">
                <div class="img-info bg-success">Click to see more info 7</div>
            </a>
        </div>
    </div>
    <div class="mix2">
        <div class="img-wrapper">
            <img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRS5otwxzHrKeXkcjTGIvgqr9RgIjty7RBDcAQu6MFlOn1K38ll" />
            <a href="#project-8">
                <div class="img-info bg-warning">Click to see more info 8</div>
            </a>
        </div>
    </div>
    <div>
    </div>
</div>
 <button type="submit" id='change-page'>
    CHANGE VIEW
    </button>

Thank you very much this does solve a part of my problem and I didn't see you comment before I just uploaded more detailed and larger question about my problem that involves more of my code. — cosmichero2025, Jan 02 '16 at 00:42

How to replace several divs in html with several other hidden divs using javascript using a button toggle feature

1 Answers1