Problème sur page HTML en accordéon (résolu)

gaston gaston
1 617 contributions
Membre depuis le 01/03/2001
Envoyé le 16/07/2015 à 10:40 Modifié par Modération


Bonjour,
j'ai fait une page html (visible ici) avec des textes présentés en accordéon, page dont voici le code:

<script src="js/jquery-1.js"></script>
<script src=js/jquery.js"></script>
<script src="js/navigation.js"></script>
<script src="js/html5shiv.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
$(function() {
$("#accordion").accordion({
collapsible: true,
active: false,
autoHeight: false,
navigation: true,
heightStyle: "content"
});
});
$(function() {
$(".accordion").accordion({
collapsible: true,
active: false,
autoHeight: false,
navigation: true,
heightStyle: "content"
});
});
</script>
<script>
$('.disable').addClass("ui-state-disabled");
var accordion = $( "#accordion" ).data("accordion");
if(accordion){
accordion._std_clickHandler = accordion._clickHandler;
accordion._clickHandler = function( event, target ) {
var clicked = $( event.currentTarget || target );
if (! clicked.hasClass("ui-state-disabled"))
this._std_clickHandler(event, target);
};
}
</script>
<script>
$(document).ready(function(){
$(window).bind('scroll', function() {
var navHeight = 149;
if ($(window).scrollTop() > navHeight) {
$('.navigation').addClass('is-fixed');
$('#slider-top').css('margin-top', '70px');

}
else {
$('.navigation').removeClass('is-fixed');
$('#slider-top').css('margin-top', '0');
}
});
});
</script>

<div role="tablist" class="ui-accordion ui-widget ui-helper-reset" id="accordion">

<!-- 1er item -->
<!-- titre visible -->
<h3 aria-expanded="false" aria-selected="false" aria-controls="ui-accordion-accordion-panel-1" id="ui-accordion-accordion-header-1" role="tab" class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons">
<a href="text1.pdf" title="format pdf"><img src="icones/pdf.gif" alt="pdf" /></a>
<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
<span class="accordion-title">Titre 1</span>
<span class="icon-small icon-more icon-accordion"></span>
<div class="clear"></div>
<p>n°1 résumé ...<p>
</h3>
<div aria-hidden="false" role="tabpanel" aria-labelledby="ui-accordion-accordion-header-0" id="ui-accordion-accordion-panel-0" style="display: block;" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
<!-- Ici Article 1 visible si clic sur icone accordion-->
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>

</p>
</div>

<!-- 2è item -->
<!-- titre visible -->
<h3 aria-expanded="false" aria-selected="false" aria-controls="ui-accordion-accordion-panel-2" id="ui-accordion-accordion-header-2" role="tab" class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons">
<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
<span class="accordion-title">Titre 2</span>
<span class="icon-small icon-more icon-accordion"></span>
<div class="clear"></div>
<p>n°2 résumé</p>
</h3>
<div aria-hidden="true" role="tabpanel" aria-labelledby="ui-accordion-accordion-header-2" id="ui-accordion-accordion-panel-2" style="display: none;" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
<!-- Article 2 sous forme d'image, visible si clic sur icône accordion -->
<img src="textescan.jp" alt=""/>
</div>
<!-- etc...-->
</div>


jusque là aucun problème: tout s'affiche et se replie impeccablement, aussi bien les textes en "dur" que les images scannées, et les icônes vers fichiers pdf.
Là où cela se complique, c'est que je voudrais alimenter cette page par une base de données, pour pouvoir la gérer plus facilement.
J'ai donc fait ce code-ci:


