Show/Hide button (text) for Accordion
- by Kevin
Have an accordion with a "view" button to open close the accordion panel (using jQuery Tools), but I would like to have dynamic text that says "show/hide" depending on the state...
Here is the code for the accordion in 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>
Here is the initialization script using jQuery:
$(function() {
$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: 0});
$(".small").click(function() { moveToTop(); });
});
