SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question closing all tabs in jquery accordian

    hi,

    Code:
    $(document).ready(function() {
       $('#va-accordion .va-content').hide();
       $('.va-slice').click(function(){
               $('#va-accordion .va-content').slideUp();
               $(this).parent().next().slideDown();
               return false;
       });
    
    });
    Not sure how to fix the above code so that when you click on welcome it slides down click on it again, it slides back up and closes, here is the link. At present it bounces.
    Any explanation appreciated.

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    South Africa
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi there it would look as though this code slides it up and then down.
    So when it is up you wont see the slide up but you will see the slide down.
    and when it is down it slides up and then down again.

    is there no way you can check the position before initiating the slide,... if up slide down, if down slide up??

    cant say exactly how because i rarely use jquery because i prefer the old fashioned javascript.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    South Africa
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    maybe this will help:
    ?!

    <html>
    <head>
    <title>Untitled Page</title>
    <script type="text/javascript">
    function slideopen(me_id)
    {
    var me_obj = document.getElementById(me_id);
    var me_height = parseInt(me_obj.style.height);
    me_height = me_height + 5;
    me_obj.style.height = me_height + "px";

    if(me_height >= 400)
    {
    busy_sliding = false;
    clearInterval(timer_id_open);
    }
    }
    function slideclosed(me_id)
    {
    var me_obj = document.getElementById(me_id);
    var me_height = parseInt(me_obj.style.height);
    me_height = me_height - 5;
    me_obj.style.height = me_height + "px";

    if(me_height <= 40)
    {
    busy_sliding = false;
    clearInterval(timer_id_close);
    }
    }
    var busy_sliding = false;
    var timer_id_open;
    var timer_id_close;
    function start_slide(me_id)
    {
    var me_obj = document.getElementById(me_id);
    var me_height = parseInt(me_obj.style.height);

    if(busy_sliding == false)
    {
    slide_everyone_else(me_id);
    if(me_height == 40)
    {
    busy_sliding = true;
    timer_id_open = self.setInterval("slideopen('" + me_id + "')", 10);
    }
    else
    {
    busy_sliding = true;
    timer_id_close = self.setInterval("slideclosed('" + me_id + "')", 10);
    }
    }
    }
    function slide_everyone_else(me_id)
    {
    var me_obj = document.getElementById(me_id);
    var me_height = parseInt(me_obj.style.height);
    var me_top = parseInt(me_obj.style.top);

    var div_elems=document.getElementsByTagName("div");

    for(var i = 0; i < div_elems.length; i++)
    {
    var tempstr = div_elems[i].id;
    if(tempstr.search('_') == -1)
    {
    if((div_elems[i].id != me_id)&&(div_elems[i].id != ""))
    {
    var obj = document.getElementById(tempstr);
    var height = parseInt(obj.style.height);
    var top = parseInt(obj.style.top);

    if(height == 400)
    {
    //alert(div_elems[i].id);
    timer_id_close = self.setInterval("slideclosed('" + tempstr + "')", 10);
    }
    }
    }
    }
    }

    </script>
    </head>
    <body>
    <form id="form1" runat="server">
    <div id="DIV1" style="overflow:hidden; border: 1pt solid black; width:400px; height: 40px; background-color:Yellow; position: relative;" onclick="start_slide(this.id);">
    <div id="DIV1_title" style="top:0px; left:0px;">
    <font size="6" >Heading 1</font>
    </div>
    <div id="DIV1_content">
    lakab balbjalkjsf a oifasdfklj asdkf lakab bal lakab balbjalkjsf a oifasdfklj asdkf lakab bal lakab balbjalkjsf a oifasdfklj asdkf lakab bal
    </div>
    </div>
    <div id="DIV2" style="overflow:hidden; border: 1pt solid black; width:400px; height: 40px; background-color:Orange; position: relative;" onclick="start_slide(this.id);">
    <div id="DIV2_title" style="top:0px; left:0px;">
    <font size="6">Heading 2</font>
    </div>
    <div id="DIV2_content">
    lakab balbjalkjsf a oifasdfklj asdkf lakab balbjalkjsf a oifasdfklj asdkfasdof asdof lakab balbjalkjsf a oifasdfklj asdkfasdof
    </div>
    </div>
    <div id="DIV3" style="overflow:hidden; border: 1pt solid black; width:400px; height: 40px; background-color:Red; position: relative;" onclick="start_slide(this.id);">
    <div id="DIV3_title" style="top:0px; left:0px;">
    <font size="6">Heading 3</font>
    </div>
    <div id="DIV3_content">
    blakab balbjalkjsf a oifasdfklj asdkfas lakab balbjalkjsf a oifasdfklj asdkf lakab bal lakab balbjalkjsf a oifasdfklj asdkf lakab bal dof
    </div>
    </div>
    </form>
    </body>
    </html>

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for your reply, finally worked it out


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
  •