---
title: "Visa lager"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/91711-visa-lager"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "bagera"
published: "2003-12-02T15:02:41.000Z"
updated: "2003-12-02T16:49:54.000Z"
replies: 1
views: 512
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/91711-visa-lager"
---

# Visa lager

## #1 — bagera, 2003-12-02T15:02Z

hur gör jag för att hela tiden skjuta innehållet neråt på sidan

första knapplagret ska ju ligga ovanför andra knapplagret å när man klickar på första knappen ska ju alla lager nedanför hoppa ner så mycket som det behövs för att visa lager 1 osv.

måste jag hela tiden hålla reda på top värdet å öka på det eller finns det ett annat sätt?

\<html\>
\<head\>
\<script language="JavaScript" type="text/javascript"\>
	function visa(Id) {
		if(document.getElementById(Id).style.visibility=='hidden'){
			document.getElementById(Id).style.visibility='visible';
		} else {
			document.getElementById(Id).style.visibility='hidden';
		}
	}
	\</script\>
\</head\>
\<body\> 

\<div style="position:relative; left:15px; top:135px; width:720px; z-index:1"\>

\<!-- start --\>
	\<div style="position: absolute; visibility: visible; layer-background-color: #ffffff; width: 100%; height: 25px; color: white;  z-index:2"\>
		\<input type="button" onClick="visa('lager1');" value="klick"\>
	\</div\>
	
\<div id="lager1" style="position: relative; visibility: hidden; background-color: #cccccc;  width: 100%;  top:25; z-index:3"\>
  Innehåll
  \</div
  \<!-- Slut --\>
  
  \<!-- start 2 --\>
	\<div style="position: absolute; visibility: visible; layer-background-color: #ffffff; width: 100%; height: 25px; color: white;  z-index:4"\>
		\<input type="button" onClick="visa('lager2');" value="klick"\>
	\</div\>
	
\<div id="lager2" style="position: relative; visibility: hidden; background-color: #cccccc;  width: 100%;  top:25; z-index:5"\>
  Innehåll
  \<!-- Slut 2--\>
  \</div
\</div\>

\</div\>

\</body\>
\</html\>

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

## #2 — Jojoxx, 2003-12-02T16:49Z

Du bör inte använda position:absolute; eftersom du då skapar ett lager som är obundet till resten av sidan. Plocka bort position:absolute; och ändra visibility:hidden; till display:none; Sedan växlar du på display-värdet mellan "none" (dolt) och "block" (synligt).

Du har ett konkret exempel på det [Här (DOM Meny 1)](http://www.jojoxx.net/dhtml/).

Tillägg... Vill du ha menyn ligga flytande någonstanns på sidan kan du innefatta hela menyn i en div som du sätter position:absolute på. Det påverkar inte menyn.

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

---

Tråden på webben: https://www.webforum.nu/amne/javascript/91711-visa-lager