Revenir à l'état par défaut si rien n'est sélectionné

Question

J'ai une page de résultats avec 2 colonnes: LEFT COLUMN contient une liste d'éléments qui aident l'utilisateur à filtrer ses résultats. La colonne DROITE contient tous les résultats.

Par défaut, aucun élément n'est sélectionné dans la colonne de gauche, par conséquent, il n'y a aucun résultat à afficher/filtrer dans la colonne de droite. Il y a, cependant, quelques instructions qui indiquent au visiteur comment utiliser les filtres ou les éléments sur la colonne de gauche pour voir ses résultats dans la colonne de droite. En ce moment, je suis capable de cacher le DIV qui contient les résultats en entrant dans la page tout en ayant les instructions visibles, et une fois que l'utilisateur clique sur un élément dans la colonne de gauche, puis cacher les instructions et commencer à montrer Les resultats.

Mon problème est que je ne sais pas comment revenir à l'état 'par défaut' si aucun élément n'est sélectionné. Comment afficher à nouveau les instructions une fois que l'utilisateur a décidé d'effacer tous ses filtres?

Est-ce que cela a du sens? Faites-moi savoir si vous avez besoin de moi pour expliquer plus.

- Live Demo here -

Answer 1

Vérifiez le nombre de liens avec la classe active et si le nombre est supérieur à 0, masquez les instructions sinon affichez-le.

Vous avez donc besoin de changer le gestionnaire prêt à:

$(function(){ 
    // 
    $('#results').hide(); 

    //Buttons inside accordions 
    $('.acitem a').click(function(){ 
     $(this).toggleClass('active'); 
       if($('.acitem a.active').length > 0){ 
        $('#instructions').hide(); 
        $('#results').fadeIn(); 
       } 
       else{ 
        $('#instructions').show(); 
        $('#results').hide(); 

       } 
}); 

Cocher cette jsfiddlet.net: http://www.jsfiddle.net/CDkcB/6/

Answer 2

Probablement pas la façon la plus efficace de le faire, mais l'idée de base est à chaque fois qu'un lien est cliqué, vérifier et voir combien de liens « actifs » il y a:

$('.acitem a').click(function(){ 
    $(this).toggleClass('active'); 
    if ($('.acitem .active').length) { 
     $('#instructions').fadeOut(); 
     $('#results').fadeIn(); 
    } else { 
     $('#results').fadeOut(); 
     $('#instructions').fadeIn(); 
    } 
});