Affichage tabulaire avec bouton "voir plus"

**laurentSc** · 08/11/2013, 15h43

Bonjour,

je dois réaliser une page avec un affichage tabulaire, chaque cellule du tableau contenant une liste, de longueur parfois courte et parfois longue ; pour éviter d'avoir une grosse zone blanche, je compte me caller sur la liste la plus courte, afficher cette hauteur pour chaque liste et adjoindre à ces listes un bouton "voir plus" qui permettrait d'étirer le reste et de changer la valeur du bouton de "étirer" à "réduire" ; le code élaboré par SylvainPV http://jsfiddle.net/nbSHt/3/ réalise bien la fonction "étirer/réduire" ; j'ai un autre code qui réalise l'affichage tabulaire :

Code :

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=windows-1252" http-equiv="content-type">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title></title>
 
 
  </head>
 
  <body>
	<style>
	  ul.Menu1 {
  display:table;
  width:790px;
  }
  ul.Menu1 li {
  display:table-cell;
  list-style-type: none;
  }
  ul.listMenu {
  display:block;
  padding:0;
  margin:0;
  border-collapse:collapse;
   font-size:.9em;
 }
 
 ul.listMenu li {
  display:block;
  list-style-type: none;
  margin:0;
  padding:0;	
  width:270px;
  text-align:center;
  }
	</style>
<ul class="Menu1">
  <li>
	<ul class="listMenu">
		<li>
			<script>document.write("titre_1");</script>
		</li>
	</ul>
  </li>
  <li>
	<ul class="listMenu">
		<li> 
			<script>document.write("titre_2");</script>
		</li>
	 </ul> 
  </li>
  <li>
	<ul class="listMenu">
		<li>
			<script>document.write("titre_3");</script>
		</li>
	</ul> 
 </ul>
 
  </body>
</html>

(pour simplifier, dans les cellules (des items de liste dans cette implémentation), ce ne sont pas des listes) et donc j'essaie de lier les 2 pages, sauf que avec ce que j'ai fait, j'ai bien un affichage tabulaire, mais si je clique sur l'un des liens, ça n'étire rien : donc le lien des 2 pages n'est pas bon ; peut-on me dire, où ?

Code :

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=windows-1252" http-equiv="content-type">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title></title>
	<style>
	  ul.Menu1 {
  display:table;
  width:790px;
  }
  ul.Menu1 li {
  display:table-cell;
  list-style-type: none;
  }
  ul.listMenu {
  display:block;
  padding:0;
  margin:0;
  border-collapse:collapse;
   font-size:.9em;
 }
 
 ul.listMenu li {
  display:block;
  list-style-type: none;
  margin:0;
  padding:0;	
  width:270px;
  text-align:center;
  }
     .panel .contenu {
    display:none;    
}
 
.panel.expanded .contenu {
    display:block;
    position:absolute;
    background: #CCC;
    padding: 1em;
}
 
.panel .panel-toggle-btn:before {
    content:"Ouvrir";
}
 
.panel.expanded .panel-toggle-btn:before {
    content:"Fermer";
}  
	</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
 
    <script>function expand($panelToOpen){
  $(".panel").not($panelToOpen).removeClass("expanded");
  $panelToOpen.toggleClass("expanded");  
}
 
function init() {
    var panelToExpand=4;
    var match = window.location.hash.match(/expanded=(\d+)/);
    if(match != null && match[1] != null){
        panelToExpand = parseInt(match[1]);      
    }  
    expand( $(".panel").eq(panelToExpand) );
 
    $(".panel").each(function(p){
        $(this).find('.panel-toggle-btn').on('click', function(e){
            e.preventDefault();
            expand( $(this).closest('.panel') );
            window.location.hash = "expanded="+p;
        });
    });
};
 
</script>	
 
  </head>
 
  <body>
 
<ul class="Menu1">
  <li>
	<ul class="listMenu">
		<li>
				<div class="panel">
				<a class="panel-toggle-btn" href="#"></a>
				<div class="contenu">
				test1
				</div>
				</div>
		</li>
	</ul>
  </li>
  <li>
	<ul class="listMenu">
		<li> 
			  <div class="panel">
			  <a class="panel-toggle-btn" href="#"></a>
			  <div class="contenu">
				test2
			  </div>
			  </div>
		</li>
	 </ul> 
  </li>
  <li>
	<ul class="listMenu">
		<li>
			  <div class="panel">
			  <a class="panel-toggle-btn" href="#"></a>
			  <div class="contenu">
				  test3
			  </div>
			  </div>
		</li>
	</ul> 
 </ul>
  </body>
</html>