Bonjour,

Voici ce que je ne sais pas faire. Supposons que j'aie ce html :

    <button class="accordion" onclick="myfunction-show-hide()">show or hide</button>
    <div class="inner"style="display:none"> What I want to show/hide>
    <button class="accordion" onclick="myfunction-hide()">hide</button>
    </div>

J'essaie de faire une fonction myfunction-show-hide() qui sélectionne le suivant  div de class "inner" et change son 'display' en  "" s'il était  "none" et en  "none" si c'était "". Et la fonction inverse, qui agit sur le précédent div de class "inner". L'algorithme est très simple, mais je ne trouve pas en js...

Je n'y arrive pas !!!!

Merci pour votre aide,

Fred

-
Edité par FrédéricJaëck 19 octobre 2018 à 23:20:51

Salut, 

Le mieux serait de travailler avec des ids plutôt qu'avec des classes mais bon... avec ton code ça donnerait un truc comme ça :

	function Hide()
    {
		var elements = document.getElementsByClassName("inner");
		var requiredElement = elements[0];
		
		var style = requiredElement.getAttribute("style");
		if(style != "display:none")
			requiredElement.setAttribute('style', 'display:none');
    }

Avec ça tu peux te débrouiller pour la deuxième fonction

-
Edité par Onii-sama 22 octobre 2018 à 3:42:15

Salut, et merci pour ta réponse!

Malheureusement je n'y arrive pas encore :

<button class="accordion" onclick="Hide()">show or hide</button>
<div class="inner" style="display:none">
What I want to show-hide 
<button class="accordion" onclick="Hide">hide</button>
</div>

<script
function Hide()
{
    var elements = document.getElementsByClassName("inner");
    var requiredElement = elements[0];
     
    var style = requiredElement.getAttribute("style");
    if(style != "display:none")
        requiredElement.setAttribute('style', 'display:none');
}
 
 }</script>

Ceci ne fonctionne pas.

De plus, il me semble que

elements[0]

va toujours renvoyer le 1er élément de la page, non ? éléments est un tableau contenant toutes les occurrences ?

function myfunction_show_hide(){
	$(this).next().toggle();
}

function myfunction_hide(){
	$(this).prev().hide();	
}

Ceci qui me plaisait bien ne marche pas non plus... on peut l'améliorer ? Qui comprend ce qui ne marche pas svp?

Merci,

-Fred

-
Edité par FrédéricJaëck 23 octobre 2018 à 12:02:52

Bonjour FrédéricJaëck ,

Quelques exemples :

https://codepen.io/Zonecss/pen/JmmKvP

Re, Le code que je t'ai écrit sert juste a caché une div, d'après ton code tu essayes de caché une div déjà caché (display:none).

Il y a des fautes :

- Ligne 4 : onclick="Hide()", oubli de parentheses.

- Ligne 15 : <script> oubli de fermeture balise.

- Ligne 18 : } en trop.

Si tu veux que ça "Hide-Show" tu as juste à rajouter une condition à ce code (un else)

Oui, "element" retourne un tableau que tu peux parcourir si le besoin y est. Si tu travailles avec une seule div unique, je te conseil plutôt d'utiliser les ids.

-
Edité par Onii-sama 24 octobre 2018 à 3:07:55