Probleme pour refermer un accordeon javascript ?

Question

claudio71

5 Mar 2013 à 12:26

Bonjour a tous je suis nouveau sur le site donc j espere que vous me pardonnerez mes maladresses, voila j ai creer un menu accordeon en CSS HTML et fonction JAVAScript. Tout marche sauf un petit detail quand je click sur un des menu j aimerais que ceux(les autres menus) qui sont deja ouvert se referment.
voici mon code CSS :


.LigneMenuVertical {margin: 0px;padding: 0px;}
.LigneMenuVerticalTab {margin: 0px;padding: 2px;cursor: pointer;-moz-user-select: none;-khtml-user-select: none;}
.LigneMenuVerticalContent {margin: 0px;padding: 0px;}
.LigneMenuVerticalTab a {color: black;text-decoration: none;}
.LigneMenuVerticalClosed .LigneMenuVerticalTab { /* background-color: #EFEFEF */ outline: none;}
.LigneMenuVerticalTabHover .title,  .LigneMenuVerticalOpen .LigneMenuVerticalTabHover .title{
	background-color: rgba(95, 82, 87, 0.7); color:white; outline: none; border-bottom:dashed 1px #3f3437;
	-ms-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -webkit-transition: all 0.3s ease;
 transition: all 0.3s ease;
}
.LigneMenuVerticalFocused .LigneMenuVerticalTab {background-color: #bdb7b4; outline: none;}

.qui{background-image:url(img/who.png); background-repeat:no-repeat; background-position:120px 5px;}
.pho{background-image:url(img/photo.png); background-repeat:no-repeat; background-position:130px 5px;}
.eng{background-image:url(img/engr.png); background-repeat:no-repeat; background-position:130px 5px;}
.cal{background-image:url(img/cal.png); background-repeat:no-repeat; background-position:130px 5px;}

.who{display:block; width:90%; padding:10px 5%; background-color:#bdb7b4;}
.who .titles{display:block; font-family: 'insigniaregular'; font-size:1.4em; padding:20px 0 20px 220px;  color:white; border-bottom:dashed 1px #666; width:400px; margin:0 auto;}
.who .title{display:block; font-family: 'insigniaregular'; font-size:1.2em; padding:13px 0 13px 220px;  color:#eeeeee; border-bottom:dashed 1px #666; width:400px; margin:0 auto;
-ms-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -webkit-transition: all 0.3s ease;
 transition: all 0.3s ease;}

.who h3{display:block; font-family: 'insigniaregular'; font-size:1.1em; padding:30px 100px 5px 140px; text-align:left;}
.who h4{display:block; font-family: 'Helvetica Neue'; font-size:0.9em; padding:30px 100px 10px 100px; margin:0; line-height:1.45em; text-align:justify; color:#fff;}
.who .lien{float:right; display:block; font-family: 'insigniaregular'; font-size:1em; text-decoration:none; margin:25px 0; color:#3f3437;}
.who .bas{display:block; font-family: 'edmondsans_regularregular'; font-size:1.3em; text-align:center; font-style:italic; color:#5f5257; line-height:1.4em; padding:50px 10% 0 10%; background-image:url(img/quote-left.png), url(img/quote-right.png); background-repeat:no-repeat; background-position:50px 45px, 780px bottom;}

Voici le code HTML :

    
<section class="who">
			
			<div id="LigneMenuVertical1" class="LigneMenuVertical">
				
				<div class="LigneMenuVerticalTab" tabindex="0"><p class="title qui">Qui sommes-nous ?</p></div>
				
				<div class="LigneMenuVerticalContent"> 
					
					<h4>L&#146;agence bla bla et le photographe blabla se sont associés pour vous proposer des services innovants. Doté de matériel à la pointe de la technologie, nous vous proposons des outils professionnels de hautes qualités.<br /><br /><mark>Le Photographe blabla</mark><br />
blabla est un photographe Dijonnais qui travaille en partenariat avec des professionnels maitrisant différents domaines d'expertises. Il peut ainsi proposer des services dans le domaine des photographies 360, de la numérisation d'oeuvres d'art et du reportage photo et vidéo.
				
					<a href="#" class="lien" >www.blabla.fr</a>
					
					<div class="clear"></div>
					<mark>L&#146;agence blabla</mark><br />
blabla est une agence de communication blablatine, disposant d&#146;une équipe spécialisée oeuvrant dans trois domaines créatifs : conception web, graphisme et audiovisuel. Cette association de compétences permet à notre agence de proposer des services innovants tels que des sites web nouvelle génération, des visites virtuelles, des vidéos d&#146;entreprises ...
					
					<a href="#" class="lien" >www.blabla.fr</a>
					
					<div class="clear"></div>
					</h4>
					<div class="clear"></div>
				</div>
            </div>
    </section>
    
    <section class="who">
			<div id="LigneMenuVertical2" class="LigneMenuVertical">
				<div class="LigneMenuVerticalTab" tabindex="0"><p class="title pho">Qu'est-ce que la photographie 360 ?</p></div>
				<div class="LigneMenuVerticalContent"> <h4>La photographie 360° regroupe 3 services innovants : la visite virtuelle, les objets 360° et le stop motion. Ces derniers font partie des nouveaux médias et vous permettent de communiquer de manière innovante grâce à leur interactivité.</h4></div>
			</div>
    </section>
     <!-- deuxieme ligne de l accordeon -->   
    <section class="who">
			<div id="LigneMenuVertical3" class="LigneMenuVertical">
				<div class="LigneMenuVerticalTab" tabindex="0"><p class="title eng">A quoi cela sert ?</p></div>
				<div class="LigneMenuVerticalContent">  
					<h4>Véritable outils de communication, ils permettent de promouvoir votre image et de présenter vos produits. Déclinable sur des supports variés, ces nouveaux médias vous permettent la présentation de votre activité sur Internet, en conférence, ou encore lors de salons et meetings.
					</h4>
				</div>
            </div>
    </section>
    <!-- troisieme ligne de l accordeon -->    
    <section class="who">
			<div id="LigneMenuVertical4" class="LigneMenuVertical">
				<div class="LigneMenuVerticalTab" tabindex="0"><p class="title cal">Comment cela se passe ?</p></div>
				<div class="LigneMenuVerticalContent"> 
					<h4>Nous considérons que chaque travail est unique et c'est pourquoi nous travaillons en étroite collaboration avec vous tout au long du processus de création. <br /><br />Ainsi nous commencerons par un rendez-vous dans votre structure afin de cerner au mieux vos besoins. Nous vous ferons des propositions qui chercheront à viser au plus juste votre clientèle jusqu'à ce que nous parvenions à un accord mutuel.<br /><br />Ensuite notre photographe se déplacera chez vous pour une séance de prise de vue avant de passer le relais à notre développeur qui personnalisera et finalisera le produit.<br /><br /> Enfin, la mise en ligne de votre réalisation vous offrira plus large visibilité et un nouveau moyen de diffusion.
					</h4>
				</div>
			</div>
    </section>
	<!-- derniere ligne de l accordeon -->      
    	
		<script type="text/javascript">
			var LigneMenuVertical1 = new Spry.Widget.LigneMenuVertical("LigneMenuVertical1", {contentIsOpen:false});
			<!-- c est un script java qui appelle la fonction Spry.Widget de la fiche java script Menu Vertical  avec comme variabe lignemenuvertical -->
			var LigneMenuVertical2 = new Spry.Widget.LigneMenuVertical("LigneMenuVertical2", {contentIsOpen:false});
			var LigneMenuVertical3 = new Spry.Widget.LigneMenuVertical("LigneMenuVertical3", {contentIsOpen:false});
			var LigneMenuVertical4 = new Spry.Widget.LigneMenuVertical("LigneMenuVertical4", {contentIsOpen:false});
			<!-- l accordeon prend forme grace a ces quatres lignes -->
		</script>
		<div class="clear"></div>

et enfin toute la feuille java script que j appel pour donner l animation a mon accordeon :


// JavaScript Document


(function() { // BeginSpryComponent

if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};

Spry.Widget.LigneMenuVertical = function(element, opts)
{
	this.element = this.getElement(element);
	this.focusElement = null;
	this.hoverClass = "LigneMenuVerticalTabHover";
	this.openClass = "LigneMenuVerticalOpen";
	this.closedClass = "LigneMenuVerticalClosed";
	this.focusedClass = "LigneMenuVerticalFocused";
	this.enableAnimation = true;
	this.enableKeyboardNavigation = true;
	this.animator = null;
	this.hasFocus = false;
	this.contentIsOpen = true;

	this.openPanelKeyCode = Spry.Widget.LigneMenuVertical.KEY_DOWN;
	this.closePanelKeyCode = Spry.Widget.LigneMenuVertical.KEY_UP;



	Spry.Widget.LigneMenuVertical.setOptions(this, opts);

	this.attachBehaviors();
};

Spry.Widget.LigneMenuVertical.prototype.getElement = function(ele)
{
	if (ele && typeof ele == "string")
		return document.getElementById(ele);
	
	return ele;
};

Spry.Widget.LigneMenuVertical.prototype.addClassName = function(ele, className)
{
	if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
		return;
	ele.className += (ele.className ? " " : "") + className;
};

Spry.Widget.LigneMenuVertical.prototype.removeClassName = function(ele, className)
{
	if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
		return;
	ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
};

Spry.Widget.LigneMenuVertical.prototype.hasClassName = function(ele, className)
{
	if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
		return false;
	return true;
};

Spry.Widget.LigneMenuVertical.prototype.setDisplay = function(ele, display)
{
	if( ele )
		ele.style.display = display;
};

Spry.Widget.LigneMenuVertical.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
{
	if (!optionsObj)
		return;
	for (var optionName in optionsObj)
	{
		if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
			continue;
		obj[optionName] = optionsObj[optionName];
	}
};

Spry.Widget.LigneMenuVertical.prototype.onTabMouseOver = function(e)
{
	this.addClassName(this.getTab(), this.hoverClass);
	return false;
};

Spry.Widget.LigneMenuVertical.prototype.onTabMouseOut = function(e)
{
	this.removeClassName(this.getTab(), this.hoverClass);
	return false;
};

Spry.Widget.LigneMenuVertical.prototype.open = function()
{
	this.contentIsOpen = true;
	if (this.enableAnimation)
	{
		if (this.animator)
			this.animator.stop();
		this.animator = new Spry.Widget.LigneMenuVertical.PanelAnimator(this, true, { duration: this.duration, fps: this.fps, transition: this.transition });
		this.animator.start();
	}
	else
		this.setDisplay(this.getContent(), "block");

	this.removeClassName(this.element, this.closedClass);
	this.addClassName(this.element, this.openClass);
};

Spry.Widget.LigneMenuVertical.prototype.close = function()
{
	this.contentIsOpen = false;
	if (this.enableAnimation)
	{
		if (this.animator)
			this.animator.stop();
		this.animator = new Spry.Widget.LigneMenuVertical.PanelAnimator(this, false, { duration: this.duration, fps: this.fps, transition: this.transition });
		this.animator.start();
	}
	else
		this.setDisplay(this.getContent(), "none");

	this.removeClassName(this.element, this.openClass);
	this.addClassName(this.element, this.closedClass);
};

Spry.Widget.LigneMenuVertical.prototype.onTabClick = function(e)
{
	if (this.isOpen())
		this.close();
	else
		this.open();
		
	
	this.focus();

	return this.stopPropagation(e);
};

Spry.Widget.LigneMenuVertical.prototype.onFocus = function(e)
{
	this.hasFocus = true;
	this.addClassName(this.element, this.focusedClass);
	return false;
};

Spry.Widget.LigneMenuVertical.prototype.onBlur = function(e)
{
	this.hasFocus = false;
	this.removeClassName(this.element, this.focusedClass);
	return false;
};

Spry.Widget.LigneMenuVertical.KEY_UP = 38;
Spry.Widget.LigneMenuVertical.KEY_DOWN = 40;

Spry.Widget.LigneMenuVertical.prototype.onKeyDown = function(e)
{
	var key = e.keyCode;
	if (!this.hasFocus || (key != this.openPanelKeyCode && key != this.closePanelKeyCode))
		return true;

	if (this.isOpen() && key == this.closePanelKeyCode)
		this.close();
	else if ( key == this.openPanelKeyCode)
		this.open();
	
	return this.stopPropagation(e);
};

Spry.Widget.LigneMenuVertical.prototype.stopPropagation = function(e)
{
	if (e.preventDefault) e.preventDefault();
	else e.returnValue = false;
	if (e.stopPropagation) e.stopPropagation();
	else e.cancelBubble = true;
	return false;
};

Spry.Widget.LigneMenuVertical.prototype.attachPanelHandlers = function()
{
	var tab = this.getTab();
	if (!tab)
		return;

	var self = this;
	Spry.Widget.LigneMenuVertical.addEventListener(tab, "click", function(e) { return self.onTabClick(e); }, false);
	Spry.Widget.LigneMenuVertical.addEventListener(tab, "mouseover", function(e) { return self.onTabMouseOver(e); }, false);
	Spry.Widget.LigneMenuVertical.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e); }, false);

	if (this.enableKeyboardNavigation)
	{
		
		
		var tabIndexEle = null;
		var tabAnchorEle = null;

		this.preorderTraversal(tab, function(node) {
			if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
			{
				var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
				if (tabIndexAttr)
				{
					tabIndexEle = node;
					return true;
				}
				if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
					tabAnchorEle = node;
			}
			return false;
		});

		if (tabIndexEle)
			this.focusElement = tabIndexEle;
		else if (tabAnchorEle)
			this.focusElement = tabAnchorEle;

		if (this.focusElement)
		{
			Spry.Widget.LigneMenuVertical.addEventListener(this.focusElement, "focus", function(e) { return self.onFocus(e); }, false);
			Spry.Widget.LigneMenuVertical.addEventListener(this.focusElement, "blur", function(e) { return self.onBlur(e); }, false);
			Spry.Widget.LigneMenuVertical.addEventListener(this.focusElement, "keydown", function(e) { return self.onKeyDown(e); }, false);
		}
	}
};

Spry.Widget.LigneMenuVertical.addEventListener = function(element, eventType, handler, capture)
{
	try
	{
		if (element.addEventListener)
			element.addEventListener(eventType, handler, capture);
		else if (element.attachEvent)
			element.attachEvent("on" + eventType, handler);
	}
	catch (e) {}
};

Spry.Widget.LigneMenuVertical.prototype.preorderTraversal = function(root, func)
{
	var stopTraversal = false;
	if (root)
	{
		stopTraversal = func(root);
		if (root.hasChildNodes())
		{
			var child = root.firstChild;
			while (!stopTraversal && child)
			{
				stopTraversal = this.preorderTraversal(child, func);
				try { child = child.nextSibling; } catch (e) { child = null; }
			}
		}
	}
	return stopTraversal;
};

Spry.Widget.LigneMenuVertical.prototype.attachBehaviors = function()
{
	var panel = this.element;
	var tab = this.getTab();
	var content = this.getContent();

	if (this.contentIsOpen || this.hasClassName(panel, this.openClass))
	{
		this.addClassName(panel, this.openClass);
		this.removeClassName(panel, this.closedClass);
		this.setDisplay(content, "block");
		this.contentIsOpen = true;
	}
	else
	{
		this.removeClassName(panel, this.openClass);
		this.addClassName(panel, this.closedClass);
		this.setDisplay(content, "none");
		this.contentIsOpen = false;
	}

	this.attachPanelHandlers();
};

Spry.Widget.LigneMenuVertical.prototype.getTab = function()
{
	return this.getElementChildren(this.element)[0];
};

Spry.Widget.LigneMenuVertical.prototype.getContent = function()
{
	return this.getElementChildren(this.element)[1];
};

Spry.Widget.LigneMenuVertical.prototype.isOpen = function()
{
	return this.contentIsOpen;
};

Spry.Widget.LigneMenuVertical.prototype.getElementChildren = function(element)
{
	var children = [];
	var child = element.firstChild;
	while (child)
	{
		if (child.nodeType == 1 )
			children.push(child);
		child = child.nextSibling;
	}
	return children;
};

Spry.Widget.LigneMenuVertical.prototype.focus = function()
{
	if (this.focusElement && this.focusElement.focus)
		this.focusElement.focus();
};



Spry.Widget.LigneMenuVertical.PanelAnimator = function(panel, doOpen, opts)
{
	this.timer = null;
	this.interval = 0;

	this.fps = 60;
	this.duration = 500;
	this.startTime = 0;

	this.transition = Spry.Widget.LigneMenuVertical.PanelAnimator.defaultTransition;

	this.onComplete = null;

	this.panel = panel;
	this.content = panel.getContent();
	this.doOpen = doOpen;

	Spry.Widget.LigneMenuVertical.setOptions(this, opts, true);

	this.interval = Math.floor(1000 / this.fps);

	var c = this.content;

	var curHeight = c.offsetHeight ? c.offsetHeight : 0;
	this.fromHeight = (doOpen && c.style.display == "none") ? 0 : curHeight;

	if (!doOpen)
		this.toHeight = 0;
	else
	{
		if (c.style.display == "none")
		{
			
	
			c.style.visibility = "hidden";
			c.style.display = "block";
		}

		

		c.style.height = "";
		this.toHeight = c.offsetHeight;
	}

	this.distance = this.toHeight - this.fromHeight;
	this.overflow = c.style.overflow;

	c.style.height = this.fromHeight + "px";
	c.style.visibility = "visible";
	c.style.overflow = "hidden";
	c.style.display = "block";
};

Spry.Widget.LigneMenuVertical.PanelAnimator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };

Spry.Widget.LigneMenuVertical.PanelAnimator.prototype.start = function()
{
	var self = this;
	this.startTime = (new Date).getTime();
	this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
};

Spry.Widget.LigneMenuVertical.PanelAnimator.prototype.stop = function()
{
	if (this.timer)
	{
		clearTimeout(this.timer);

		

		this.content.style.overflow = this.overflow;
	}

	this.timer = null;
};

Spry.Widget.LigneMenuVertical.PanelAnimator.prototype.stepAnimation = function()
{
	var curTime = (new Date).getTime();
	var elapsedTime = curTime - this.startTime;

	if (elapsedTime >= this.duration)
	{
		if (!this.doOpen)
			this.content.style.display = "none";
		this.content.style.overflow = this.overflow;
		this.content.style.height = this.toHeight + "px";
		if (this.onComplete)
			this.onComplete();
		return;
	}

	var ht = this.transition(elapsedTime, this.fromHeight, this.distance, this.duration);

	this.content.style.height = ((ht < 0) ? 0 : ht) + "px";

	var self = this;
	this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
};

Spry.Widget.LigneMenuVerticalGroup = function(element, opts)
{
	this.element = this.getElement(element);
	this.opts = opts;

	this.attachBehaviors();
};

Spry.Widget.LigneMenuVerticalGroup.prototype.setOptions = Spry.Widget.LigneMenuVertical.prototype.setOptions;
Spry.Widget.LigneMenuVerticalGroup.prototype.getElement = Spry.Widget.LigneMenuVertical.prototype.getElement;
Spry.Widget.LigneMenuVerticalGroup.prototype.getElementChildren = Spry.Widget.LigneMenuVertical.prototype.getElementChildren;

Spry.Widget.LigneMenuVerticalGroup.prototype.setElementWidget = function(element, widget)
{
	if (!element || !widget)
		return;
	if (!element.spry)
		element.spry = new Object;
	element.spry.LigneMenuVertical = widget;
};

Spry.Widget.LigneMenuVerticalGroup.prototype.getElementWidget = function(element)
{
	return (element && element.spry && element.spry.LigneMenuVertical) ? element.spry.LigneMenuVertical : null;
};

Spry.Widget.LigneMenuVerticalGroup.prototype.getPanels = function()
{
	if (!this.element)
		return [];
	return this.getElementChildren(this.element);
};

Spry.Widget.LigneMenuVerticalGroup.prototype.getPanel = function(panelIndex)
{
	return this.getPanels()[panelIndex];
};

Spry.Widget.LigneMenuVerticalGroup.prototype.attachBehaviors = function()
{
	if (!this.element)
		return;

	var cpanels = this.getPanels();
	var numCPanels = cpanels.length;
	for (var i = 0; i < numCPanels; i++)
	{
		var cpanel = cpanels[i];
		this.setElementWidget(cpanel, new Spry.Widget.LigneMenuVertical(cpanel, this.opts));
	}
};

Spry.Widget.LigneMenuVerticalGroup.prototype.openPanel = function(panelIndex)
{
	var w = this.getElementWidget(this.getPanel(panelIndex));
	if (w && !w.isOpen())
		w.open();
};

Spry.Widget.LigneMenuVerticalGroup.prototype.closePanel = function(panelIndex)
{
	var w = this.getElementWidget(this.getPanel(panelIndex));
	if (w && w.isOpen())
		w.close();
};

Spry.Widget.LigneMenuVerticalGroup.prototype.openAllPanels = function()
{
	var cpanels = this.getPanels();
	var numCPanels = cpanels.length;
	for (var i = 0; i < numCPanels; i++)
	{
		var w = this.getElementWidget(cpanels[i]);
		if (w && !w.isOpen())
			w.open();
	}
};

Spry.Widget.LigneMenuVerticalGroup.prototype.closeAllPanels = function()
{
	var cpanels = this.getPanels();
	var numCPanels = cpanels.length;
	for (var i = 0; i < numCPanels; i++)
	{
		var w = this.getElementWidget(cpanels[i]);
		if (w && w.isOpen())
			w.close();
	}
};

})();

voila je sais c est super long a lire mais si quelqun peut m aider ce serait vraiment classe.
je veut simplement que mes menus se referme quand j en ouvre un voila merci a tous.[/i][/i][/i]

Manhattan

6 Mar 2013 à 09:09

Plutôt qu'une réponse, une question : Pourquoi ne pas avoir utiliser l'accordéon Jquery UI ?
accordion

Quant aux réponses, je pense que vous en auriez peut-être d'avantage en proposant un lien vers le site en question, afin que quelqu'un puisse tester le code plutôt que de lire ce dernier ici Smiley smile

Modifié par Manhattan (06 Mar 2013 - 09:11)

claudio71

6 Mar 2013 à 16:57

je vous remercie de m avoir repondu et merci pour l accordeon qui pourra peut etre me servir prochainement. en ce qui concerne le site il n est pas en ligne et si je n est pas utiliser de bibliotheque c est par ce que je suis enfin j essaie d etre developpeur et c est donc pour une reflexion personnel que j essaie de faire fonctionner cet accordeon voila vous savez tout.mais je pensais bien que les bouts de code etait tro long je reposterais la question un peu plus tard en essayant d abréger au maximum le code. Merci a bientot

Olivier C

8 Mar 2013 à 00:17

J'ai eu le même problème il y a quelques temps, et j'avais trouvé la soluce. Elle est ici :

Lien sur le topic concerné

Sujet clos

Questions générales et questions de débutants

Probleme pour refermer un accordeon javascript ?