Cacher/Afficher un contenu

Sujet résolu

17 juin 2010 à 13:42:12

Bonjour à tous,

Je suis actuellement sur un projet ( une petite application Web ), et il m'as été demandé, pour la présentation d'une suite de tableau, de laisser à l'utilisateur la possibilité de cacher certain tableau.

J'explique :

Je présenter des données reliés entre elle en "cascade"

Objet 1 -> Object 2 -> Objet 3

Je souhaiterai afficher leurs données sous forme de Tableau, et avoir la possibilité de cliquer sur un Bouton ou lien qui cacherai les sous objets contenu dans un Objet ( tel une arborescence de tableau )

Je ne sais pas si c'est possible en HTML, voir PHP.

Merci d'avance pour vos éventuelles réponse.

youne25

17 juin 2010 à 14:11:39

salut
en html, non, en php je ne sais pas, en javascript c'est possible

deux choses sont infinies: l'univers et la bêtise humaine. Mais en ce qui concerne l'univers, je n'en ai pas encore acquis la certitude absolue. A.E

3arly

17 juin 2010 à 15:16:13

Hello

Perso je penche pour JS, mais PHP c'est possible, mais quand même js/css, un exemple avec jQuery :

$(document).ready(function(){
	
	$(".toggle_container").hide();

	$("h2.trigger").toggle(function(){
		$(this).addClass("active"); 
		}, function () {
		$(this).removeClass("active");
	});
	
	$("h2.trigger").click(function(){
		$(this).next(".toggle_container").slideToggle("slow,");
	});

});

Un peut de html :

<div class="container">

	<h2 class="trigger"><a href="#">Titre</a></h2>
	<div class="toggle_container">
		<div class="block">

			<h3>Sous-titre</h3>
			<img src="images.jpg" alt="jolie images" />
			<p class="intro">Le blala etc...</p><div class="clear"></div>

		</div>
	</div>
</div>

Là quand tu clique sur un lien tu ferme automatiquement l'autre, genre menu accordéon.

Edit : là un tuto chez Alsacréations, assez simple et très efficace.

SrK

17 juin 2010 à 16:16:40

Merci pour ta réponse 3arly, cela pourrait me convenir, j'ai lu en diagonale le Tuto et regardé la conclusion, cela pourrait me faire l'affaire.

J'avais trouvé une petite portion de code JavaScript, qui fonction a peut prêt comme ça.
Et j'ai eu des problèmes lorsque j'ai voulu l'adapter, le code que j'utilise Cache/Affiche un <div>.

De mon côté, je souhaiterai caché une parti d'un tableau :

Citation

<table>
   <tr>
      <td>Titre 1</td><td>Lien ou Image</td>
   </tr>
   <tr>
      <td>Sous Titre 1</td><td>données</td>
   </tr>
   <tr>
      <td>Sous Titre 2</td><td>données</td>
   </tr>
   <tr>
      <td>Titre 2</td><td>Lien ou Image</td>
   </tr>
etc...
</table>

Enfaite, je voudrai pouvoir Cliquez sur un "Lien ou Image", qui me permettrait d'afficher les lignes suivant ( Sous titre 1 et 2 ).

Est ce possible de faire quelque chose comme ça, sur les lignes d'un tableau ?

3arly

17 juin 2010 à 17:01:10

Ben oui que c'est possible, ensuite tu as 1001 solutions avec JS (jQuery) mais je ne connais pas ton niveau?

