[SOLVED] jquery auto open slide menu when page load

[mpempas]

Hello,

 

i have this code

 

jQuery(document).ready(function(){
jQuery(".btn-slide4").click(function(){
	jQuery("#panel4").slideToggle("slow");
	jQuery(this).toggleClass("active"); return false;
});


});

 

is a simple code when clicking on the tab ti expand and show more info... what im trying to do is be always open not only when im clicking.. and close only when i click on it.

 

Thank you

[gevans]

If you want it to slide open on page load, then allow for open/close try the following;

 

$(document).ready(function(){
$("#panel4").slideToggle("slow");
$(".btn-slide4").click(function(){
	$("#panel4").slideToggle("slow");
	$(this).toggleClass("active"); return false;
});
});

 

Same as yours, but with the slide running on page load before any other event.

[mpempas]

Perfect )) thank you very much

[gevans]

No worries, and just incase you didn't noticed (I'm sure you did) you don't need to write 'jQuery' everytime, you can use the dollar sign '$' in it's place!

[katsching]

hi

 

i have near the same wish, because of that i post in this old topic. i want also that my slidermenu is open when someone come on the side.

 

but when he move the mouse on an other point i want that the new category open and the other one close.

 

here is my code:

 

/*********************
//* jQuery Multi Level CSS Menu #2- By Dynamic Drive: http://www.dynamicdrive.com/
//* Last update: Nov 7th, 08': Limit # of queued animations to minmize animation stuttering
//* Menu avaiable at DD CSS Library: http://www.dynamicdrive.com/style/
*********************/

//Update: April 12th, 10: Fixed compat issue with jquery 1.4x

//Specify full URL to down and right arrow images (23 is padding-right to add to top level LIs with drop downs):
var arrowimages={down:['downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif']}

var jqueryslidemenu={

animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds

buildmenu:function(menuid, arrowsvar){
jQuery(document).ready(function($){		
	var $mainmenu=$("#"+menuid+">ul")
	var $headers=$mainmenu.find("ul").parent()
	$headers.each(function(i){
		var $curobj=$(this)
		var $subul=$(this).find('ul:eq(0)')
		this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
		this.istopheader=$curobj.parents("ul").length==1? true : false
		$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
		$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
			'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
			+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
			+ '" style="border:0;" />'
		)
		$curobj.hover(
			function(e){
				var $targetul=$(this).children("ul:eq(0)")
				this._offsets={left:$(this).offset().left, top:$(this).offset().top}
				var menuleft=this.istopheader? 0 : this._dimensions.w
				menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
				if ($targetul.queue().length<=1) //if 1 or less queued animations
					$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
			},
			function(e){
				var $targetul=$(this).children("ul:eq(0)")
				$targetul.slideUp(jqueryslidemenu.animateduration.out)
			}
		) //end hover
		$curobj.click(function(){
			$(this).children("ul:eq(0)").hide()
		})
	}) //end $headers.each()
	$mainmenu.find("ul").css({display:'none', visibility:'visible'})
}) //end document.ready
}
}

//build menu with ID="myslidemenu" on page:
jqueryslidemenu.buildmenu("myslidemenu", arrowimages)

 

thanks for your help and greets from switzerland.

 

markus

[Maq]

katsching, please start a fresh thread.  This one is nearly 2 years old.