Dölja lager med bild, jQuery

Jag fick för ett tag sedan hjälp med att skapa det här scriptet till jQuery. Det funkar kanonbra men jag skulle vilja få in en bild som när man klickar på den döljer lagret igen och inte bara som det är nu att den döljer lagret när man klickar på samma rubrik igen.

$(function(){
	$("#main div").hide();
	$("#toc a").click(function(){
	    var that = this;
	    $("#toc a").each(function()
	    {
	        var id = $(this).attr("href");
	        if(this == that) { $(id).parent().toggle().addClass('show'); }
	        else { $(id).parent().hide().removeClass('show');}
	    });
    });
});

<ul id="toc">
    <li><a href="#rubrik1">Rubrik 1</a></li>
    <li><a href="#rubrik2">Rubrik 2</a></li>
    <li><a href="#rubrik3">Rubrik 3</a></li>
</ul>
<div>
    <h2 id="rubrik1">Rubrik 1</h2>
    <p>Lorem ipsum...</p>
</div>
<div>
    <h2 id="rubrik2">Rubrik 2</h2>
    <p>Lorem ipsum...</p>
</div>
<div>
    <h2 id="rubrik3">rubrik 3</h2>
    <p>Lorem ipsum...</p>
</div>

Här har jag lagt upp en sida som visar hur det funkar just nu.
http://ewik.se/test/show/

Det jag vill är alltså att när man klickar för att visa rutan så ska det läggas in en bild i rutan. Bilden ska man kunna klicka på och rutan ska försvinna. Det ska alltså fungera som en stängknapp.

Är det väldigt omständigt att fixa?

och var skall "bilden" vara i din kod?

Bilden ska ligga sist i diven som visas.

dynamiskt eller kommer du placera den med ren HTML?

min tanke var att den skulle placeras dynamiskt

dynamiskt menar jag med javascript, inte server-side. Är det det du är ute efter? Vad kommer bilden att ha för källa exempelvis eller det spelar ingen roll?

Bilden ska placeras ut med javascript. Vad menar du med källa?

källa = source = src...
men lägg in detta i din kod:

			$("#main div").each(function(){
				var img = new Image();
				$(img).attr("src","http://www.webforum.nu/images/wfstandard/logo_webforum.gif");
				$(img).click(function(){
					$(this).parent().hide().removeClass('show');
				});
				$(this).append(img);
			});

innan

$("#main div").hide();

Sjysst, det funkar kanon bra. Tack för hjälpen.

Nu har jag upptäckt att det här inte fungerar något vidare i varken IE 6 eller 7. 8:an har jag inte kollat i.
Divarna döljs inte utan ligger framme hela tiden.

Någon kunnig som vet vad det beror på?
Det ligger en testsida här: http://ewik.se/test/show/

Om du debugar koden, ta bort delar och se när det fungera,
du har satt en class vilket är ett researverat ord, du får använa det som strängar istället:

$(function(){
	$("#main div").hide();
	$("#main div").each(function(){
		var img = new Image();
		$(img).attr({ 
			[b][red]"src": "http://www.webforum.nu/images/wfstandard/logo_webforum.gif",
			"title": "jQuery",
			"alt": "jQuery Logo",
			"class": "close"[/red][/b]
		});
		$(img).click(function(){
			$(this).parent().hide().removeClass("show");
		});
		$(this).append(img);
	});
	$("#toc a").click(function(){
	    var that = this;
	    $("#toc a").each(function()
	    {
	        var id = $(this).attr("href");
	        if(this == that) { $(id).parent().toggle().addClass('show'); }
	        else { $(id).parent().hide().removeClass('show');}
	    });
    });
});

Sjysst, tack för hjälpen.