i can imagine that most people here cant see this topic anymore but however help is needed. i have this bit of code here (and god knows how old, unstylish and inefficient the code below might be) and all i am trying is to make one or two particular divs with set ids/classes to show and hide triggered by a remote image somewhere else on the page. the image, let's say a plus icon switches to a minus icon depending on the state of the toggled divs. the example below at least does toggle between shwo & hide but the div it should hide doesn't do anything. also, in the example it uses text to display show or hide, this could be done with images (like plus and minus)? please bear with me it this has been already asked multiple times, but i did a search and couldnt find the answer.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>test</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.commenting').hide(); $('a.show_com').click(function() { $(this).toggleClass('show_com').toggleClass('hide_com'); $('a.show_com').text("SHOW COMMENTS"); $('a.hide_com').text("HIDE COMMENTS"); if($(this).attr("class") == 'hide_com') { $(this).parent().parent().next('div').slideDown('slow'); } else { $(this).parent().parent().next().slideUp('fast'); } return false; }); }); </script> </head> <body> <a href="#" class="show_com">SHOW COMMENTS</a> <div class="commenting">test test test</div> </body> </html>
