Afficher/Masquer le bouton (texte) pour Accordéon

Question

Avoir un accordéon avec un bouton "vue" pour ouvrir fermer le panneau accordéon (en utilisant jQuery Tools), mais je voudrais avoir un texte dynamique qui dit "afficher/masquer" en fonction de l'état ...

Voici le code pour l'accordéon dans asp.NET

<div id="accordion"> 
    <% foreach (var eventModel in ViewModel) 
    { %> 

    <% var isNewMonth = eventModel.Date.Month != previousMonth; %> 

    <% if (isNewMonth && previousMonth > 0) 
     { %></table></div><% } %> 

    <% previousMonth = eventModel.Date.Month; %> 

    <% if (isNewMonth) 
     { %> 
     <h2><%= string.Concat(eventModel.Date.ToString("MMMM"), " ", eventModel.Date.Year) %> <span style="float:right;"><a href="#" class="button blue small">View</a></span></h2> 
     <div class="pane" style="display:block"> 
      <table id="listTable" width="100%" cellpadding="3" cellspacing="0" border="0"> 
      <tr align="left" valign="top"><th align="left" valign="top">Date</th><th align="left" valign="top">Event</th><th align="left" valign="top">Event Type</th></tr> 
    <% } %> 

      <tr align="left" valign="top"><td align="left" valign="top"><b><span id="date" style="float:left;"> <%= string.Concat(eventModel.Date.ToString("MMMM"), " ", eventModel.Date.Day, " </span><span id='day' style='float:left'>" + eventModel.Date.DayOfWeek + "</span> ")%></b></td><td align="left" valign="top" ><%= Html.ActionLink(eventModel.Name.Truncate(40), "event", "register", new { id = eventModel.Id }, null)%></td><td align="left" valign="top"><%= string.Concat(" ", eventModel.Sport)%></td></tr> 

    <% } %> 

    <% if (ViewModel.Count > 0) 
    { %></table></div><% } %> 
</div> 

Voici le script d'initialisation en utilisant jQuery:

 
    
$(function() { 
$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: 0}); 
$(".small").click(function() { moveToTop(); }); 

}); 

    

Answer 1

Vous pouvez utiliser la genouillère Méthode: http://api.jquery.com/toggle/

Answer 2

Notez que si vous ne voulez pas traiter beaucoup de script, vous pouvez utiliser l'option icon dans l'accordian et afficher une image show/hide.

regarder ici

http://jqueryui.com/demos/accordion/#option-icons

---

Edité

Pour une étiquette Afficher/Masquer sur l'onglet lorsqu'il est sélectionné

$("#accordian").tabs("#accordion div.pane", 
    {tabs: 'h2', 
    effect: 'slide', 
    initialIndex: 0 
    select: function(event, ui) { 
    //ui.panel is the current tab I think 
    //you should be able to toggle a show/hide on each tab from here 
    } 
} 
);