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! While you're at it, check out some resources Treehouse students have shared here.

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 jQuery Basics (2014) Creating a Simple Drawing Application Perform: Part 2

Posted by webdesignertroy
.a{fill-rule:evenodd;}techdegree seal-36
webdesignertroy
Front End Web Development Techdegree Graduate 14,718 Points

.toggle() is now deprecated. What's its replacement?

toggle() is now Deprecated (See Deprecated 1.8). I'm still going to use it for this exercise. But, what's its replacement for later projects?

3 Answers

Rossella Rosin
Rossella Rosin
15,734 Points
Rossella Rosin
Rossella Rosin
15,734 Points

The toggle() used in the video is not deprecated. Refer to api.jquery.com. The api gives 2 pages for toggle():

this: http://api.jquery.com/toggle/ in Effects > Basics, which is the one used in this course

and this: http://api.jquery.com/toggle-event/ in Effects > Mouse Events

the second one is deprecated , the first one isn't. Idan Melamed is right. This is not an opinion.

Your solution works, but the official solution is simpler and better because it doesn't require adding extra css code. This is an opinion.

webdesignertroy
.a{fill-rule:evenodd;}techdegree seal-36
webdesignertroy
Front End Web Development Techdegree Graduate 14,718 Points

You're correct. After finishing my JavaScript projects I came upon better ways to research. For jQuery searches, its better to add "()" after the method name in order to tally a more complete list of answers (i.e., "toggle() instead of just toggle"). Sorry Idan.

Idan Melamed
Idan Melamed
16,285 Points
Idan Melamed
Idan Melamed
16,285 Points

I think .toggle is not deprecated, just changed.

It used to do this: "Bind two or more handlers to the matched elements, to be executed on alternate clicks."

Now it just hides or shows en element.

webdesignertroy
.a{fill-rule:evenodd;}techdegree seal-36
webdesignertroy
Front End Web Development Techdegree Graduate 14,718 Points

It's deprecated and on its way out for sure. Refer to api.jquery.com. This does not mean that you still can't use it. However, (on its face) it's being phased out. This is not an opinion.

webdesignertroy
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
webdesignertroy
Front End Web Development Techdegree Graduate 14,718 Points
webdesignertroy
.a{fill-rule:evenodd;}techdegree seal-36
webdesignertroy
Front End Web Development Techdegree Graduate 14,718 Points

I answered my own question. We now use toggleClass(). I changed the HTML, CSS and the JS in the following manner:

HTML- I added a new class toggleColorSelect to the #colorSelect block--

<div id="colorSelect" class="toggleColorSelect">
    <span id="newColor"></span>
    <div class="sliders">

CSS - I added display: none property and value to my new class while commenting it out of #colorSelect--

.toggleColorSelect{
  display: none;
}

JS - I replaced toggle() with toggleClass and targeted the new class I created within toggleClass()--

//When "new color" is pressed
$("#revealColorSelect").click(function(){
  //Show color select or hide the color select
  changeColor();
  $("#colorSelect").toggleClass("toggleColorSelect");  //change from toggle() [deprecated] to toggleClass()
});

I'm not sure if this is the most economical way, but it worked for me.