Grow your CSS skills. Land your dream job.

Slide Up upon clicking on another item?

  • # March 16, 2013 at 7:25 pm

    Hi There,
    Currently when a use clicks on a h1 the slide down happens. If you click on another, first item clicked will stay open. I am trying to get the first item to slide up upon clicking on another so there is only one slide down function open at a time.

    Also having another issue where the there is supposed to be a fade-in-out upon hover over which is not working.. not a big deal though.

    [ jamilopitts.com/kirby](http://www.jamilopitts.com/kriby “fonts”)

    here is what i’m using now.

    $(‘article p, article .font-btns’).hide();
    $(‘article h1′).addClass(‘pointer’).click(function() {
    var $article = $(this).parent(),
    $siblings = $(this).siblings();
    if ($article.hasClass(‘expanded’)) {
    $siblings.slideToggle(‘slow’).promise().done(function() {
    $article.removeClass(‘expanded’);
    });
    } else {
    $article.addClass(‘expanded’);
    $siblings.slideToggle(‘slow’);
    }
    });

    # March 17, 2013 at 7:27 pm

    anybody?

    # March 17, 2013 at 8:02 pm

    @wragen22 To have only one `article` shown at a time, you need to close all the other `articles` before opening the one the user clicked on. Here’s an example to help you: http://codepen.io/srig99/full/ajqlp. Also, I don’t quite understand your second question.

    > Also having another issue where the there is supposed to be a fade-in-out upon hover over which is not working.. not a big deal though.

    Can you tell us on which element this effect is supposed to happen on? Can you provide more information about it?

    # March 17, 2013 at 11:58 pm

    Thanks @srig99. Upon hovering on and off the h1’s there should be a but nothing happens.

    @include transition (background 0.2s ease-in-out)

    can you explain the portion of the code in which cause the originally opened to close?

    # March 19, 2013 at 4:12 pm

    any idea @srig99 ?

    # March 19, 2013 at 6:09 pm

    @wragen22 Sorry for the late reply. I tried searching the transition that you provided but it is non-existent (atleast for the `h1’s`). However, I did find them in the following selector: `.main-nav a:hover`. I added comments to the code I originally posted: http://codepen.io/srig99/pen/ajqlp. Basically, I hide all the other `button` and `p` elements before opening the ones that are the children of the currently selected `h1`.

    # March 20, 2013 at 9:18 am

    It’s now just a matter of styling: http://codepen.io/rthor/details/bcHCk

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

You must be logged in to reply to this topic.

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