CODEWITHSUNDEEP
javascripthtmlcss
zcool 99
zcool 99

Reputation: 27

How do you make a DIV element closed on default?

I am currently working on an app. I have a navigation menu that I can open and close using a button, but whenever I load the app the menu is open. I have tried <div id="navigation" style="display:none;"> but that just stops it from opening. I would prefer that this be in HTML, JavaScript, and/or simple CSS, but no jQuery. Also I would like to change the text in the button (span TogNavTxt) to open or close depending on weather the button would open the menu or close the menu. I tried document.getElementById(TogNavTxt).innerHTML = Close; but it didn't work.

index.html:

<!DOCTYPE html>
<html>
    <style>
        .btn-group button {
            background-color: #3333ff;
            width: 100%;
            border: 1px solid Black;
            color: white; 
            padding: 2px 10px;
            cursor: pointer;
            float: left;
        }

        .btn-group:after {
            content: "";
            clear: both;
            display: table;
        }

        .btn-group button:not(:last-child) {
            border-right: none;
        }

        .btn-group button:hover {
            background-color: #0000b3;
        }
    </style>
    <head>
        <link rel="stylesheet" type="text/css" href="Home.css">
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=yes, width=device-width">
        <title>ZcoolUnity</title>
    </head>
    <body>
        <button onclick="ToggleNav('navigation');">Open</button>
        <div id="navigation">
            <div class="btn-group">
                <a href="index.html"><button><b>Home</b></button></a>
                <a href="ZUGames.html"><button>ZU Games</button></a>
                <a href="ComunityGames.html"><button>Community Games</button></a>
                <a href="Announcments.html"><button>Announcments</button></a>
                <a href="Staff.html"><button>Staff</button></a>
                <a href="ContactMe.html"><button>Contact Me</button></a>
                <a href="Assets.html"><button>Assets</button></a>
            </div>
        </div>
        <script type="text/javascript" src="Home.js"></script>
    </body>
</html>

Home.js:

 function ToggleNav(navigation) {
       var e = document.getElementById(navigation);
       if(e.style.display == 'none')
          e.style.display = 'block';
       else
          e.style.display = 'none';
    }

Upvotes: 0

Views: 882

Answers (3)

Stephen P
Stephen P

Reputation: 14810

Even though you've already accepted an answer, I'm posting this for completeness — it gets rid of the inline styles and inline event handlers, as I mentioned in my comment, and separates the html, css, and javascript (Separation of Concerns — "SoC")

Semantic markup uses classes that describe what something is and/or the state of something, so this describes the navigation block as being either open or closed. What is meant by open or closed is then left up to the style-sheet.
I also changed the <div id="navigation"> to <nav id="navigation"> ... if you're using HTML5 you ought to use the new semantic tags that are available.

I've commented out the <link rel="stylesheet" ...> and the <script src="Home.js"> because a "Stack-snippet" automatically includes them as part of the snippet. Also note that type="text/javascript" is no longer needed in HTML5.
(Stack Snippets! jsfiddles no longer needed!)

function ToggleNav(event) {
    let nav = document.getElementById('navigation');
    console.log('click triggered');
    
    let navClasses = nav.classList;
    if (nav.classList.contains('closed')) {
        nav.classList.remove('closed');
        nav.classList.add('open');
    }
    else {
        nav.classList.remove('open');
        nav.classList.add('closed');
    }
}

document.getElementById('toggle-nav')
        .addEventListener('click', ToggleNav);
#navigation, #navigation.open {
    display: block;
}
#navigation.closed {
    display: none;
}

.btn-group button {
    background-color: #3333ff;
    width: 100%;
    border: 1px solid Black;
    color: white; 
    padding: 2px 10px;
    cursor: pointer;
    float: left;
}

.btn-group:after {
    content: "";
    clear: both;
    display: table;
}

.btn-group button:not(:last-child) {
    border-right: none;
}

.btn-group button:hover {
    background-color: #0000b3;
}
<!DOCTYPE html>
<html>
    <head>
   <!-- <link rel="stylesheet" type="text/css" href="Home.css"> -->
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=yes, width=device-width">
        <title>ZcoolUnity</title>
    </head>
    <body>
        <button id="toggle-nav">Open</button>
        <nav id="navigation" class="closed">
            <div class="btn-group">
                <a href="index.html"><button><b>Home</b></button></a>
                <a href="ZUGames.html"><button>ZU Games</button></a>
                <a href="ComunityGames.html"><button>Community Games</button></a>
                <a href="Announcments.html"><button>Announcments</button></a>
                <a href="Staff.html"><button>Staff</button></a>
                <a href="ContactMe.html"><button>Contact Me</button></a>
                <a href="Assets.html"><button>Assets</button></a>
            </div>
        </nav>
   <!-- <script src="Home.js"></script> -->
    </body>
</html>

Upvotes: 1

hyper_text_coffee_pot
hyper_text_coffee_pot

Reputation: 448

Just add the following css:

#navigation {
    display: none;
}

That hides the menu by default.

Here's a jsfiddle with some other changes (not a lot) that works:

https://jsfiddle.net/md8njv2y/8/

Upvotes: 0

Rufrage
Rufrage

Reputation: 306

Basically your JS misses some " around the "navigation". To have it closed on start, add display:none and set the new Button text via innerHTML on a element. On an input-tag with type="button", set the value instead.

HTML:

<div id="navigation" style="display: none;">
  <div class="btn-group">
    <a href="index.html"><button><b>Home</b></button></a>
    <a href="ZUGames.html"><button>ZU Games</button></a>
    <a href="ComunityGames.html"><button>Community Games</button></a>
    <a href="Announcments.html"><button>Announcments</button></a>
    <a href="Staff.html"><button>Staff</button></a>
    <a href="ContactMe.html"><button>Contact Me</button></a>
    <a href="Assets.html"><button>Assets</button></a>
  </div>
</div>
<button id="togglebtn" onclick="toggleNav();">Open</button>
<input id="toggleinput" onclick="toggleNav();" value="Open" type="button">

JS:

function toggleNav(){
  var e = document.getElementById("navigation");
  if(e.style.display == 'none'){
    e.style.display = 'block';
    document.getElementById("togglebtn").innerHTML = "Close";
    document.getElementById("toggleinput").value = "Close";
  } else{
    e.style.display = 'none';
    document.getElementById("togglebtn").innerHTML = "Open";
    document.getElementById("toggleinput").value = "Open";
  }
}

Watch in action here: https://codepen.io/anon/pen/BVwVrg

Upvotes: 0

Related Questions