[jQuery] Re: show/hide revisited

[Roger Roelofs]

Schnuck,
On May 18, 2007, at 11:21 AM, Schnuck wrote:

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)?

Maybe you have an answer already, but I didn't see one on the list.   
You can make the code simpler.  Something like this.

$(document).ready(function() {

$('.commenting').hide();

$('a.show_com').click(function() {
  if ( this.className == "show_com" ) {
    $(".commenting").slideDown('slow');
    $(this).removeClass("show_com").addClass("hide_com").text("HIDE  
COMMENTS");
  } else {
    $(".commenting").slideUp('fast');
    $(this).removeClass("hide_com").addClass("show_com").text("SHOW  
COMMENTS");
  }
  return false;
});
});

If you want a plus or minus you can either do it in test
    $(this).removeClass("show_com").addClass("hide_com").text("-");
or you can add a background image in css

a.show_com, a.hide_com {
  width: 16px;
  height: 16px;
}

a.show_com {
  background-image: plus.gif;
}
a.hide_com {
  background-image: minus.gif;
}

The code could be even simpler if you use one class.

$('a.show_com').click(function() {
  $(this).toggleClass("show_com");
  $(".commenting").slideToggle("slow");
  return false;
});

then the css would be

a {
  width: 16px;
  height: 16px;
  background-image: minus.gif;
}

a.show_com {
  background-image: plus.gif;
}

--
Roger Roelofs