Toggle en position fermé par défaut

Résolu

jp.bond Messages postés 8 Statut Membre -
jp.bond Messages postés 8 Statut Membre - 9 janv. 2013 à 11:05

Bonjour,

j'etais à la recherche d'un moyen de faire un toggle et j'ai trouvé une source qui me convenait parfaitement ici : http://mbox.tuxfamily.org/toggle/
tout fonctionne, c'est assez simple, il y a juste un point que je n'arrive pas à faire : faire en sorte qu'à l'ouverture de ma page le toggle soit en position fermé ou replié par défaut (et pas ouvert comme dans l'exemple) mais je ne suis pas assez calé en javascript pour comprendre ce code.

Pouvez vous m'aider ?
pour gagner du temps, je remets le code complet de la page exemple ci dessous :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<style type="text/css">
			.toggleTitle{
				width:450px;
				height:36px;
				line-height:36px;
				padding-left:50px;
				display:block;
				color:#FFFFFF;
				font-size:16px;
				font-weight:bold;
				font-family:Verdana;
				text-decoration:none;
			}
			.open{
				background:url('background.png') top no-repeat;
			}
			.close{
				background:url('background.png') 0px -36px no-repeat;
			}
			.toggleTop{
				width:500px;
				height:4px;
				line-height:4px;
				display:block;
				background:url('top.png');
				margin-top:4px;
			}
			.toggleBottom{
				width:500px;
				height:5px;
				line-height:5px;
				display:block;
				background:url('bottom.png');
			}
			.contentToggle{
				width:590px;
				padding:5px;
				background:url('content.png') repeat-y;
			}
			.toggle{
				overflow:hidden;
			}
		</style>
		
		<script type="text/javascript">
			function getElementsByClassName(className, tag, elm){
				var testClass = new RegExp("(^|s)" + className + "(s|$)");
				var tag = tag || "*";
				var elm = elm || document;
				var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
				var returnElements = [];
				var current;
				var length = elements.length;
				for(var i=0; i<length; i++){
					current = elements[i ];
					if(testClass.test(current.className)){
						returnElements.push(current);
					}
				}
				return returnElements;
			};
			
			var Toggle = {
			    create: function(target) {
			        return {
			            id: "no name",
			            orientation: "vertical",
						myObject : target,
			            min: 0,
			            max: target.offsetHeight,
			            speed: 350,
						isOpen : true,
			            move: function(titleChange) {
							if(this.myObject.testTime == null){
								start = (this.isOpen) ? this.max:this.min;
								end = (this.isOpen) ? this.min:this.max;
				                c = (350 / 50);
				                d = Math.round(this.speed / c);
				                w = new Array();
								this.myObject.currentStepX = 0;
								this.myObject.testTime = null;
				                for (var i = 1; i <= d; i++) {
				                    w.push(this.easeOutCubic(i * c, start, end - start, this.speed))
				                }
								titleChange.className = (this.isOpen) ? "toggleTitle close":"toggleTitle open"
				                this.go(this,c,w);
							}
			            },
			            go: function(b, c , w) {
			                b.myObject.testTime = window.setInterval(function() {
			                    var a = true;
			                    if (w[b.myObject.currentStepX]) {
			                        b.myObject.style['height'] = w[b.myObject.currentStepX] + 'px';
			                        b.myObject.currentStepX++;
			                        a = false
			                    }
			                    if (a) {
			                        window.clearInterval(b.myObject.testTime);
			                        b.myObject.testTime = null;
									b.isOpen = (b.isOpen) ? false:true;
			                        if (b.callBack) {
			                            b.callBack()
			                        }
			                        return
			                    }
			                },
			                c);
			            },
						easeOutCubic : function (t, b, c, d) {
			 				return c*((t=t/d-1)*t*t + 1) + b;
						}
			        }
			    }
			};
		</script>
	</head>
	<body>
		
			<a href="#" class="toggleTitle open" onclick="Toggle1.move(this);return false;">Ouvre</a>
			<div class="toggle">
				<span class="toggleTop"></span>
				<div class="contentToggle">
					et la plein plein  de contenu <br />
					et la plein plein  de contenu <br />
					et la plein plein  de contenu <br />
					et la plein plein  de contenu <br />
					et la plein plein  de contenu <br />
					et la plein plein  de contenu <br />
					et la plein plein  de contenu <br />
					et la plein plein  de contenu <br />
					et la plein plein  de contenu <br />
					et la plein plein  de contenu <br />
					et la plein plein  de contenu <br />
				</div>
				<span class="toggleBottom"></span>
			</div>
		<script type="text/javascript">
			var Toggle1 = Toggle.create(getElementsByClassName('toggle')[0]);
		</script>
	</body>
</html>

merci de votre aide

Afficher la suite

A voir également:

Toggle en position fermé par défaut
Ma position - Guide
Rouvrir onglet fermé chrome - Guide
Suivi position google - Guide
Ouvrir avec par défaut - Guide
Application se ferme toute seule android - Guide

4 réponses

Réponse 1 / 4

epitale Messages postés 4343 Statut Membre 915

bonsoir jp.bond
<style>
#iddutrucatoggler{
display:none;
}
</style>

$('#l'iddutrucacliquer').click(function() {

$('#iddutrucatoggler').toggle();

)}

ceci en utilisant jquery
--