4847 sujets

Sémantique web et HTML

bonjour j'ai un script en html qui me permet de faire un dépliant mais quand je vais sur la page internet, il est ouvert et je souhaiterais qu'il soit fermé de base comment je peut faire ?

<!doctype html>
<html>
<head>
<title>test</title>
<script type="text/javascript">
function flipflop(id)
{
if (document.getElementById(id).style.display == "none")
document.getElementById(id).style.display = "block";
else document.getElementById(id).style.display = "none";
}

</script>
<style type="text/css">
#header {
background-color : lightblue;
}

#bouton {
background-color : lightyellow;
width : 100px;
height : 30px;

margin : 30px;
border : 1px solid yellow;
padding : 10px;
text-align : center;
}

</style>
</head>

<body>
<div id="bouton" onclick="flipflop('header');">bouton</div>

<div id="header">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>
</body>
</html>
N'hésite pas à intégrer ton code dans une plateforme du style Codepen ou JSfiddle, c'est assez indigeste de la manière dont tu l'as fait.

Sinon, voici très vite fait une solution en JS :
> https://jsfiddle.net/wollsale/a64ou9jk/

L'idée est, au chargement du DOM, d'assigner un display:none; au header.
Il est possible de le faire en CSS également.
upload/1528709003-71333-capture.png voila ou je l'ai mis
Modifié par Pol (11 Jun 2018 - 11:23)
ah ! si sa me le fait mais que sur une case c'est aussi la seul case ou le bouton est coloré
upload/1528709529-71333-capture.png Smiley confus portant toute mes case on le meme script
Modifié par Pol (11 Jun 2018 - 11:33)
Difficile de comprendre comme ça, est-tu dans une boucle ?

Saurais-tu nous copier-coller ton code dans un JSfiddle ou nous donner un lien où ton site serait hébergé ?
Ceci dit comme le dit Greg_lumière, dans une boucle, pour chaque élément tu crées un addEventListener et au click tu toggle une class avec un display:none; par exemple.