---
title: "Dölja lager med bild, jQuery"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/177939-dölja-lager-med-bild-jquery"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Ewik"
published: "2009-04-09T06:21:54.000Z"
updated: "2009-05-02T15:33:05.000Z"
replies: 12
views: 718
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/177939-dölja-lager-med-bild-jquery"
---

# Dölja lager med bild, jQuery

## #1 — Ewik, 2009-04-09T06:21Z

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>
```

Permalänk: https://www.webforum.nu/p/177939

## #2 — Ewik, 2009-04-17T17:02Z

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?

Permalänk: https://www.webforum.nu/p/2182208

## #3 — voigtann1, 2009-04-17T17:13Z

och var skall "bilden" vara i din kod?

Permalänk: https://www.webforum.nu/p/2182209

## #4 — Ewik, 2009-04-17T17:28Z

Bilden ska ligga sist i diven som visas.

Permalänk: https://www.webforum.nu/p/2182214

## #5 — voigtann1, 2009-04-17T17:30Z

dynamiskt eller kommer du placera den med ren HTML?

Permalänk: https://www.webforum.nu/p/2182215

## #6 — Ewik, 2009-04-17T17:31Z

min tanke var att den skulle placeras dynamiskt

Permalänk: https://www.webforum.nu/p/2182216

## #7 — voigtann1, 2009-04-17T17:39Z

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?

Permalänk: https://www.webforum.nu/p/2182218

## #8 — Ewik, 2009-04-17T17:53Z

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

Permalänk: https://www.webforum.nu/p/2182224

## #9 — voigtann1, 2009-04-17T18:25Z

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();
```

Permalänk: https://www.webforum.nu/p/2182231

## #10 — Ewik, 2009-04-17T18:41Z

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

Permalänk: https://www.webforum.nu/p/2182233

## #11 — Ewik, 2009-05-02T14:54Z

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/>

Permalänk: https://www.webforum.nu/p/2183757

## #12 — voigtann1, 2009-05-02T15:15Z

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');}
	    });
    });
});
```

Permalänk: https://www.webforum.nu/p/2183759

## #13 — Ewik, 2009-05-02T15:33Z

Sjysst, tack för hjälpen.

Permalänk: https://www.webforum.nu/p/2183761

---

Tråden på webben: https://www.webforum.nu/amne/javascript/177939-dölja-lager-med-bild-jquery