Accordion + table bootstrap ?

**nikora** · 30/08/2015, 21h00

Bonjour ,

Un ami ma demandé de l'aide pour finir le travail d'un webmaster (qui a dev son site et est parti sans le finir) , jusqu'ici aucun soucis , puis il ma demandé quelque chose : La liste d'épisode de sa série en tableau + accordion (http://devpro.it/bytefx/demo/accordion/) , cependant je n'ai pas commencé mon apprentissage JS et j'ai du mal a associer un tableau bootstrap à un accordion...

Voici mon code (grossièrement retranscrit sans les boucles php et autre pour faciliter la compréhension, j'adapterais à ce moment là) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
	<head>
		<title>Page</title>
		<link href="css/bootstrap.css" rel="stylesheet" media="screen">
	</head>
	<body>
		<table class="table">
			<thead>
				<tr>
					<th>#</th>
					<th>Titre - Lien</th>
					<th>Fansub</th>
					<th>Type</th>
				</tr>
			</thead>
			<tbody>
				<tr><td>1</td><td>Episode 1- La vérité</td><td>iratalent</td><td>Episode</td></tr>
				<div>Incrustation de l'épisode</div>
				<tr><td>2</td><td>Episode 2- Revelation</td><td>iratalent</td><td>Episode</td></tr>
				<div>Incrustation de l'épisode</div>
				<tr><td>3</td><td>Episode 3- La dépendance</td><td>iratalent</td><td>Episode</td></tr>
				<div>Incrustation de l'épisode</div>
			</tbody>
		</table>
	</body>
</html>

J'aimerais donc pouvoir cacher les div (sauf le 1er) ainsi , au clic , le premier se ferme et ouvre le div de l'épisode 2 ou 3 ou autre tout en gardent le design bootstrap..

Merci de votre aide

!

**SpaceFrog** · 31/08/2015, 10h51

Commence par revoir ton code html ...
Tu ne dois pas avoir des divs entre les tr !!!!
ta structure de table n'est pas viable...
le contenu d'une table doit se trouver DANS les td

Accordion + table bootstrap ?

JavaScript

Discussions similaires

Partager

Partager