<?php require_once("fonctions/connection.php");
$res = mysql_query("SELECT * FROM t_page_gilbert");
$nbre = mysql_num_rows($res);
$i=0;
$retour = mysql_query('SELECT * FROM t_texte ORDER BY id_texte');
while ($donnees = mysql_fetch_array($retour))
{ ?>
<!-- titre -->

<h3 tabindex="0" aria-expanded="false" aria-selected="false" aria-controls="ui-accordion-accordion-panel-<?php echo $i; ?>" id="ui-accordion-accordion-header-<?php echo $i; ?>" role="tab" class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons">
<!-- affichage de l'icône pdf si dispo -->
<?php if (!empty$donnees['pdf']) { ?>
&nbsp;<a href="pdf/<?php stripslashes($donnees['pdf']);?>" title="télécharger au format pdf"><img src="pdf.gif" alt="pdf"></a><?php }
else { ?>
<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><span class="accordion-title">Br&egrave;ve n°<?php echo stripslashes($donnees['id_texte']); ?> - <?php echo stripslashes($donnees['titre']); ?></span>
<span class="icon-small icon-more icon-accordion"></span><div class="clear"></div>
<p> <?php echo stripslashes($donnees['resume']); ?>
</p>
</h3>
<!-- Article -->
<div aria-hidden="false" role="tabpanel" aria-labelledby="ui-accordion-accordion-header-<?php echo $i; ?>" id="ui-accordion-accordion-panel-<?php echo $i; ?>" style="display: block;" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
<!-- affichage, soit du texte brut si dispo, soit du texte scanné au format jpg -->
<?php if (empty($donnees['texte'])) { ?>
<img src="<?php echo stripslashes($donnees['img']); ?>" alt="<?php echo stripslashes($donnees['img']);?>" width="100%"/>
<?php }
else { echo stripslashes($donnees['texte']); }}?>
</div>
</div>
<!-- fin item -->
<?php i++; } ?>
</div>


et là plus rien ne va ou presque: seul le premier item se déplie et replie comme il faut, voyez plutôt: page

et je ne pige pas pourquoi.
Pourriez-vous m'aiguiller ?
carpe diem
HETEROCLIC HETEROCLIC
770 contributions
Membre depuis le 01/09/2013
Envoyé le 16/07/2015 à 13:19


Bonjour,

Je ne sais pas si quelqu'un se sentira capable de répondre sur mémo mais comme il vaut mieux s'adresser à dieu plutôt qu' à ses Saints voila une bonne adresse ou l'on pourra aisément vous renseigner gracieusement.

Bon courage.
A combattre sans mérite on triomphe sans gloire
gaston gaston
1 617 contributions
Membre depuis le 01/03/2001
Envoyé le 16/07/2015 à 19:30 Modifié par gaston


Bonjour,

Merci pour l'adresse (que je fréquentais déjà mais ça faisait un moment que je n'y était pas allé, ou je n'ai fait que poser question et répondre moi-même quelques minutes après)
finalement j'ai trouvé tout seul ou presque (on m'a aiguillé, ailleurs, mais je fais pas du pub, dsl): c'était juste une question de div pas fermés au bon endroit !!! [:oZ]
voici le bon code, pour ceux que ça intéresserait:

<!DOCTYPE html>
<html class="">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Titre</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="js/jquery-1.js"></script>
<script src="js/jquery.js"></script>
<script src="js/navigation.js"></script>
<script src="js/html5shiv.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
$(function() {
$("#accordion").accordion({
collapsible: true,
active: false,
autoHeight: false,
navigation: true,
heightStyle: "content"
});
});
$(function() {
$(".accordion").accordion({
collapsible: true,
active: false,
autoHeight: false,
navigation: true,
heightStyle: "content"
});
});
</script>
<script>
$('.disable').addClass("ui-state-disabled");
var accordion = $( "#accordion" ).data("accordion");
if(accordion){
accordion._std_clickHandler = accordion._clickHandler;
accordion._clickHandler = function( event, target ) {
var clicked = $( event.currentTarget || target );
if (! clicked.hasClass("ui-state-disabled"))
this._std_clickHandler(event, target);
};
}
</script>

