Afficher avec du jquery les sous catégories d'une catégorie

Afficher avec du jquery les sous catégories d’une catégorie

Voici un exemple de site wp(version3.4.1) ou j’ai du rajouter un peu d’animation et afficher avec du jquery les sous catégories d’une catégorie, comme on le voit dans le gif suivant.

1-l’exemple

Sous le titre j’ai placé un lien clickable, qui faire apparaitre toute la liste des sous catégories.La liste des sous carégories étant différemment longue selon la catégorie, il fallait trouver une solution pour homogénéiser l’aspect visuel des pages.La décision a été prise de laisser le choix à l’utilisateur de dérouler ou non la liste.

2-Le code

Voici le code correspondant:

<?php get_header(); ?>



<div class="container">

    <div class="row-fluid">



        <div class="span8">



            <?php

                $cur_cat_id = get_query_var('cat');

                $get_cat = get_category( $cur_cat_id );

                $parent_cat = $get_cat->category_parent;



                if(isset($parent_cat) && !empty($parent_cat)) {

                    $cur_cat_id = $parent_cat;

                }

            ?>



<div id="click" style="cursor:pointer;">

            <h2><?php echo get_the_category_by_ID($cur_cat_id); ?></h2><p><?php if(qtrans_getLanguage() == "fr"): ?>

            <h3 class="categ">Toutes les catégories</h3> <br>

                                <?php elseif(qtrans_getLanguage() == "ar"): ?>

                         <h3 class="categ">  جميع فئات</h3><br>

                                <?php endif; ?></p>

</div>

            <ul class="subcategories-menu" id="list">

                <?php

                    $args = array(

                        'orderby'               => 'name',

                        'show_count'            => 0,

                        'use_desc_for_title'    => 0,

                        'child_of'              => $cur_cat_id,

                        'title_li'              => __( '' ),

                        'depth'                 => 1,

                        'hide_empty'            => 0

                    );

                    wp_list_categories($args);

                ?>

            </ul>

On récupère la liste des sous catégories de la catégorie en cours grace à la fonction wp_list_category et notamment l’argument:’child_of ‘ => $cur_cat_id , cur_cat_id, étant définie comme la catégorie parente en cours.
Ici j’entoure mon sous titre « toutes les catégories » d’une div id= »click ».

La fonction wp_list_categories()est placée dans une ul id= »liste » qu’on va passer en display none:

#title{display:none;}

Et vient enfin le jQuery.Dans un fichier js à part, placez la fonction suivante: au clic sur la div id= »click » on applique une animation toggle à la div id= »liste »

jQuery(document).ready(function($) {

    s('#click').click(function() {

         s('#title').animate({

               height: 'toggle'

               }, 100

          );

     });

});

29/01/2015 Mis à jour le 19/12/2019 Par Copier coller | Dans wordpress