Grow your CSS skills. Land your dream job.

jQuery onClick div split

  • # September 6, 2012 at 3:46 pm

    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!

    # September 6, 2012 at 4:36 pm

    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…

    # September 6, 2012 at 4:42 pm

    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.

    # September 6, 2012 at 4:43 pm

    @kgscott284 beating me to the punch once again!

    # September 6, 2012 at 4:57 pm

    @Senff ;) POW!

    # September 7, 2012 at 1:37 am

    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.

    # September 9, 2012 at 6:08 am

    Bump :/

    # September 9, 2012 at 3:52 pm

    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! :)

    # September 10, 2012 at 11:33 am

    Update: Tried to solve it like this, however it didn’t work, and I don’t know why.

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

    # September 10, 2012 at 12:01 pm

    @LimeX, you are almost there! change it to -

    if ( closed ) {
    $(‘#people’).removeClass(‘closed’).addClass(‘open’);
    } else {
    $(‘#people’).removeClass(‘open’).addClass(‘closed’);
    }

    The reason for this is because in the if statement you are checking if the div element has the class closed. If it does, remove it and show open, if it doesn’t show closed.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".