javascript - Changing image in jQuery -
i new jquery , may question basic. implementing expandable panel in jquery , above have image of + when clicked panel expand. want change image - when panel expanded. want change + image - once + clicked.
below code plz help.
<script type="text/javascript"> $(document).ready(function () { $('#addimage').click(function () { $('#pbody').slidetoggle('slow'); }); }); </script>
<asp:panel id="pbody" runat="server"> duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur </asp:panel> </div> </form>
the jquery should this:
<script type="text/javascript"> $(document).ready(function () { $('#addimage').click(function () { $('#pbody').slidetoggle('slow'); $(this).toggleclass('show-minus'); }); }); </script>
and in css you'd have this:
#addimage { background: url(plus-icon.gif); height: 30px; width: 30px; cursor: pointer; } #addimage .show-minus { background: url(minus-icon.gif); }
and of course you're html this:
<div id="addimage"></div>
note: if addimage tag, don't need cursor, height , width lines in css. if you'd set height/width make sure add display:block line in there too.
Comments
Post a Comment