Show and hide on click

Question

I have 4 images, that when I click on them, they each show a specific section on the website and keep the other three sections hidden. This part works great.

When that new section appears, it also has 4 images and when I click on them they too will show their specific section and keep the new three hidden. Here is where the problem lies.

I've tried using console.logs and the inspector and it seems all my content gets hidden. I'm too much of a newb to be able to figure out a solution.

I have kept the entire code off the page because I don't know where exactly the issue stems, but I'm 100% confident it's in my javascript. The whole code to get it to function like my website is over a thousand lines.

Any suggestions/hints/advice on what I can do to solve this please?

I think I need another function (but unsure how to go about creating it) as the first lot of images use AboutBlurbTabsFunction() to hide everything else and the second lot of images, I use the same one.

Here is the website

Here is the jsfiddle

Here is the Javascript code:

jQuery(document).ready(function(){

    simpleForEach(document.getElementsByClassName("blurbtabs"), function(tc) {
            tc.style.display = "none";  
        });

    jQuery(".blurbclick").click(function(){
        jQuery(".blurbtabs").hide();
        jQuery("#"+ jQuery(this).attr("data-about") ).show();
        console.log(jQuery(this).attr("data-about"));
    });

    jQuery(".tabimg").click(function(){
        console.log("img tab click function");
        jQuery(".tabcontent").hide();
        jQuery("#"+ jQuery(this).attr("data-about") ).show();
        console.log("#" + jQuery(this).attr("data-about"));
    });


    function simpleForEach(array, callback) {
        for (var i = 0; i < array.length; i++) {
            callback(array[i], i);
        }
    };

    function AboutBlurbTabsTarget() {
        jQuery(document).ready(function(){
            var target = document.createAttribute("data-about");
            var tclient = document.createAttribute("data-about");
            var tshoot = document.createAttribute("data-about");
            var tproduct = document.createAttribute("data-about");

            var photographer = document.getElementById("bphotographer");
            target.value = "sphotographer";
            photographer.setAttributeNode(target);

            var client = document.getElementById("bclient");
            tclient.value = "sclient";
            client.setAttributeNode(tclient);

            var shoot = document.getElementById("bshoot");
            tshoot.value = "sshoot";
            shoot.setAttributeNode(tshoot);

            var product = document.getElementById("bproduct");
            tproduct.value = "sproduct";
            product.setAttributeNode(tproduct);

            console.log("first function reached the end internally");
        });
        console.log("first function ran through");
    }; 

    function AboutBlurbTabsFunction() {
        console.log("function called");
        var tabimgs = document.getElementsByClassName("tabimg");
        console.log("var tabimgs: " + tabimgs);
        <!-- for each tabimg -->
        simpleForEach(tabimgs, function(tabimg) {
            console.log("simple for each called!");
                var aboutSection = tabimg.getAttribute("data-about");

                <!-- add the click event listener -->
                tabimg.addEventListener("click", function(evt) {
                    <!-- onclick do: -->

                    <!-- hide all tabcontents -->
                    simpleForEach(document.getElementsByClassName("tabcontent"), function(tc) {
                        tc.style.display = "none";
                        console.log("hide all tabcontents");

                    });

                    <!-- remove the active class -->
                    simpleForEach(document.getElementsByClassName("tabimg"), function(ti) {
                        ti.className = ti.className.replace(" active", "");
                        console.log("remove active");
                    });

                    <!-- show the current tab, and add "active" class to the link that opened the tab -->
                    document.getElementById(aboutSection);
                    tabimg.className += " active";
                    console.log("what section is called" + aboutSection);
                    console.log("what tabimg is at work here: " + tabimg.className);
                    console.log("what tabimg is at work here: " + tabimg.getAttribute("data-about"));
                });
        });
        //console.log("second function ran through");
    };

    AboutBlurbTabsFunction();
    AboutBlurbTabsTarget();
});

Answer 1

The problem probably lies here.

<!-- show the current tab, and add "active" class to the link that opened the tab -->
document.getElementById(aboutSection);
tabimg.className += " active";

You tried to get the next element but didn't do anything about it. Changing it to something like this should work.

<!-- show the current tab, and add "active" class to the link that opened the tab -->
var nextSection = document.getElementById(aboutSection);
nextSection.style.display = 'block';
tabimg.className += " active";