Stuck with my 'replicating project' and need for help :)

Stuck with my 'replicating project' and need for help :)
0

#1

Hi Everyone! I’ve tried to replicate Paypal’s navbar with slidling panels as an excercise.
Things went rather good but I’ve encountered a problem I can’t solve. I want have the arrow down and up behaviour exactly as it is on original Paypal page - when you click on it, panel below it goes down and arrow rotate and slowly turn up. After you click again the same process is triggered but in opposite directions. The problem is that my arrows only goes up in that elegant smooth way but when you click (toggle to ‘closed’ class) again with intention to force the arrow to go down … it will ignore you … why ?
I’ll be grateful for some suggestions, asked about it on stackOverflow but with no great success.

Link to my Pen on Codepen

Link to post on StackOverflow:


#2

By not having a “closed” class on your navbar, you are toggling the classes “open closed” together; this way, they will be added (and removed) at the same time. To have the effect you want, you can remove the closed class completely, give a starting transform to the <i> (which will be 0deg) and only toggle the open class.

JS

$('nav').toggleClass('open');

CSS

nav #headerp i {
  transform:rotate(0deg);
  transition-duration:0.5s;
}
nav.open #headerp i{
  transform:rotate(-180deg);
}

Or, if you want to mantain your closed class, you need to give it a 0deg starting point and include it your navbar.

CSS

nav.closed #headerp i{
  transform:rotate(0deg);
  transition-duration:2s;
}

HTML

<nav class="navbar closed">

Otherwise, as I said above, the toggleClass will add the “open closed” classes together.


#3

Thank you very much for this answer. As I understand correctly toggleClass(x y) doesn’t toggle between classes x and y but take it both and toggle them as if they were in one box or bag … in other words it treats them as one group ?


#4

I modified the answer a bit (and then the forum went down for maintenance). The method .toggleClass() does what you think it does, but for it to function correctly one of the two classes (in your case “closed”) must be already in the navbar, otherwise .toggleClass('open closed') will not find any classes to toggle initially and it will toggle them both.


#5

I get it ! I also modified my comment before (maintenace-forum-issue) but for now I think It’s clear for me how this method works.Again -thanks for made it understandable :slight_smile:


#6

Hi Everyone,
I modified my code a little and I’ve encountered another problem. How to force that two arrows not to have the same direction at the same time (it happens when you click first on first arrow and then on second - they are both ‘arrows up’ then). I’ve tried to remove and add Classes and using if-else statement and even tried put it all to the for-loop but nothing but frustration I’ve received. They should shift (one up and one down) as on the original Paypal navbar .
Thanks in advance :slight_smile:


#7

Hi my name is Shelton Louis I’m having trouble with the challenges Manage Packages with npm challenge the newest version wont install and there was something wrong with the other challenges to https://ide.c9.io/codebreaker10/npm#openfile-README.md