Faire dérouler un texte

jc51 -
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention - 28 juil. 2014 à 12:56

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

Afficher la suite

A voir également:

Texte déroulant html
Menu déroulant excel - Guide
Texte de chanson gratuit pdf - Télécharger - Vie quotidienne
Editeur html - Télécharger - HTML
Transcription audio en texte word gratuit - Guide
Excel cellule couleur si condition texte - Guide

1 réponse

Réponse 1 / 1

animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention 738

Bonjour

voici un script accordion
http://www.scriptiny.com/2009/03/accordion/

jc51

Effectivement ça a l'air plutôt pas mal, mais je n'arrive pas à l'inclure dans mon code. Je débute totalement, et ça me parait vraiment compliqué, en plus en anglais.
Néanmoins merci :)

animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention 738

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

jc51

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 :/

animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention 738

vioci un accordion pour WP
https://wpchannel.com/wordpress/tutoriels-wordpress/wordpress-jquery-ui-accordeon-article/

Discussions similaires

la balise <br> ou <br />

Balise </br>

Votre réponse

Discussions similaires