"Node.js Basics 2017" was retired on September 1, 2022. You are now viewing the recommended replacement.

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

Posted by Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

jQuery -> slideToggle()

Hi guys,

I have a quick question regarding the slideToggle() function of jQuery:

Looking through the API it is possible to run a function when the animation completes, but I was trying to do something in reverse -> run a function before the animation starts.

My question is how to do it?

I would like to run .css() before the animation and change some CSS values before the animation starts.

Any help would be really helpful :)

Sergio Alen
Sergio Alen
26,726 Points

depends on the animation i guess? can you be more specific?

Jeremy Germenis
Jeremy Germenis
29,854 Points

How are you calling the slideToggle? onClick, ect...

miguelcastro2
miguelcastro2
Courses Plus Student 6,573 Points

The API supports callbacks for when the slideToggle() starts and completes. Listed in the .slideToggle( options ) section. Here is an example:

$('a.btn').slideToggle({
    start: function () {
      alert("Starting");
  },
    complete: function () {
      alert("Completed");
  }
});
Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

@Sergio Alen -> I want to use .css() before the animation starts to change back the css properties of the selected object.

Jeremy Germenis -> I'm using .click()

2 Answers

Jeremy Germenis
Jeremy Germenis
29,854 Points

toggleClass() is what you need then. http://api.jquery.com/toggleclass/

Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

And that my friend is the right answer:)

Didn't see this API doc. Thank you!

Jeremy Germenis
Jeremy Germenis
29,854 Points
Jeremy Germenis
Jeremy Germenis
29,854 Points

if you are trying to target the element you are toggling you can:

$( "#id" ).click(function() {

$('.slideMe').css('background','red').slideToggle();

});

if you are targeting something other than the element your are toggling you can:

$( "#id" ).click(function() {

$('.somethingElse').css('background','red');

$('.slideMe').slideToggle();

});

Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

Jeremy Germenis -> Thanks for taking the time to reply.

But I wrote that code before I asked the question here.

$(".lang-btn").click(function(){
   $(this).css({
       'border-bottom-left-radius': '0',
       'border-bottom-right-radius': '0'
    });
   $(".lang-list").slideToggle("slow"); 
});

This is my js code. As you can see when you click the button the bottom borders change on it and the list is slideToggled (initial value of the list is "display:none"). When you click it the second time it slides back up and hides but the border values are not changed.

It want it to slide back up on the second click and then the border would change to the previous value.