Cacher/afficher un div [Résolu]

[xboulney]

Bonjour à tous et merci à ceux qui prendront le temps de me répondre.

Voilà mon souci du jour.
J'ai cette séquence en JS qui me permet d'afficher un div par un effet de slide.
Il y en à 3, activables chacun par un bouton.

Code :

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
<script type="text/javascript">
		$(document).ready(  function()
			{$('.panelLink').click(function()
               { if ($('#slide_panellogin').is(':hidden'))
                    {
                       $('#slide_panellogin').slideDown('slow');
                       }
                        else
                           {
                           $('#slide_panellogin').slideUp('slow');
                           }
						});
                    });
		$(document).ready(  function()	
			{$('.panelSearch').click(function()
               { if ($('#slide_panelsearch').is(':hidden'))
                    {
                       $('#slide_panelsearch').slideDown('slow');
                       }
                        else
                           {
                           $('#slide_panelsearch').slideUp('slow');
                           }
						});
                    });
		$(document).ready(  function()	
			{$('.panelAccount').click(function()
               { if ($('#slide_panelaccount').is(':hidden'))
                    {
                       $('#slide_panelaccount').slideDown('slow');
                       }
                        else
                           {
                           $('#slide_panelaccount').slideUp('slow');
                           }
						});
                    });
;

Mon souci est que ceux-ci ne remontent pas lorsque l'on choisi de clicker sur un autre de ses slides ou de clicker sur un endroit vide de la page.

De plus il me semble que l'on pourrait concaténer ce code pour n'avoir qu'une fonction regroupant les trois mais je ne voit pas comment procéder.

Vous le constaterez je ne suis pas doué en JS.

Merci à ceux qui pourront m'apporter une solution.
Des explications éventuelles seront bienvenues.

[eckerdecker]

Bonjour,

Procédons par étapes :

1/ tu n'as besoin que d'une seule structure DOMready :

Code :

1
2
3
4
5
<script type="text/javascript">
$(document).ready(function(){
 
});
</script>

2/ Pour factoriser il faut peut-être un peu modifier tes élements, en conservant ce que tu utilises déjà voici ce que je te propose

Code :

1
2
3
4
5
6
7
<a class="panelLink panelOpener" id="slide_panellogin_opener">...</a>
<a class="panelSearch panelOpener" id="slide_panelsearch_opener">...</a>
<a class="panelAccount panelOpener" id="slide_panelaccount_opener">...</a>
...
<div class="panel" id="slide_panellogin">...</div>
<div class="panel" id="slide_panelsearch">...</div>
<div class="panel" id="slide_panelaccount">...</div>

Si la class panelOpener des liens peut te suffir tu peux supprimer les class spécifiques.

3/ Quand on clique sur un des liens tu veux ouvrir le panel associé, ou le fermer s'il était ouvert

Code :

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
$(document).ready(function(){
  $('.panelOpener').click(function(){
    var idPanel = $(this).attr('id').replace('_opener','');
    var $panel = $('#'+idPanel);
    var panelIsOpen = $panel.is(':visible');
    if(!panelIsOpen) $panel.slideDown('slow');
    else $panel.slideUp('slow');
  });
});
</script>

4/ Si un autre panel était ouvert tu veux qu'il se ferme :

Code :

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
$(document).ready(function(){
  $('.panelOpener').click(function(){
    var idPanel = $(this).attr('id').replace('_opener','');
    var $panel = $('#'+idPanel);
    var panelIsOpen = $panel.is(':visible');
    $('.panel').slideUp('slow');
    if(!panelIsOpen) $panel.slideDown('slow');
  });
});
</script>

5/ Quand on clic n'importe où ailleurs tu veux que cela ferme les panels, ça se corse un peu :

Code :

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
$(document).ready(function(){
  $('.panelOpener').click(function(){
    ...
  });
  $(document).click(function(event){
    if($(event.target).parents('.panel, .panelOpener').length == 0)
      $('.panel').slideUp('slow');
  });
});
</script>

Si on clique dans le document mais qu'on est pas dans un des panel (ça évitera qu'ils ne se ferment alors que l'utilisateur cherche à les utiliser) ou sur un des liens (ça évite de traiter deux choses pour les mêmes éléments) : on ferme les panels.

[danielhagnoul]

Bonsoir

Dans le même genre que ci-dessus, mais avec une écriture différente...

Pour unifier les dénominations, j'ai changé la classe panelLink en panelLogin et j'ai corrigé les ID pour qu'il suive l'écriture de la classe : pas "slide_panellogin" mais "slide_panelLogin".

Code :

1
2
3
4
5
6
<a class="panelLogin" href="#">Show/hide Panel Login</a><br/>
<div id="slide_panelLogin">I'm the Login panel</div>
<a class="panelSearch" href="#">Show/hide Panel Search</a><br/>
<div id="slide_panelSearch">I'm the Search panel</div>
<a class="panelAccount" href="#">Show/hide Panel Account</a><br/>
<div id="slide_panelAccount">I'm the Account panel</div>

