[jQuery] toggle close open link
How do I create toggle button that changes its text and image.
I tried the following but it does not work.
<style type="text/css">
span.open{background-image:url('img/open.gif');background-repeat:no-
repeat; width:20px}
span.close{background-image:url('img/close.gif');background-repeat:no-
repeat; width:20px}
</style>
<a id="toggleLnk" href="javascript: toggleOpenClose()">Open This<span
class="openP"></span></a>
function toggleOpenClose() changes the class name and text as follows:
<a id="toggleLnk" href="javascript: toggleOpenClose()">Close This<span
class="closeM"></span></a>
function toggleOpenClose(){
var cls = $("#toggleLnk" + " span").attr('class');
if(cls == 'openP') {
$("#toggleLnk" + " span").removeClass("openP");
$("#toggleLnk" + " span").addClass("closeM");
setHTML(document, "toggleLnk", 'Close This');
}
else if(cls == 'closeM') {
$("#toggleLnk" + " span").removeClass("closeM");
$("#toggleLnk" + " span").addClass("openP");
setHTML(document, "toggleLnk", 'Open This');
}
}