hi,
$(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.
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.
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>
thanks for your reply, finally worked it out