Faire dérouler un texte
jc51
-
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je suis en train de refaire un site internet, et je dois détailler les missions d'une entreprises. Comme il y en a une dizaine, je souhaitais faire dérouler un texte, comme ça, l'utilisateur n'est pas "agressé" par le contenu.
J'avais trouvé un code et j'ai essayé de créer une page, mais cela ne fonctionne pas:
<html>
<head>
<em>Vous souhaitez une nouvelle expertise?</em>
BLABLABLA TEXTE DE PRESENTATION
<script>
function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none")
{
targetElement.style.display = "" ;
} else {
targetElement.style.display = "none" ;
}
}
</script>
</head>
<body>
<a href="" onclick="javascript:visibilite('divid'); return false;">Pour plus de détails</a>
<a href="" onclick="javascript:visibilite('divid1'); return false;">De nouvelles missions</a>
<div id="divid" style="display:none;"><br>
- Mission 1
- Mission 2
- Mission 3
- Mission 4
</div>
<div id="divid1" style="display:none;">
- nouveauté1
- nouveauté2
etc
</div>
</body>
</html>
Quelqu'un pourrait-il m'aider?
Merci d'avance
Je suis en train de refaire un site internet, et je dois détailler les missions d'une entreprises. Comme il y en a une dizaine, je souhaitais faire dérouler un texte, comme ça, l'utilisateur n'est pas "agressé" par le contenu.
J'avais trouvé un code et j'ai essayé de créer une page, mais cela ne fonctionne pas:
<html>
<head>
<em>Vous souhaitez une nouvelle expertise?</em>
BLABLABLA TEXTE DE PRESENTATION
<script>
function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none")
{
targetElement.style.display = "" ;
} else {
targetElement.style.display = "none" ;
}
}
</script>
</head>
<body>
<a href="" onclick="javascript:visibilite('divid'); return false;">Pour plus de détails</a>
<a href="" onclick="javascript:visibilite('divid1'); return false;">De nouvelles missions</a>
<div id="divid" style="display:none;"><br>
- Mission 1
- Mission 2
- Mission 3
- Mission 4
</div>
<div id="divid1" style="display:none;">
- nouveauté1
- nouveauté2
etc
</div>
</body>
</html>
Quelqu'un pourrait-il m'aider?
Merci d'avance
1 réponse
-
-
-
tu dois telecharger et dezipper ca
http://scriptiny.r.worldssl.net//wp-content/uploads/2009/03/tinyaccordion.zip
tu mets script.js et style.css à la racine de ton site ainsi que le dossier images
dans la balise <head> de ta page tu mets cette ligne
<link rel="stylesheet" href="style.css" type="text/css" />
ensuite dans ta page ou tu veux que soit ton truc
<div>
<ul class="acc" id="acc">
<li>
<div class="acc-section">
<div class="acc-content">
<ul class="acc" id="nested">
<li>
<h3>Mission 1</h3>
<div class="acc-section">
<div class="acc-content">
description mission. Sed aliquet lacus vitae nibh. Sed ullamcorper pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</li>
<li>
<h3>Mission 2</h3>
<div class="acc-section">
<div class="acc-content">
description mission. Vestibulum blandit mauris elementum mauris.
</div>
</div>
</li>
<li>
<h3>Mission 3</h3>
<div class="acc-section">
<div class="acc-content">
description mission. Morbi felis libero, porta non, sagittis ac, consectetur in, sem.
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
var parentAccordion=new TINY.accordion.slider("parentAccordion");
parentAccordion.init("acc","h3",0,0);
var nestedAccordion=new TINY.accordion.slider("nestedAccordion");
nestedAccordion.init("nested","h3",1,-1,"acc-selected");
</script>
et voila -
C'est un site wordpress, et voilà exactement ce que cela m'affiche quand je tape les instructions:
?
Mission 1
description mission. Sed aliquet lacus vitae nibh. Sed ullamcorper pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
?
Mission 2
description mission. Vestibulum blandit mauris elementum mauris.
?
Mission 3
description mission. Morbi felis libero, porta non, sagittis ac, consectetur in, sem.
var parentAccordion=new TINY.accordion.slider("parentAccordion");parentAccordion.init("acc","h3",0,0);var nestedAccordion=new TINY.accordion.slider("nestedAccordion");nestedAccordion.init("nested","h3",1,-1,"acc-selected");
Voilà les différents problèmes:
- Il n'y a pas l'effet de scroll, mais j'imagine que cela vient du fait que je n'ai pas initialisé de fonction non?
- après avoir dézippé, je ne vois pas à quoi servent les différents éléments contenus dans le dossier
- comme le site est un wordpress, je ne crois pas qu'il soit possible de mettre script.js dans la racine du site :/ -
vioci un accordion pour WP
https://wpchannel.com/wordpress/tutoriels-wordpress/wordpress-jquery-ui-accordeon-article/
-
