Faire dérouler un texte

Fermé

jc51 - 27 juil. 2014 à 14:20
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 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

A voir également:

Texte déroulant html
Menu déroulant excel - Guide
Excel cellule couleur si condition texte - Guide
Transcription audio en texte word gratuit - Guide
Editeur html - Télécharger - HTML
Excel menu déroulant en cascade - Guide

1 réponse

Réponse 1 / 1

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
27 juil. 2014 à 14:39

Bonjour

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

jc51
27 juil. 2014 à 15:11

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 jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
Modifié par animostab le 27/07/2014 à 16:11

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
28 juil. 2014 à 08:50

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 jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
28 juil. 2014 à 12:56

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

Discussions similaires

adele

la balise <br> ou <br />

[Excel] Recherche de Texte avec RechercheV