Code :

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
<script>
	$(function(){
		var jObjDivSlide = $( "[id^='slide_panel']" );
 
		jObjDivSlide.hide(); // cache toutes les divisions
 
		/*
		* Gestion du clic sur nos liens
		*/
		$( "a[class^='panel']" ).click( function( e ){
			// la division
			var jObj = $( "#slide_panel" + $( this ).attr( "class" ).slice( 5 ) );
 
			// cache toutes les divisions sauf jObj
			jObjDivSlide.each( function( i, item ){
				if ( jObj[0] != item ){
					$( item ).hide();
				}
			});
 
			// cache ou montre la division
			jObj.slideToggle( "slow" );
 
			// stopper l'action par défaut et la transmission de l'événement
			//return false;
 
			// stopper uniquement la transmission de l'événement
                        e.stopPropagation();
		});
 
		// nécessaire pour la gestion du clic en dehors de
		$( "[id^='slide_panel']" ).click( function(){
			// stopper l'action par défaut et la transmission de l'événement
			return false;
		});
 
		/*
		* Gestion du click sur le document mais 
		* en dehors de nos liens et de nos divisions
		*/
		$( "body" ).not( "a[class^='panel'], [id^='slide_panel']" ).click( function(){
			jObjDivSlide.hide();
		});
	});
</script>

[xboulney]

Merci à tous les deux d'avoir consacrer un peu de temps pour mon problème.
S'en est presque frustrant d’ailleurs car j'ai passé presque une semaine dessus avant de me résoudre à vous posez la question et vous me faites ça en quelques heures...
Donc j'ai privilégié la première solution car plus explicite... en tous cas pour mon niveau de connaissance.
Cependant il me reste un problème qui est que si je laisse la valeur de length à 0 ;

Code :

if($(event.target).parents('.panel, .panelOpener').length == 0)

les sliders s'abaissent bien lors du click mais remontent aussitot.
Si je passe la valeur à 1 ca fonctionne presque. Je dit presque car lorsque l'on click ailleurs dans la page le slide est toujours visible.

Merci.

[eckerdecker]

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function(){
  $('.panelOpener').click(function(){
    var idPanel = $(this).attr('id').replace('_opener','');
    var $panel = $('#'+idPanel);
    var panelIsOpen = $panel.is(':visible');
    $('.panel:visible').slideUp('slow');
    if(!panelIsOpen) $panel.slideDown('slow');
    return false;
  });
  $(document).click(function(event){
    if(!$(event.target).is('.panel, .panelOpener') && $(event.target).parents('.panel, .panelOpener').length == 0)
      $('.panel:visible').slideUp('slow');
    return false;
  });
});

J'ai modifié un peu et j'ai surtout ajouté le test de savoir si l'élément cliqué sur le document n'est pas lui-même un panel ou un opener (avant de chercher à savoir si c'est un sous-élément)

[xboulney]

Merci vraiment du coup de main...
La dernière modif du code fonctionne parfaitement sur les slides et le fonctionnement que j'en attendais.
Cependant il me revient un nouveau problème suite à cette modif ; les liens de mon menu ne fonctionnent plus du tout...
Je te soumets le code de mon menu qui est en deux parties:
* le premier est la partie standard du menu qui s'affiche sans conditions

Code :

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
<?php
    function affiche_menu()
    {
        // tableaux contenant les liens d'accès et le texte à afficher
        $tab_menu_lien = array( "home.php", "services.php", "account.php", "news.php", "#", "#" );
        $tab_menu_texte = array( "Home", "Services", "Account", "News", "Contact", "How to" );
 
        // informations sur la page
        $info = pathinfo($_SERVER['PHP_SELF']);
 
        $menu = "\n<div id=\"menu\">\n    <ul class=\"onglets\">\n";
 
 
 
        // boucle qui parcours les deux tableaux
        foreach($tab_menu_lien as $cle=>$lien)
        {
            $menu .= "    <li";
 
            // si le nom du fichier correspond à celui pointé par l'indice, alors on l'active
            if( $info['basename'] == $lien )
                $menu .= " class=\"active\"";
 
            $menu .= "><a href=\"" . $lien . "\">" . $tab_menu_texte[$cle] . "</a></li>\n";
        }
 
        $menu .= "</ul>\n</div>";
 
        // on renvoie le code xHTML
        return $menu;        
    }
	?>

et l'appel de la fonction

Code :

1
2
3
4
5
<?php
    require_once("./incl.menu.php");
 
    $menu = affiche_menu();
?>

* la deuxième partie "incl.topmenu.php" qui dépend si l'utilisateur est connecté à son compte ou non et dans le quel on retrouve le code pour les slides

Code :

1
2
3
4
5
6
7
8
9
10
11
12
	<?php
			if (isset($_SESSION['id']) && !empty($_SESSION["id"])) {  
				include ('incl.user_connected.php');
			}
				else { 
					include ('incl.userbar.php');
				}
		?>
 
			<div class="slide_panel" id="slide_panellogin">...</div>
			<div class="slide_panel" id="slide_panelaccount">... </div>
			<div class="slide_panel" id="slide_panelsearch">... </div>

et l'appel de la fonction depuis le header

Code :

<?php include("incl.topmenu.php"); ?>

Merci. Vraiment merci. Bon dimanche.

[eckerdecker]

Je pense que j'ai mis un return false en trop :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function(){
  $('.panelOpener').click(function(){
    var idPanel = $(this).attr('id').replace('_opener','');
    var $panel = $('#'+idPanel);
    var panelIsOpen = $panel.is(':visible');
    $('.panel:visible').slideUp('slow');
    if(!panelIsOpen) $panel.slideDown('slow');
    return false;
  });
  $(document).click(function(event){
    if(!$(event.target).is('.panel, .panelOpener') && $(event.target).parents('.panel, .panelOpener').length == 0)
      $('.panel:visible').slideUp('slow');
  });
});

[xboulney]

Comme disait oncle Benny... : "vachement super, vachement super"
Merci infiniment pour le temps passé.