Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Ashish Mehra
Ashish Mehra
Courses Plus Student 589 Points

any solution ?

hey check out my code here http://codepen.io/mehra_as/pen/BjVVaj

problem : when i click on show button the menu appear & by making click again on show button menu disappearing but after that code doesn't working....!

thanx for helping!

2 Answers

Andrew Kiernan
Andrew Kiernan
26,892 Points
Andrew Kiernan
Andrew Kiernan
26,892 Points

Sure, the use of ? is called a ternary expression. It is basically a shorthand for an if statement. If the statement before the ? is true, then the function before the : is called (in this case, it is close()), otherwise the function after the : is called (which would be menu()). The toggle function could be rewritten as:

function toggle() {
  if (isOpen) {           // If the menu is currently open
    return close();       // we close it here (which also sets isOpen to false).
  } else {                // Otherwise
    return menu();        // we open the menu (and set isOpen to true).
  }
}

The toggle function gets set to the onclick property, so it gets called every time the button is clicked, and each time it checks to see if the isOpen flag is true or false, which tells you if the menu is open or closed, then it calls the appropriate function to open or close the menu depending on its current state. In the menu and close functions, you set isOpen to the appropriate state, which allows toggle to work correctly.

I hope that clears things up.

-Andrew

Ashish Mehra
Ashish Mehra
Courses Plus Student 589 Points

thanx for your reply

Andrew Kiernan
Andrew Kiernan
26,892 Points
Andrew Kiernan
Andrew Kiernan
26,892 Points

Hey Ashish,

The onclick property only allows one event handler at a time, so when you trigger the menu handler, you set the onclick property to close and then it is never set to anything else, so any time you click the button after that initial opening of the menu you are calling close over and over.

To fix this, you can use a boolean flag, such as isOpen and set the onclick property to a toggle function that will call the appropriate function depending on if the menu is open or not:

var show = document.querySelector("button");
var isOpen = false;
show.onclick = toggle;

function toggle() {
  return isOpen ? close() : menu();
}

function menu(){
  isOpen = true;
  document.querySelector("section").style.transform = "translateX(150px)";
}

function close(){
  isOpen = false;
  document.querySelector("section").style.transform = "translateX(0px)";
}

Hope that helps! If you have any questions, just let me know.

-Andrew

Ashish Mehra
Ashish Mehra
Courses Plus Student 589 Points

can u please exaplain me function toggle