Ah, I think I see it, but I should have seen it earlier.
I'm going to assume your two .click() methods are inside a .ready()
handler or other block that doesn't execute until the markup is there.
Remember that the .click() method sets an event handler for the
elements matching the selector **at the time the .click() method is
called**.
So your handler for ".min" attaches to the elements that initially
have a class of min. There aren't any elements with the class max so
that one does nothing. That explains why the min works but the max
doesn't.
It looks like you're using the min and max classes to show some sort
of image defined by css, so you probably want to keep those the way
they are. If all your entries are initially at min, you could just
attach a single handler with the ".min" and handle the toggling inside
that one handler. If some start at min and some at max, that wouldn't
work.
What I would do is create another class, say minmax, and attach the
event handler with that. Inside the handler, see if the current class
is min or max and do the opposite.
$('.minmax').click(function() {
var $this = $(this);
if ( $this.is(".max") ) {
$this.removeClass("max").addClass("min")
.parents(".Container").children(".Content").show();
$.cookie($this.parents(".Container").attr("id"),
'closed', { expires: -1 });
} else {
$this..removeClass("min").addClass("max")
.parents(".Container").children(".Content").hide();
$.cookie($this.parents(".Container").attr("id"),
'closed', { expires: 7 });
}
});
Or a shorter version:
$('.minmax').click(function() {
var $this = $(this);
var togv = $this.is(".max")?
[ "max", "min", "show", -1 ] :
[ "min", "max", "hide", 7 ];
$this.removeClass(togv[0]).addClass(togv[1]).
.parents(".Container").children(".Content")[togv[2]]();
$.cookie($this.parents(".Container").attr("id"),
'closed', { expires: togv[3] });
});
<span class="min minmax"></span>
