Need to implement a show/hide functionality for a series of lists using jQuery slideToggle. After clicking on the hyperlinks that trigger the show/hide action, I want to change the CSS style of those hyperlinks and then revert back to the original style upon clicking them again. I found inspiration from this example:
Here's a snippet of the code:
$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
The following code worked for me:
$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText).css({ backgroundColor: '#399C05' }) : toggleClick.text(options.showText).css({ backgroundColor: '#FFFFFF' });
However, I need to change the background image in the CSS instead of just the background color:
$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText).css({ background: url(/images/icon_image1.gif) }) : toggleClick.text(options.showText).css({ url(/images/icon_image1.gif) });
Trying this resulted in an error "Microsoft JScript runtime error: Object doesn’t support this property or method" and caused the show/hide functionality to stop working.
I also attempted to switch classes on click with:
$('#toggleDiv').toggleClass('show_hideClose', $(this).is(':visible'));
Specifying show_hideClose as a duplicate of show_hide led to the same error mentioned above.
Code snippet:
$('.show_hide').showHide({
speed: 1000,
easing: '',
changeText: 1,
showText: 'View Available Programs',
hideText: 'Hide Program Listing'
});
and
(function ($) {
$.fn.showHide = function (options) {
var defaults = {
speed: 1000,
easing: '',
changeText: 0,
showText: 'Show',
hideText: 'Hide'
};
var options = $.extend(defaults, options);
$(this).click(function () {
$('.toggleDiv').slideUp(options.speed, options.easing);
var toggleClick = $(this);
var toggleDiv = $(this).attr('rel');
$(toggleDiv).slideToggle(options.speed, options.easing, function() {
if(options.changeText==1) {
$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
}
});
return false;
});
};
})(jQuery);
The hyperlink is located within a .NET C# repeater:
<asp:Repeater ID="rptMyContentGroups" runat="server" OnItemDataBound="rptMyContentGroups_OnItemDataBound">
<ItemTemplate>
<a href="#" id="blah" class="show_hide" rel='# <%=rptmyContent.ClientID%>_programList_<%# GetDivClass() %>'>View</a>
<div id="programList" runat="server" style="display: none;">
<asp:Repeater ID="rptMyContent" runat="server" OnItemDataBound="rptMyContent_OnItemDataBound">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li>
<asp:HyperLink ID="hypContentDetail" runat="server" />
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</div>
</ItemTemplate>
</asp:Repeater>
UPDATE:
Attempted the following code:
$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText).css('background-image', 'url("' + /images/icon_a.gif + '")') : toggleClick.text(options.showText).css('background-image', 'url("' + /images/icon_b.gif + '")');
Received an error in IE about missing parentheses, which is not the case. Visual Studio displayed: "Microsoft JScript runtime error: Object doesn't support this property or method".