jQuery onClick div split

[Anonymous]

http://codepen.io/anon/pen/Jcmkx

As you can see, this doesn’t work properly.
When I press the upper part to open I need to press the bottom one twice for it to work.
It’s kind of hard to explain, but the example is very clear.
I basically want the div top split into two parts ( or have two separate divs that look like they are one).

The site that it’s going to be used on looks like this right now, but from the start it looked like this.
Then the client decided that they didn’t want to display two persons from the start since all the people at the company has the same “rank”, so they asked me to hide the first two.
They are happy with the way it looks now, but I’m not.
I’d like to solve it in a different way, and this solution was one of the first ones that popped into my mind.
If you have any other solution that looks nice, feel free to leave a suggestion!

[kgscott284]

The issue is, toggle() will count even and odd clicks to trigger an event…but that count is PER element, regardless of if you are triggering the same element…In other words, when you click the top one, the counter is set to 1 and thus opens the form, you click it again, it goes to 0 thus closing the form….however, when you click the top one the counter for the bottom trigger remains at zero, so it thinks the form is still closed, so you need to click it once to get it to the open state, then once again for it to actually close the form…

[Senff]

I think that what it does here, is that the toggle state for both the top and bottom are initially “closed”.

Now when you click on the top one, the toggle state for that one will be “open”, but for the bottom one it’s still “closed” — even though they share the same class. So in order to close it by clicking on the bottom one, you’ll have to click twice; one to set its toggle state to “open” (nothing will happen because the people div is already open), and another one to set it back to “close”, at which point the people div will collapse again.

In short — both the top and bottom have their own the toggle states “open” and “close”. It’s not like all elements with class “showmore” will share that toggle state.

[Senff]

@kgscott284 beating me to the punch once again!

[kgscott284]

@Senff ;) POW!

[Anonymous]

Thanks for the replies, and that was the part I figured out myself, only that my english stopped me from expressing it ;)
Now I just need some help to solve it.

[Anonymous]

Bump :/

[Anonymous]

I think I know how to solve this…
If I create two classes, closed and open, and set an if function that says:
onClick, if element has a class of open, removeClass open and addClass Closed.
But since I kind of suck at jQuery I would love to get some help! :)

[Anonymous]

Update: Tried to solve it like this, however it didn’t work, and I don’t know why.
http://codepen.io/anon/pen/tndxj

[Author]

Posts