Search code examples
jquerycsslayoutslidetoggle

CSS challenge: jQuery's slideDown-like on a specific particular layout

I'm looking for a classic jQuery's slideDown-like, but I can't find a solution that suits the layout I need:

Expected output

When a red corner gets clicked, I need the corresponding orange box to appear in a jQuery's slideDown way. The red corner must slides down too with the orange box, just as if it were not fastened to the yellow box, but rather with the orange one. Thus, where the red corner initially was, the background gets actually orange as well, to emphasize the effect. Of course, when a red corner gets re-clicked, the orange box must slides up, and the red corner fits its original location back (toggle-like).

I tried some tricks using z-index, overflow:hidden, etc., but I have to admit that I'm totally stuck with this CSS technical challenge...

Here is a fiddle you can play with ;)

Solution

  • Add a wrapper for the bottom section of the box that contains the toggle and the message, set the height of the wrapper to the height of the toggle, then position the message below that out of view. Then, add another div to be the orange triangle to the li so that it will be behind the red triangle and message box. Finally, on click, simply animate toggle the height and bottom position of the wrapper.

    html:

    <ul>
    <li><div class="triangle"></div><div class="pop"><div class="toggle"></div><div class="orange">Hello World!</div></div></li>
    ...

    javascript:

    $('.toggle').click(function() {
    $parent = $(this).parent();
    if ($parent.data("flag")) {
        $parent.data("flag",false);
        $parent.animate({height:"30px",bottom:"0"});
    }
    else {
        $parent.data("flag",true);
        $parent.animate({height:"90px",bottom:"-60px"});
    }
});

    css:

    .pop {
    width: 100px;
    height: 30px;
    position: absolute;
    bottom: 0;
    overflow: hidden;
    z-index: 99;
}
.toggle {
    position: absolute;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 0 30px 30px;
    border-color: transparent transparent red transparent;
    bottom: 0;
    right: 0;
    cursor: pointer;
    z-index: 99;
}
.triangle {
    position: absolute;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 0 30px 30px;
    border-color: transparent transparent orange transparent;
    bottom: 0;
    right: 0;
    cursor: pointer;
    z-index: 99;
}
.orange {
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: orange;
}

    Fiddle: http://jsfiddle.net/qdc7n/2/