<script>
$(document).ready(function(){
$(window).bind('scroll', function() {
var navHeight = 149;
if ($(window).scrollTop() > navHeight) {
$('.navigation').addClass('is-fixed');
$('#slider-top').css('margin-top', '70px');

}
else {
$('.navigation').removeClass('is-fixed');
$('#slider-top').css('margin-top', '0');
}
});
});
</script>
</head>
<body>
<div class="section"> <!--- voir layout.css ligne 9 pour la largeur max c'est dans ce div qu'on peut mettre un menu à droite (fixe de pref) -->
<div style="float:right">
<a href="http://monsite.fr"><span style="font-size:1.5em; font-weight: bold; text-decoration: underline">Accueil </span></a>
</div>
<div class="l-grid l-row-2">

<div class="l-grid-65">

<h1>Titre page</h1>
<p class="introduction">sous titre</p>
<p> (Cliquez sur les + pour dérouler les textes complets)</p>

<!--- ACCORDEON -->
<div role="tablist" class="ui-accordion ui-widget ui-helper-reset" id="accordion">

<?php require_once("fonctions/connections.php");
$retour = mysql_query("SELECT * FROM t_textes ORDER BY id_texte");
$nbre = mysql_num_rows($retour);
$i=0;

while ($donnees = mysql_fetch_array($retour))
{
?>
<!-- titre -->
<h3 aria-expanded="false" aria-selected="false" aria-controls="ui-accordion-accordion-panel-<?php echo $i; ?>" id="ui-accordion-accordion-header-<?php echo $i; ?>" role="tab" class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons">

<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><span class="accordion-title">Br&egrave;ve n°<?php echo stripslashes($donnees['id_texte']); ?> - <?php echo stripslashes($donnees['titre']); ?></span>
<span class="icon-small icon-more icon-accordion"></span><div class="clear"></div>
<!-- résumé -->
<p class="resume"> <?php echo stripslashes($donnees['resume']); ?>
</p>
</h3>
<!-- Article -->
<div aria-hidden="false" role="tabpanel" aria-labelledby="ui-accordion-accordion-header-<?php echo $i; ?>" id="ui-accordion-accordion-panel-<?php echo $i; ?>" style="display: block;" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
<!-- affichage, soit du texte brut si dispo, soit du texte scanné au format jpg -->
<?php if (empty($donnees['texte'])) { ?>
<p><img src="<?php echo stripslashes($donnees['img']); ?>" alt="<?php echo stripslashes($donnees['img']);?>" width="90%"/><br/>
<?php } else { echo $donnees['texte']; }?>
<br/>
<!-- affichage de icône pdf si dispo -->
<?php if (!empty($donnees['pdf'])) { ?>
<a href="texte/pdf/<?php echo stripslashes($donnees['pdf']);?>" title="télécharger au format pdf"><img src="texte/pdf.gif" alt="pdf"></a>
<?php } else { }?>
</p>
</div>

<?php $i++;} ?>
</div>
</div>
<!--- FIN ACCORDEON -->
</div>
</div>
</body>
</html>

carpe diem
J_D J_D
10 736 contributions
Membre depuis le 12/11/2001
Envoyé le 16/07/2015 à 20:00


Bonjour,
Merci pour la solution Gaston, bravo d'avoir trouvé la réponse (+)
Dans le temps je me débrouillais en Basic, mais ici en html je suis largué [:D]
Je ne réponds pas aux messages privés non sollicités ! C'est pas toujours facile...
Pegase Pegase
1 023 contributions
Membre depuis le 07/02/2002
Envoyé le 18/07/2015 à 09:22 Modifié par Pegase


Bonjour,


j'ai fait une page html (visible ici)


J'aurais bien aimé voir ta page en accordéon mais le lien est erroné, peux tu nous le redonner.
Merci
Moi, le jour où j'aurai vraiment mon âge, je mourrai (Léo Ferré).
gaston gaston
1 617 contributions
Membre depuis le 01/03/2001
Envoyé le 21/07/2015 à 21:36


Discussion trop ancienne

Cette discussion a été automatiquement fermée car elle n'a plus reçue de nouveau message depuis trop longtemps.

Nous vous suggérons de créer un nouveau message

« Retour sur la liste des messages de ce forum