Etat par défaut "ouvert" Spoiler Javscript

Fermé

ajaoh.38 Messages postés 410 Date d'inscription lundi 5 avril 2010 Statut Membre Dernière intervention 20 mars 2016 - 20 août 2013 à 10:39
Anoen Messages postés 196 Date d'inscription mardi 10 novembre 2009 Statut Membre Dernière intervention 11 septembre 2013 - 20 août 2013 à 16:29

Bonjour,

Sur mon site j'ai un système de spoiler pour faire un sommaire mais par défaut les spoilers sont fermés. J'aimerais que par défaut le premier (ou tous si impossible) soit ouvert pour que l'utilisateur voit bien le système. Comment faut-il que j'édite mon code ?

<style type="text/css">
.spoiler form {display: inline; margin-left: 1em; width: 80%;}
.spoiler {border: 1px solid silver; background-color:#F3F3F3; margin-top:5px; margin-bottom:5px; padding-left:2px; padding-top:5px; padding-bottom:5px; width: 80%;}
.spoiler:hover {border: 1px solid silver; background-color:#C1C1C1; margin-top:5px; margin-bottom:5px; padding-left:2px; padding-top:5px; padding-bottom:5px;}
.spoiler div {border: 0px solid silver; padding:7px; margin: 0.5em 1em; display: none; background-color:#FFFFFF; border-top-left-radius: 5px;    border-top-right-radius: 5px;    border-bottom-left-radius: 5px;    border-bottom-right-radius: 5px; padding-left:5px; line-height:20px; font-size: 15px;}
</style> 

<script type="text/javascript">
function spoiler(ref)
{
        var div = ref.parentNode.parentNode.getElementsByTagName('div')[0];
        div.style.display = div.style.display == 'block' ? 'none' : 'block';
}
</script>
</head>

<body>
        <div class="spoiler">
                <form method="post" action="#" onsubmit="return false">
                        <input type="button" style="width:95%; text-align:left; padding-left:2px; padding-top:5px; padding-bottom:5px; border-top-left-radius: 5px;    border-top-right-radius: 5px;    border-bottom-left-radius: 5px;    border-bottom-right-radius: 5px;" value="Sur moyennes et longues distances :" onclick="spoiler(this)" />
                </form>
                <div>
                        <ul>
						<li><a href="http://www.diet-sport-coach.com/rubrique,les-besoins-energetiques,695905.html">Les besoins énergétiques</a></li>
						<li><a href="http://www.diet-sport-coach.com">Les calories : attention à la subjectivité de cette donnée</a><</li>
						<li><a href="http://www.diet-sport-coach.com/rubrique,poids-de-reference,814243.html">Le poids idéal existe-t-il ?</a></li>
						<li><a href="http://www.diet-sport-coach.com/rubrique,les-crampes-et-courbatures,651650.html">Les crampes et courbatures</a></li>
						<li><a href="http://www.diet-sport-coach.com/rubrique,entrainement-a-jeun,711994.html">FAT BURNING (zone de graisse) et entrainement à jeun ; mythe ou réalité ?</a></li>
						<li><a href="http://www.diet-sport-coach.com/rubrique,delai-petdej-entrainement,851580.html">Pourquoi ne pas manger juste avant le départ</a></li>
						<li><a href="http://www.diet-sport-coach.com/pages/content/info-sante-dieteitqu/alimentation-de-j-6-au-depart.html">Alimentation de J-6 au départ !!</a></li>
						<li><a href="http://www.diet-sport-coach.com">Quel repas si la course à lieu en début d'après-midi ?</a></li>
						<li><a href="http://www.diet-sport-coach.com">Le mur du marathon ... problème nutritionnel ?</a></li>
						<li><a href="http://www.diet-sport-coach.com">Crème sport déjeuner ou gateau sport déjeuner ? Le gagnant est ...</a></li>
						</ul>
                </div>
        </div>
        <div class="spoiler">
                <form method="post" action="#" onsubmit="return false">
                        <input type="button" style="width:95%; text-align:left; padding-left:2px; padding-top:5px; padding-bottom:5px; border-top-left-radius: 5px;    border-top-right-radius: 5px;    border-bottom-left-radius: 5px;    border-bottom-right-radius: 5px;" value="Sur une ultra longue distance :" onclick="spoiler(this)" />
                </form>
                <div>
                        <ul>
						<li><a href="http://diet-sport-coach.e-monsite.com/rubrique,-seance-de-pma-le-30-30,592706.html">PMA : "le 30/30"</a></li>
						<li><a href="http://diet-sport-coach.e-monsite.com/rubrique,pma-gimenez-et-casse,778379.html">PMA : le modèle "Gimenez" et le "casse"</a></li>
						<li><a href="http://diet-sport-coach.e-monsite.com/rubrique,entrainement-par-intervalles,716694.html">Le travail en fractionnés : pourquoi ? Comment ?  Des exemples de séances spécifiques</a></li>
						<li><a href="http://www.diet-sport-coach.com">La cinétique d'02 : l'indispensable entrainement de la consommation maximale d'Oxygène</a></li>
						<li><a href="http://www.diet-sport-coach.com">La VMA, faut-il la travailler pour un ultra ?</a></li>
						</ul>
                </div>
        </div>
</div>

Voici le lien de la page sur mon site : http://dsctest38.e-monsite.com/pages/entrainement-et-dietetique/entrainement/gereral/liste-dietetique-et-sante.html

Merci de vos réponses ;)

A voir également:

Etat par défaut "ouvert" Spoiler Javscript
Cette action ne peut pas être réalisée car le fichier est ouvert dans system - Guide
Windows 11 clic droit afficher plus d'options par défaut - Guide
Aide etat reparation electromenager - Guide
Message snap ouvert seul - Forum Snapchat
Mot de passe par defaut freebox ✓ - Forum Freebox

1 réponse

Réponse 1 / 1

Anoen Messages postés 196 Date d'inscription mardi 10 novembre 2009 Statut Membre Dernière intervention 11 septembre 2013 25
20 août 2013 à 16:29

Salut,

Tu peux mettre une classe "open" sur le premier spoiler, et dans ton css un display:block sur cette classe. Ensuite en javascript, supprimer ou ajouter cette classe au besoin.

Discussions similaires

Refus connexion... Adresse IP utilisée signalée proxy ouvert

Supprimer un fichier ouvert dans systeme.

Trouver l'Etat/Province des départements Français ?

état/province ?

Erreur bac papier vide ou ouvert - HP Officejet Pro 8720

Discussions similaires

Newsletters