JavaScript Forum

**empiresolutions** · 07-16-2011, 08:49 AM

Howdy Community,

I have spent the past 4 hours strait looking for and trying to modify an accordion style vertical menu who's elements slide out of the top and up instead of the normal slide out of the bottom and down action.

I would like it in jQuery, but at this point I will take any library. Thanks for your help. I know some have wondered "What have you tried making work".. jQuery Tools, Jquery UI and about 3 other scripts that looked updateable. All I couldn't get to work.

I also made an attempt to fake an accordion using show/hide toggles and this sorta worked, but it didnt have the nice slide as well as my data didnt move on page in the right direction. Headache!!!

Help!! Thanks, Cesar

**chrishirst** · 07-16-2011, 09:14 AM

Best of luck with that! You are trying to defeat the natural behaviour of HTML element expansion, where the intersect of the left edge and the top edge is the starting point (0,0) for all movement and positioning.

**empiresolutions** · 07-16-2011, 10:09 AM

@chrishirst - what sucks is that if you say no way its probably true. feeling defeated...

**empiresolutions** · 07-17-2011, 04:32 AM

SOLVED!

Specials Thanks to @tfburges from codingforums.com

Code:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
        <style type="text/css">
            .UpMenus {
                position:absolute;
                bottom:50%;
                left:50%;
                width:102px;
                height:126px;
                margin:63px 0px 0px -50px;
                padding:0px;
                border:0px;
                border-bottom:1px solid #00f;
                list-style-type:none;
                overflow:visible;
            }
            .UpMenus li {
                position:relative;
                float:left;
                width:100px;
                height:16px;
                padding:2px 0px;
                border:1px solid #00f;
                border-bottom:0px;
                background:#fff;
                font:normal 12px sans-serif;
                text-align:center;
                overflow:visible;
                cursor:pointer;
                cursor:hand;
            }
            .UpMenus li:hover {
                background:#00f;
                color:#fff;
            }
            .UpMenus li ol {
                position:absolute;
                bottom:21px;
                width:98px;
                height:0px;
                margin:0px;
                padding:0px;
                border:1px solid #00f;
                border-top:0px;
                border-bottom:0px;
                list-style-type:none;
                overflow:hidden;
            }
            .UpMenus li ol.Up {
                border-top:1px solid #00f;
            }
            .UpMenus li ol li {
                color:#000;
                border:0px;
                border-bottom:1px solid #99f;
            }
            .UpMenus li ol li:hover {
                background:#99f;
                color:#fff;
            }
        </style>
        <script type="text/javascript">
            $(function(){
                $('.UpMenus > li').click(function(){
                    var ol = $(this).children('ol');
                    var h = ol.height()?0:ol.children('li').length*21;
                    var d = 0;
                    ol.parent().parent().children('li').each(function(){
                        if (d) {
                            $(this).children('ol').animate({height:'0px'},800,function(){$(this).removeClass('Up');});
                            $(this).animate({top:'0px'},800);
                        } else if (!$(this).is(ol.parent())) {
                            $(this).children('ol').animate({height:'0px'},800,function(){$(this).removeClass('Up');});
                            $(this).animate({top:(h?-h:'0')+'px'},800);
                        } else {
                            if (h) ol.addClass('Up');
                            ol.animate({height:h+'px'},800);
                            $(this).animate({top:'0px'},800,function(){if(!h){ol.removeClass('Up')}});
                            d = 1;
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
        <ul class="UpMenus">
            <li>
                Menu 1
                <ol>
                    <li>Sub 1 for Menu 1</li>
                    <li>Sub 2 for Menu 1</li>
                </ol>
            </li>
            <li>
                Menu 2
                <ol>
                    <li>Sub 1 for Menu 2</li>
                    <li>Sub 2 for Menu 2</li>
                    <li>Sub 3 for Menu 2</li>
                    <li>Sub 4 for Menu 2</li>
                </ol>
            </li>
            <li>
                Menu 3
                <ol>
                    <li>Sub 1 for Menu 3</li>
                    <li>Sub 2 for Menu 3</li>
                    <li>Sub 3 for Menu 3</li>
                </ol>
            </li>
            <li>
                Menu 4
                <ol>
                    <li>Sub 1 for Menu 4</li>
                    <li>Sub 2 for Menu 4</li>
                    <li>Sub 3 for Menu 4</li>
                    <li>Sub 4 for Menu 4</li>
                    <li>Sub 5 for Menu 4</li>
                </ol>
            </li>
            <li>
                Menu 5
                <ol>
                    <li>Sub 1 for Menu 5</li>
                    <li>Sub 2 for Menu 5</li>
                    <li>Sub 3 for Menu 5</li>
                    <li>Sub 4 for Menu 5</li>
                    <li>Sub 5 for Menu 5</li>
                    <li>Sub 6 for Menu 5</li>
                    <li>Sub 7 for Menu 5</li>
                </ol>
            </li>
            <li>
                Menu 6
                <ol>
                    <li>Sub 1 for Menu 6</li>
                    <li>Sub 2 for Menu 6</li>
                </ol>
            </li>
        </ul>
    </body>
</html>

**chrishirst** · 07-17-2011, 08:47 AM

I shall now be eating a large slice of humble pie for lunch.

well either that or play this http://www.youtube.com/watch?v=ZyKN8OzzO8s

And kudos to tfburges for solving it.

**chrishirst** · 07-17-2011, 08:50 AM

For future reference the solution thread is here.