afficher certains articles en accordéon
Bonjour à tous,
Je développe un site en spip2.10 avec un menu accordéon babibel et je voudrais également afficher certains articles sur le même principe.(J’ai également installé JavaScriptPacker,safehtml,formulaire de contact avancé, cfg, spip bonux, tchikbox et le couteau suisse) en local je me sert de wamp server.
Sur ce site, dans chaque rubrique LE TITRE, LE TEXTE , LES DOCS et LES BREVES de l’ article sont affiché directement (pas de lien sur le titre de l’article pour afficher son contenu).
Mon but serait d’afficher le premier article de la rubrique en entier et les suivants en accordéon en cliquant sur le titre.
voir l’exemple sur gularu.fr
Ma démarche à été la suivante :
1. J’ai crée un mot clé accordéon que j’ai rattaché à aux articles concernés puis à la rubrique mère.
2.J’ai téléchargé et suivi le tutoriel . Les script "accordion.js" sont rangés dans mon dossier lib mais n’apparaissent pas dans la partie privée bibliothèque installées.
3.Je tente depuis deux jours d’appliquer ce tutoriel à mon squelette spip :
Voici le code de la page rubrique :
<BOUCLE_principale(RUBRIQUES) {id_rubrique}>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" lang="#LANG" dir="#LANG_DIR">
<head>
<title>[(#TITRE|textebrut) - ][(#NOM_SITE_SPIP|textebrut)]</title>
[<meta name="description" content="(#INTRODUCTION{150}|textebrut)" />]
#INSERT_HEAD
[(#REM) Lien vers le flux RSS des articles la rubrique ]
<link rel="alternate" type="application/rss+xml" title="<:syndiquer_rubrique:>" href="[(#URL_PAGE{backend}|parametre_url{id_rubrique,#ID_RUBRIQUE})]" />
</head>
<body class="page_rubrique">
<div id="page">
[(#REM) Entete de la page + titre du site ]
<INCLURE{fond=inc-entete}>
[(#REM) Contenu principal : contenu de la rubrique ]
<div id="conteneur">
<div id="navigation">[(#MODELE{menu}) ]</div>
<div id="news">[(#REM) Breves du secteur ]
<B_breves>
#ANCRE_PAGINATION
<BOUCLE_breves(BREVES) {id_rubrique} {par date}{inverse} {pagination 5}>
<h1>#TITRE</h1>
[(#TEXTE|image_reduire{200,0})]
<h4><:breves:>–[(#DATE|affdate_jourcourt) ]</h4>
</BOUCLE_breves>
</B_breves>
</div>
<div id="contenu">
[<div class="#EDIT{texte} chapo">(#TEXTE)</div>]
[(#REM) Articles de la rubrique ]
<B_articles>
<div class="menu articles">
#ANCRE_PAGINATION
<ul>
<BOUCLE_articles(ARTICLES) {id_rubrique} {par num titre} {pagination}>
<li>
<h3 class="entry-title">#TITRE</h3>
[<div class="#EDIT{chapo} chapo">(#CHAPO|image_reduire{500,0})</div>]
[<div class="#EDIT{texte} texte entry-content">(#TEXTE|image_reduire{500,0})</div>]
[(#REM) Gestion du portfolio et des documents
Le critere {env} permet de passer d'autres arguments de la page
par exemple l'id_document choisi pour un affichage complet
]
[(#INCLURE{fond=inc-documents}{id_article}{env})]
</li>
</BOUCLE_articles>
</ul>
[<p class="pagination">(#PAGINATION)</p>]
</div>
</B_articles>
</div><!--#contenu-->
</div><!--#conteneur-->
[(#REM) Pied de page ]
<INCLURE{fond=inc-pied}{skel=#SQUELETTE}>
</div><!--#page-->
</body>
</html>
</BOUCLE_principale>Le squelette de article.html :
<BOUCLE_choix(ARTICLES){id_article}{titre_mot=accordeon}>
<INCLURE{fond=article3}{id_article}>
</BOUCLE_choix>
<BOUCLE_article_normal(ARTICLES) {id_article}>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" lang="#LANG" dir="#LANG_DIR">
<head>
<title>[(#TITRE|textebrut) - ][(#NOM_SITE_SPIP|textebrut)]</title>
[<meta name="description" content="(#INTRODUCTION{150}|attribut_html)" />]
#INSERT_HEAD
</head>
<body class="page_article">
<div id="page">
[(#REM) Entete de la page + titre du site ]
<INCLURE{fond=inc-entete}>
[(#REM) Contenu principal : contenu de l'article ]
<div class="hfeed" id="conteneur">
<div id="navigation">[(#MODELE{menu}) ]</div>
<div id="news">[(#REM) Breves du secteur ]
<B_breves>
#ANCRE_PAGINATION
<BOUCLE_breves(BREVES) {id_rubrique} {par date}{inverse} {pagination 5}>
<h1>#TITRE</h1>
[(#TEXTE|image_reduire{200,0})]
<h4><:breves:>–[(#DATE|affdate_jourcourt) ]</h4>
</BOUCLE_breves>
</B_breves>
</div>
<div class="hentry" id="contenu">
<div class="cartouche">
<div class="surlignable">
[(#LOGO_ARTICLE||image_reduire{200,200})]
<h1 class="#EDIT{titre} entry-title">#TITRE</h1>
</div>
</div>
<div class="surlignable">
[<div class="#EDIT{texte} texte entry-content">(#TEXTE|image_reduire{500,0})</div>]
</div>
[<p class="#EDIT{hyperlien} hyperlien"><:voir_en_ligne:> : <a href="(#URL_SITE)" class="spip_out">[(#NOM_SITE|sinon{[(#URL_SITE|couper{80})]})]</a></p>]
[(#REM) Gestion du portfolio et des documents
Le critere {env} permet de passer d'autres arguments de la page
par exemple l'id_document choisi pour un affichage complet
]
[(#INCLURE{fond=inc-documents}{id_article}{env})]
</div><!--contenu-->
</div><!--#conteneur-->
[(#REM) Pied de page ]
<INCLURE{fond=inc-pied}{skel=#SQUELETTE}>
</div><!--#page-->
</body>
</html>
</BOUCLE_principale>Et le squelette de mes articles concernés : article3.html
<BOUCLE_principale(ARTICLES) {id_article}>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" lang="#LANG" dir="#LANG_DIR">
<head>
<title>[(#TITRE|textebrut) - ][(#NOM_SITE_SPIP|textebrut)]</title>
[<meta name="description" content="(#INTRODUCTION{150}|textebrut)" />]
#INSERT_HEAD
[(#REM) Lien vers le flux RSS des articles la rubrique ]
<script type="text/javascript" src="../lib/prototype.js"></script>
<script type="text/javascript" src="../lib/scriptaculous.js"></script>
<script type="text/javascript" src="../lib/accordion.js"></script>
</head>
<body>
<div id="test-accordion" class="accordion">
[(#REM) Contenu principal : contenu de l'article ]
[(#LOGO_ARTICLE||image_reduire{200,200})]
[<p >(#SURTITRE)</p>]
<div class="accordion-toggle"><h1 >#TITRE</h1></div>
<div class="accordion-content">
<p>[<div >(#TEXTE|image_reduire{500,0})</div>]
[<p ><:voir_en_ligne:> : <a href="(#URL_SITE)" class="spip_out">[(#NOM_SITE|sinon{[(#URL_SITE|couper{80})]})]</a></p>]
[<div ><h2 ><:info_ps:></h2><div class="#EDIT{ps}">(#PS|image_reduire{500,0})</div></div>]
[<div "><h2 class="pas_surlignable"><:info_notes:></h2>(#NOTES)</div>]
</p>
</div>
[(#INCLURE{fond=inc-documents}{id_article}{env})]
</div>
</body>
</html>
</BOUCLE_principale>Je suis débutante et je pense avoir identifié au moins un problème : spip ne reconnait pas les fichiers que j’ai copié dans le répertoire lib ou alors il y a un bug avec le script du menu accordéon de la navigation ?
Si quelqu’un peut m’aider Merci beaucoup.