Là un autre exemple suffit que tu te fasse les images :

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Pas de titre, non!</title>
		<style type="text/css">
			.toggleTitle{
				width:450px;
				height:36px;
				line-height:36px;
				padding-left:50px;
				display:block;
				color:#FFFFFF;
				font-size:16px;
				font-weight:bold;
				font-family:Verdana;
				text-decoration:none;
			}
			.open{
				background:url('imgControl.png') top no-repeat;/*une image de 500x122 avec un + et un - */
			}
			.close{
				background:url('imgControl.png') 0px -36px no-repeat;
			}
			.toggleTop{
				width:500px;
				height:4px;
				line-height:4px;
				display:block;
				background:url('top.png');/* petite image 500x4 pour marquer le haut */
				margin-top:4px;
			}
			.toggleBottom{
				width:500px;
				height:5px;
				line-height:5px;
				display:block;
				background:url('bottom.png');/* petite image 500x5 pour le bas */
			}
			.contentToggle{
				width:590px;
				padding:5px;
				background:url('content.png') repeat-y;/* petite image 500x1 pour les côtés */
			}
			.toggle{
				overflow:hidden;
			}
		</style>
		
		<script type="text/javascript">
			function getElementsByClassName(className, tag, elm){
				var testClass = new RegExp("(^|s)" + className + "(s|$)");
				var tag = tag || "*";
				var elm = elm || document;
				var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
				var returnElements = [];
				var current;
				var length = elements.length;
				for(var i=0; i<length; i++){
					current = elements[i ];
					if(testClass.test(current.className)){
						returnElements.push(current);
					}
				}
				return returnElements;
			};
			
			var Toggle = {
			    create: function(target) {
			        return {
			            id: "no name",
			            orientation: "vertical",
						myObject : target,
			            min: 0,
			            max: target.offsetHeight,
			            speed: 350,
						isOpen : true,
			            move: function(titleChange) {
							if(this.myObject.testTime == null){
								start = (this.isOpen) ? this.max:this.min;
								end = (this.isOpen) ? this.min:this.max;
				                c = (350 / 50);
				                d = Math.round(this.speed / c);
				                w = new Array();
								this.myObject.currentStepX = 0;
								this.myObject.testTime = null;
				                for (var i = 1; i <= d; i++) {
				                    w.push(this.easeOutCubic(i * c, start, end - start, this.speed))
				                }
								titleChange.className = (this.isOpen) ? "toggleTitle close":"toggleTitle open"
				                this.go(this,c,w);
							}
			            },
			            go: function(b, c , w) {
			                b.myObject.testTime = window.setInterval(function() {
			                    var a = true;
			                    if (w[b.myObject.currentStepX]) {
			                        b.myObject.style['height'] = w[b.myObject.currentStepX] + 'px';
			                        b.myObject.currentStepX++;
			                        a = false
			                    }
			                    if (a) {
			                        window.clearInterval(b.myObject.testTime);
			                        b.myObject.testTime = null;
									b.isOpen = (b.isOpen) ? false:true;
			                        if (b.callBack) {
			                            b.callBack()
			                        }
			                        return
			                    }
			                },
			                c);
			            },
						easeOutCubic : function (t, b, c, d) {
			 				return c*((t=t/d-1)*t*t + 1) + b;
						}
			        }
			    }
			};
		</script>
	</head>
	<body>
		
			<a href="#" class="toggleTitle open" onclick="Toggle1.move(this);return false;">Ouvre</a>
			<div class="toggle">
				<span class="toggleTop"></span>
				<div class="contentToggle">
					simply dummy text of the printing and typesetting <br />
					simply dummy text of the printing and typesetting <br />
					simply dummy text of the printing and typesetting <br />
					simply dummy text of the printing and typesetting <br />
					simply dummy text of the printing and typesetting <br />
					simply dummy text of the printing and typesetting <br />
					simply dummy text of the printing and typesetting <br />
					simply dummy text of the printing and typesetting <br />
					simply dummy text of the printing and typesetting <br />
					simply dummy text of the printing and typesetting <br />
					simply dummy text of the printing and typesetting <br />
				</div>
				<span class="toggleBottom"></span>
			</div>
		<script type="text/javascript">
			var Toggle1 = Toggle.create(getElementsByClassName('toggle')[0]);
		</script>
	</body>
</html>

Je suis en plein JS ou plutôt jQuery tu as du bol :-°

Là un exemple, bon après les gouts et les couleurs, hein.

SrK

21 juin 2010 à 8:35:39

Merci 3rly, je parviens pas à l'appliquer sur des lignes de tableau. Mais je revoir la présentation de mes données pour évite ce problème et appliquer ta solution.