How to use javascript to hide and let divs reappear

Question

I am trying to make webpage where there is a div in the center which is being changed, instead of going to different pages.

Ultimately, I would like to have the new div, when clicking on an arrow, to flow from right or left in to the center. But first I would like to make the divs appear and disappear when clicking on the arrows but unfortunately this doesn't work.

This is my javascript:

<script>
function changeToHome() {
    document.getElementById("mainmain").style.display="block";
    document.getElementById("mainmain2").style.display="none";
    document.getElementById("mainmain3").style.display="none";
    document.getElementById("mainmain4").style.display="none";
}
function changeToStudy() {    
    document.getElementById("mainmain").style.display="none";
    document.getElementById("mainmain2").style.display="block";
    document.getElementById("mainmain3").style.display="none";
    document.getElementById("mainmain4").style.display="none";
}    
function changeToJob() {    
    document.getElementById("mainmain").style.display="none";
    document.getElementById("mainmain2").style.display="none";
    document.getElementById("mainmain3").style.display="block";
    document.getElementById("mainmain4").style.display="none";
}
function changeToContact() {    
    document.getElementById("mainmain").style.display="none";
    document.getElementById("mainmain2").style.display="none";
    document.getElementById("mainmain3").style.display="none";
    document.getElementById("mainmain4").style.display="block";
}    

function changePageRight() {
    var displayValue5 = document.getElementById('mainmain').style.display;
    var displayValue5 = document.getElementById('mainmain2').style.display;
    var displayValue6 = document.getElementById('mainmain3').style.display;
    var displayValue7 = document.getElementById('mainmain4').style.display;

    if (document.getElementById('mainmain').style.display == "block") {
        document.getElementById("mainmain").style.display="none";
        document.getElementById("mainmain2").style.display="block";
    }
    else if (document.getElementById('mainmain2').style.display == "block") { 
        document.getElementById("mainmain2").style.display="none";
        document.getElementById("mainmain3").style.display="block";
    }
    else if (document.getElementById('mainmain3').style.display == "block") {
        document.getElementById("mainmain3").style.display="none";
        document.getElementById("mainmain4").style.display="block";
    }
    else if (displayValue8 == block) {}
}
function changePageLeft() {
    var displayValue = document.getElementById('mainmain').style.display;
    var displayValue2 = document.getElementById('mainmain2').style.display;
    var displayValue3 = document.getElementById('mainmain3').style.display;
    var displayValue4 = document.getElementById('mainmain4').style.display;

    if (displayValue == "block") { }
    else if (displayValue2 == "block") { 
        document.getElementById("mainmain").style.display="block";
        document.getElementById("mainmain2").style.display="none";
    }
    else if (displayValue3 == "block") {
        document.getElementById("mainmain2").style.display="block";
        document.getElementById("mainmain3").style.display="none";
    }
    else if (displayValue4 === "block") {
        document.getElementById("mainmain3").style.display="block";
        document.getElementById("mainmain4").style.display="none";
    }
}
</script>

Now I have a few divs that look like this:

<div id="mainmain4">
    <img style="width:400px;height:327px;margin-left:auto;margin-right:auto;display:block;"     src="Untitled-22.png" />
    <h2> My name </h2>
    <p>Hi,</p>
    <p>Some text</p>
</div>

With these css atributes:

#mainmain {
    float: left;
    width: 575px;
    display: block;
    position: relative;
}

And all other divs with display: none; so I can change this to block and the one that was block to none. For some reason, after when I click on one button of the menu, which activates a changeToX() function, the arrows work great. But before that, when you first go to the website, it doesn't.

Can someone explain me what I do wrong?

Answer 1

Maybe this is of some use. I've tried to make a page control-like behaviour. You can select any container div and put elements in there that have the class 'page'. The JavaScript code will let you navigate those with buttons.

You can make it more fancy by adding the buttons through JavaScript. What you then have is basically a list of pages which are normally displayed as regular divs, but when the script kicks in, it changes them to a page control.

You can call this for any parent element, and in that sense it behaves a bit like a jQuery plugin. It is all native JavaScript, though. And not too much code, I hope. Like you said, I think it's good to learn JavaScript at first. It is very powerful by itself, and it's becoming increasingly powerful. jQuery adds a lot of convenience functions and provides fallbacks in case browser don't support certain features, or when implementations differ. But for many tasks, bare JavaScript will do just fine, and it certainly can't hurt to know your way around it.

Press the 'Run this snippet' button at the bottom to see it in action.

function Pages(element)
{
    // Some initialization
    var activePage;
    // Find all pages within this element.
    var pages = document.querySelectorAll('.page');
    var maxPage = pages.length - 1;
    
    // Function to toggle the active page.
    var setPage = function(index)
    {
        activePage = index;
        for (p = 0; p <= maxPage; p++)
        {
            if (p == activePage)
                pages[p].className = 'page active';
            else
                pages[p].className = 'page inactive';
        }
    }
    
    // Select the first page by default.
    setPage(0);
    
    // Handler for 'previous'
    element.querySelector('.prev').onclick = function()
    {
        if (activePage == 0) 
            return;
        setPage(activePage - 1);
    }
    
    // Handler for 'next'
    element.querySelector('.next').onclick = function()
    {
        if (activePage == maxPage) 
            return;
        setPage(activePage + 1);
    }

    // Add a class to the element itself. This way, you can already change CSS styling 
    // depending on whether this code is loaded or not. So in case of an error, the
    // divs are just all show underneath each other, and the nav buttons are hidden.
    element.className = element.className + ' js';
}

Pages(document.querySelector('.pages'));

.pages .page {
    display: block;
    padding: 40px;
    border: 1px solid blue;
}

.pages .page.inactive {
    display: none;
}

.pages .nav {
    display: none;
}

.pages.js .nav {
    display: inline-block;
}

<div class="pages">
    <button class="nav prev">Last</button>
    <button class="nav next">Next</button>
    
    <div class="page">Page 1 - Introduction and other blah</div>
    <div class="page">Page 2 - Who am I? Who are you? Who is Dr Who?</div>
    <div class="page">Page 3 - Overview of our products
      <ul><li>Foo</li><li>Bar</li><li>Bar Pro</li></ul>
    </div>
    <div class="page">Page 4 - FAQ</div>
    <div class="page">Page 5 - Contact information</div>
</div>

To dos to make this a little more professional:

• Add the navigation through JavaScript
• Disable the buttons when first/last page has been reached
• Support navigation by keys too (or even swipe!)
• Some CSS transform (fade or moving) when toggling between pages
• Smarter adding and removing of classes. Now I just set className, which sucks if someone would like to add classes themselves. jQuery has addClass and removeClass for this, which is helpful. there are also stand-alone libraries that help you with this.
• Visible indication of pages, maybe with tabs at the top?

Answer 2

jQuery is as this simple:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<a href="#" class="toggle-container" data-container="#mainmain">toggle!</a>
<div id="mainmain">test text</div>

<script>
// you need this, only apply javascript when all html (dom) is loaded:
$(document).ready(function() { 

    $('.toggle-container').on('click', function(e) {
        e.preventDefault(); // this prevents the real href to '#'

        // .toggle() is like "on / off" switch for hiding and showing a container
        $($(this).data('container')).toggle();
    });
});
</script>

This function can be reused, because it is based on classes instead of id's.

Check this JSFiddle: http://jsfiddle.net/r8L6xg15/

Answer 3

You don't tell the browser which divs shall be displayed on load. You can use theonloadevent for this:

<body onload="changeToHome()">

One additional hint: you maybe don't want to use inline JavaScript and CSS.