SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2006
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problem with jquery toggle

    I have found this piece of code the works for a jquery slide up toggle. This issue I'm having is that when I click for it to slide up it does so but it appears that it's coming from below the coltab div. I'd appreciate if you could help me with a solution.

    Code:
    <style>
    body { margin: 400px 50px; }
    
    #coltab { position: relative; text-align: center;
    height:370px;}
    
    #coltab > li {
        background: #ccc;
        color: #444;
        cursor: pointer;
        display: block;
        float: left;
        margin: 0 10px;
        padding: 10px 20px;
        position: relative;
        width:260px;
        height:50px;
    }
    
    #coltab span {
        background: #eee;
        color: #222;
        display: none;
        padding: 5px;
        width:290px;
        height:200px;
        position: absolute;
        left: 0;
        right; 0;
        top: 0;
        z-index: -1;
    }
    
    #coltab span.open { display: block; }
    
    </style>
    
    <head>
    
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"> </script>
    
    </head>
    
    <body>
    
    
    
    <div id="coltab">
        <li>Item 1<br/>(click me)
                <span>This first item needs to toggle up</span>
        </li>
    </div>
    
    <script>
    $(document).ready(function() {
    $("#coltab li span").each(function (index) {
      $(this).data('height', $(this).outerHeight());    
    });
    
    $("#coltab li").click(function () {
    
        $("#coltab li span.open").animate({"top": 0}, function () {
            $(this).removeClass('open');  
        });
    
        var itemHeight = $(this).children('span').data('height');
        $(this).find('span:not(.open)').animate({"top": -itemHeight}).addClass('open');
    
    });
    });
    </script>
    </body>

  2. #2
    SitePoint Addict bronze trophy
    Join Date
    Sep 2005
    Posts
    323
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    What exactly do you want it to do? I don't think you specified the solution you want to get.

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2006
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the problem I am having is that when I click 'Item 1' the toggle slides up, however the slide appears to be coming from uderneath the div called coltab and you can see it sliding from below the div upwards. Is it possible to eliminate this problem by making it slide without this issue.

  4. #4
    SitePoint Zealot
    Join Date
    Nov 2006
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    still stuck with this issue. has anyone any ideas on how I might solve this. thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •