expand collapse with jquery
If you have a text that you want to hide and show to a click of a hide/show, put this code fast: ( instead of @Url.Content you can use <%=ResolveUrl ) [code lang="HTML"] <a href="javascript:ShowHide('the_id_of_the_element_to_be_show_or_hide', this)"> <img border="0" src='@Url.Content("~/Content/images/show.gif")' title = 'show hide'> </a> <div id='the_id_of_the_element_to_be_show_or_hide' style='display:hidden'> this is hidden content - will be displayed </div> [/code] [code lang="Javascript"] <script type="text/javascript"> var imgShow = '@Url.Content("~/Content/images/show.gif")'; var imgHide = '@Url.Content("~/Content/images/hide.gif")'; function ShowHide(id, img) { var element = $("#" + id); element.toggle('slow', function () { if (element.is(":hidden")) { img.src = imgShow ; } else { img.src = imgHide ; } } ); } </script> [/code]
Leave a Reply