Ouverture et fermeture d'un bloc avec jQuery

Ce script de 17 petites lignes permet de contrôler à un utilisateur de contrôler l'ouverture ou la fermeture un bloc de type DIV avec un click souris.

Les styles

                                            
                                                <style>
                                                
                                                    .grp_head {
                                                        /* bloc clickable */
                                                        cursor: pointer;
                                                    }
                                                    .grp_body {
                                                        /* bloc affiché ou masqué */
                                                    }
                                                    .navigation {
                                                        /* bloc de l'élément visuel de navigation */
                                                    }
                                                    
                                                </style>
                                            
                                        

Le code jQuery

                                            
                                                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
                            
                                                <script language="javascript">
                                                    // Fermeture des sous-menus à l'initialisation
                                                    $(".grp_body").hide();
                                                    
                                                    // Action sur évenement click
                                                    $(".grp_head").click(function() {
                                                        $(this).next(".grp_body").slideToggle(300, function() { });
                                                        
                                                        // Changement de la puce de navigation "_plus" <-> "_minus"
                                                        if ($(this).find(".navigation").length > 0){
                                                            if ( $(this).find(".navigation").attr("src").indexOf("_plus") >0) {
                                                                $(this).find(".navigation").attr("src", 
                                                                    $(this).find(".navigation").attr("src").replace("_plus", "_minus") );
                                                            } else if ( $(this).find(".navigation").attr("src").indexOf("_minus") >0) {
                                                                $(this).find(".navigation").attr("src",
                                                                    $(this).find(".navigation").attr("src").replace("_minus", "_plus") );
                                                            }
                                                        }
                                                    });
                                                    
                                                </script>
                                            
                                        

Exemple de mise en œuvre

                                            
                                                <html>
                                                    <head>
                                                        <!-- ---------------------------------------------------
                                                            Code HTML standard
                                                        ---------------------------------------------------- -->
                                                        ...
                                                        
                                                        <!-- ---------------------------------------------------
                                                            Code Css
                                                        ---------------------------------------------------- -->
                                                        <style>
                                                            .grp_head {
                                                                /* bloc clickable */
                                                                cursor: pointer;
                                                            }
                                                            .grp_body {
                                                                /* bloc affiché ou masqué */
                                                            }
                                                            .navigation {
                                                                /* bloc de l'élément visuel de navigation */
                                                            }
                                                        </style>
                                                        
                                                        <!-- ---------------------------------------------------
                                                            Code JavaScript / jQuery
                                                        ---------------------------------------------------- -->
                                                        <script type="text/javascript" src=".../jquery.js"></script>
                                                        <script language="javascript">
                                                            // Fermeture des sous-menus à l'initialisation
                                                            $(".grp_body").hide();
                                                            
                                                            // Action sur évenement click
                                                            $(".grp_head").click(function() {
                                                                $(this).next(".grp_body").slideToggle(300, function() { });
                                                                
                                                                // Changement de la puce de navigation "_plus" / "_minus"
                                                                if ($(this).find(".navigation").length > 0){
                                                                    if ( $(this).find(".navigation")
                                                                            .attr("src").indexOf("_plus") >0) {
                                                                        $(this).find(".navigation")
                                                                            .attr("src", $(this).find(".navigation")
                                                                                .attr("src").replace("_plus", "_minus") );
                                                                    } else if ( $(this).find(".navigation")
                                                                        .attr("src").indexOf("_minus") >0) {
                                                                            $(this).find(".navigation")
                                                                                .attr("src", $(this).find(".navigation")
                                                                                .attr("src").replace("_minus", "_plus") );
                                                                    }
                                                                }
                                                            });
                                                        </script>
                                                    </head>
                                                    
                                                    <!-- ---------------------------------------------------
                                                        BODY
                                                    ---------------------------------------------------- -->
                                                    <body>
                                                        <!-- Bloc 1 -->
                                                        <div id="grp_head">
                                                            <img class="navigation" src="img/_plus.png" align="absmiddle"  /> 1. Titre clickable
                                                        </div>
                                                        <div id="gpr_body">
                                                            <p>...</p>
                                                            <p>...</p>
                                                            <p>...</p>
                                                        </div>
                            
                                                        <!-- Bloc 2 -->
                                                        <div id="grp_head">
                                                            <img class="navigation" src="img/_plus.png" align="absmiddle"  /> 2. Titre clickable
                                                        </div>
                                                        <div id="gpr_body">
                                                            <p>...</p>
                                                            <p>...</p>
                                                            <p>...</p>
                                                        </div>
                                                    </body>
                                                </html>