Trying to Open/Close a div with one button

Question

function openNav() {
    document.getElementById("mySidenav").style.width = "200px";
}

/* Set the width of the side navigation to 0 */
function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}

<div onclick="openNav()" class="minimenubutton"><img src="images/menu.png"/></div>

I'm looking for a way to have the function change every time I click this so that I can open my div with one button. As of right now, I have closeNav set to a button inside that div, but I'd like to do it all with just the "minimenubutton."

I'm new to Javascript so please go easy on me. I looked up toggles but couldn't figure them out.

Can you include `#mySidenav` element at Question? – guest271314 May 16 '16 at 01:18 — guest271314, May 16 '16 at 01:18

score 3 · Accepted Answer · answered May 16 '16 at 01:20

3

You just need one function with 2 conditionals (if and else);

function togNav() {
  var nav = document.getElementById("nav");
  if (nav.style.width == '200px') {
    nav.style.width = '0';
    nav.style.opacity = 0;
  } else {
    nav.style.width = "200px";
    nav.style.opacity = 1;
  }
}

#nav {
  transition: opactity 3s ease-in;
  opacity: 0;
  cursor: pointer;
}

<p>Click under this paragraph</p>
<nav id="nav" onclick="togNav()" class="minimenubutton">
  <img src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" />
</nav>

answered May 16 '16 at 01:20

zer00ne

41,936
6
41
68

This worked perfectly. Thank you for the help and knowledge! – James Bray May 16 '16 at 01:26
1

One way to separate the CSS from the JS a little more here is to make the toggle code just add / remove CSS classes and define the style rules in those classes. – Taylor D. Edmiston May 16 '16 at 01:40
That's how I usually do it, but I think it was more important for OP to have a better grasp of what he's familiar with. – zer00ne May 16 '16 at 01:55
I don't like this approach... Basing your condition on an elements width seems "sketchy"... Doesn't take into account things like client screen sizes, zoom levels, accessibility settings. I would do something like adding/subtracting a CSS class to it on each click and setting the CSS for that class how you want. My $0.02. – Source Matters May 16 '16 at 01:56

score 2 · Answer 2 · answered May 16 '16 at 01:16

2

You can check css width of element using getComputedStyle(), toggle 0px, 200px; set overflow to hidden at #mySidenav css

#mySidenav {
  display: inline-block;
  width: 0px;
  position: relative;
  overflow: hidden;
}

<script>
  function toggleNav() {
    var el = document.getElementById("mySidenav");
    el.style.width = window.getComputedStyle(el).width === "0px" ? "200px" : "0px";
  }
</script>
<div id="mySidenav">side nav</div>
<div onclick="toggleNav()" class="minimenubutton">
  <img src="http://lorempixel.com/50/50/nature" />
</div>

answered May 16 '16 at 01:16

guest271314

1
15
104
177

Can you break down what the line "el.style.width = window.getComputedStyle(el).width === "0px" ? "200px" : "0px";" does for me? I know I'm not the guy who posted this question but I've been following it looking for an answer that isn't jquery. I'm trying to understand the javascript behind jquery better. If you have time that'd be great. Thanks! – James Hamann May 16 '16 at 01:21
@JamesHamann OP has not provided `html` of `#mySidenav` at Question. If `#mySidenav` `width` is set at `css`, and not at `style` attribute at element, checking for `element.style.width === 200px` or `0px` will not return expected result. `.getComputedStyle()` will return also styles set at `.css` file. `true ? //do stuff://else do other stuff` is ternary operator – guest271314 May 16 '16 at 01:24
Cool, good to know. So this last part of the line "=== "0px" ? "200px" : "0px";", does that toggle the widths? I'm just not sure how. What do the question mark and colon symbols do? Sorry so many questions – James Hamann May 16 '16 at 01:29
Yes, toggles either `"200px"` or `"0px"`. See http://stackoverflow.com/questions/6259982/how-to-use-the-ternary-operator-in-javascript , https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator – guest271314 May 16 '16 at 01:33
@JamesHamann See [12.14 Conditional Operator ( ? : )](https://tc39.github.io/ecma262/#sec-conditional-operator) – guest271314 May 16 '16 at 01:44

score 1 · Answer 3 · answered May 16 '16 at 03:25

You can also achieve this using checkbox + div if layout allows. Without Javascript at all.

input.toggler { display: none; }
input.toggler + label + div { display: none; }
input.toggler:checked + label + div { display: block; }

<input type=checkbox id=sometoggler class=toggler />
<label for=sometoggler>open/close</label>
<div>content to show / hide </div>

score 0 · Answer 4 · answered May 16 '16 at 01:13

function toggleNav() {
    var el = document.getElementById("mySidenav");
    if(el.style.width == "200px"){
        el.style.width = "0px";
    } else {
        el.style.width = "200px";
    }
}

<div onclick="toggleNav()" class="minimenubutton"><img src="images/menu.png"/></div>

DK_ · Answer 5 · 2016-05-16T01:38:35.037

-1

Just check the width of the element first. if the element has a width of 200px then set it to 0px, but if its not 200px it must be 0px; So set the width to 200px.

function togNav() {
    var e = document.getElementById("mySidenav");
    if (e.style.width == "200px") ? e.style.width = "0px" : e.style.width = "200px";
}

edited May 16 '16 at 01:38

answered May 16 '16 at 01:25

DK_

147
1
4
11

bad solution - too coupled. what if required height will change? I believe that Javascript should rule the logic , not the presentation. Presentation is for CSS. – Ilya Novojilov May 20 '16 at 09:03

Trying to Open/Close a div with one button

5 Answers5