How to slideToggle both these elements

The audio player is a module rather than element, but I guess still considered an element. I have tried many times to get them to slideToggle at same time when hidden, but only the search bar works. Here are the codes to both

$(document).keypress(function(e){
    var key = e.which;
    if (key == 43) {
        // if the user pressed '+':
        $('.swrapper').slideToggle(400).add('#search').focus();
    }
});

$(document).keypress(function(e) {
  if (key == 43) {
    $('.audio-player-container').slideToggle(); 
  }
});

I don’t know how else to make it work out.

You don’t define the variable key in the second keypress function - did you get console errors when trying this? Combining the functions…

$(document).keypress(function(e){
    var key = e.which;
    if (key == 43) {
        // if the user pressed '+':
        $('.swrapper').slideToggle(400).add('#search').focus();
        $('.audio-player-container').slideToggle(); 
    }
});
1 Like

@RyanReese hi. By defining key, what do you mean? I’ve not checked the console, so I don’t know.

Look at my post where I quote the second keypress function.

$(document).keypress(function(e) {
  if (key == 43) {
    $('.audio-player-container').slideToggle(); 
  }
});

Your first reference to key is in the IF statement. You haven’t defined it :slight_smile: . You did in the FIRST document keypress function, but not the second.

To check the console, hit CTRL+Shift+I, or right click → Inspect Element.

There’s a console tab. It shows Javascript errors :slight_smile: .

Ok, you’re saying the if statement hasn’t been defined :slight_smile:

The key variable wasn’t defined that you USED in the IF statement, to clarify :slight_smile:

Still not seeing what I missed out. What should’ve been there, and what did I have?

You should have added var key = e.which;

I’m curious, are you a newer developer? And/or is English not your first language? I feel like I’m repeating myself but perhaps I’m not being clear enough :slight_smile: .

You’re using a variable (the key) variable) which you haven’t defined.

$(document).keypress(function(e) {
  if (key == 43) {
    $('.audio-player-container').slideToggle(); 
  }
});

Add in that line of code

$(document).keypress(function(e) {
  var key = e.which;
  if (key == 43) {
    $('.audio-player-container').slideToggle(); 
  }
});

Or combine both keypress functions (probably smarter) and look at post #2 in this thread to see what that looks like.

1 Like

Lol I do speak English yes. I am new to JS I must say :slight_smile: . I just tried out the code. The search bar comes up, but still without the audio player. I wonder if bottom: -0.2em; is causing the issue…

1 Like

If you can get an example to us showing the issue (codepen?) then that’d be great. The obvious issue was the variable missing, but perhaps there are other factors at play here :slight_smile: .

I wonder if bottom: -0.2em; is causing the issue…

Doubtful :slight_smile: .

I will try… :slight_smile:

1 Like

Ok here’s a codepen. If it ever shows up that is…

Oh, er… I didn’t add your code to the pen here, but on my webpage. So if you’d like I can link you to my page, or just share the code relevant to my prob. Unless it makes no difference.

You don’t have a class of audio-player-container its an ID but your js is placing it in the shadow dom so I don’t think you can get hold of it that easily.

You need to target the audio-player element which is where all that template code gets dumped when the media js is run.

You also need jquery added to your demo to make it work.

The swrapper html and css should not really be in the template either.

That leaves us with this.

If you wanted the whole swrapper to go then target that instead of the audio player in the js.

1 Like

If you wanted the whole swrapper to go then target that instead of the audio player in the js.

would that then hide the audio player as well? It is an id, yes. I had forgotten to fix that up.

Your codepen works fine, but when I put it all in mine, it won’t do anything…

Yes because its inside.

However if you want it to slide down and not just disappear you need to change the position of the audio player so that its placed from within the swrapper now. The fixed would need to be absolute.

e.g.

Now the audio-player is hidden with the slide effect.

Yes because its inside.

However if you want it to slide down and not just disappear you need to change the position of the audio player so that its placed from within the swrapper now. The fixed positioned audio-player-container would need to be position:absolute and not fixed.

e.g.

Now the audio-player is hidden with the slide effect.

1 Like

I’m assuming that this

console.log(key);

says that I have pressed a key to hide the search bar and player