Besoin d'aide avec jQuery cliquez sur la fonction

Question

Hé les gars, j'ai une question simple (l'espoir est simple). J'ai créé une sorte d'accordéon, mais j'ai besoin de quelque chose comme si le bouton est cliqué, faites glisser le contenu et si le bouton est cliqué à nouveau glisser le contenu, s'il vous plaît trouver ci-dessous ce que j'ai fait jusqu'à présent. Merci d'avance pour votre aide.

$('#experiences').click(function() { 
     var cb = function() { 
      $('#experiences').addClass('active'); 
      $('#hiddenExperiences').slideDown(); 
      $('#addExperiences').fadeIn(); 
      return false; 
     } 
     closeFilters(cb); 
     return false; 
    }); 

    $('.btn-close').click(function() { 
     var cb = function() { 
      return false; 
     }; 
     closeFilters(cb); 
     return false; 
    }); 

    function closeFilters(callbackFunc) { 
    $(".active").removeClass("active"); 
    $(".add-filters").fadeOut(250); 
    $(".hidden-filters").slideUp("slow", callbackFunc); 
    } 

<div class="heading" id="experiences"> 
         <p><a href="#">Experiences</a></p>     
        </div><!--heading--> 
        <div class="filter"> 
        <div class="hidden-filters" id="hiddenExperiences"> 
         <p>Filtering by:</p> 
         <ul class="curr-filter"></ul> 
        </div><!-- hidden-filters --> 
        <div class="add-filters extra-width" id="addExperiences"> 
         <div class="inner"> 
          <a href="#" class="btn-close"></a> 
          <h4 class="title-filtery">Filtery By:</h4> 

          <div class="btn-holder clearfix">        
           <input type="button" class="btn-update" value="" /> 
          </div> 
         </div> 
        </div><!-- filters --> 
       </div><!-- filter --> 

Answer 1

Voir cette méthode http://api.jquery.com/slideToggle/ et cet événement http://api.jquery.com/toggle-event/

Answer 2

J'ai utilisé c'est un autre projet que je faisais, il peut être une aide

JS:

$('.container .ui-widget-header').click(function(){$(this).parent().children('.ui-widget-content').slideToggle()}); 

HTML:

<div class="container"> 
    <div class="ui-widget-header">Title</div> 
    <div class="ui-widget-content">Content</div> 
</div> 
<div class="container"> 
    <div class="ui-widget-header">Title2</div> 
    <div class="ui-widget-content">Content2</div> 
</div> 

Answer 3

On dirait que vous ajoutez la classe .active à tous les éléments avec id = expériences

$('#experiences').addClass('active'); 

Vous devez trouver l'élément qui a obtenu cliqué et passer que par. Je ne suis pas sûr de la façon dont votre expansion fonctionne, mais c'est là que vous aurez besoin de regarder.

Answer 4

Vous pouvez effectuer cela en Javascript onClick du bouton quelque chose comme ceci:

function toggle_visibility(id) { 
     var e = document.getElementById(id); 
     if(e.style.display == "inline") { 
      e.style.display = 'none'; 
     } 
     else if(e.style.display == "none") { 
      e.style.display = "inline"; 
     } 
    }