Knapp som gör saker onsynliga/synliga

Hej :)

Jag undrar hur man gör något onsynligt och sedan en knapp som gör det synligt om man trycker på den? Om man trycker på samma knapp igen blir det onsynligt igen.

Någon som vet vilka koder man bör använda till detta, eller kan tipsa om var jag kan hitta information om detta? Jag är inte så duktig på koder ännu.

Mvh
Boye

För att göra något osynligt så kan du i css skriva:

display:none;

Det andra går inte i vanlig XHTML & CSS. Du kan däremot lätt lösa det med ett javascript.

Man kan använda sig av lager som man gör synliga och osynliga genom knapptryckningar. I Dreamweaver är det lätt att göra men tror det rör sig om en javascriptlösning.

<script type="text/javascript">
function toggle(){
	obj = document.getElementById('foo');

	if(obj.style.display == "none"){
		obj.style.display = "block";
	}else{
		obj.style.display = "none";
	}
}
</script>

<input type="button" value="Klicka på mig" onclick="toggle();" />
<br/>
<div id="foo">Något</div>

Som du ser är det JavaScript - jag har rapporterat tråden så att moderatorn kan flytta tråden till rätt forum.

Web-Tor skrev:

<script type="text/javascript">
function toggle(){
	obj = document.getElementById('foo');

	if(obj.style.display == "none"){
		obj.style.display = "block";
	}else{
		obj.style.display = "none";
	}
}
</script>


<input type="button" value="Klicka på mig" onclick="toggle();" />
<br/>
<div id="foo">Något</div>

Som du ser är det JavaScript - jag har rapporterat tråden så att moderatorn kan flytta tråden till rätt forum.

Ah nice, funkar fin fint, tack! :)

Men jag skrev lite fel (ursäkta), jag menade inte en "knapp" utan bara en vanlig text länk. Hur ändrar jag så det blir en vanlig text länk istället?

Juste - kan jag också ändra så att lagret inte visas i början, utan visas (för första gången) när jag klickar?

<script type="text/javascript">
function toggle(){
	obj = document.getElementById('foo');

	if(obj.style.display == "none"){
		obj.style.display = "block";
	}else{
		obj.style.display = "none";
	}
	return false;
}
</script>

<a href="#" onclick="toggle();">Klicka på mig</a>
<br/>
<div id="foo" style="display:none;">Något</div>

Web-Tor skrev:

<script type="text/javascript">
function toggle(){
	obj = document.getElementById('foo');

	if(obj.style.display == "none"){
		obj.style.display = "block";
	}else{
		obj.style.display = "none";
	}
	return false;
}
</script>


<a href="#" onclick="toggle();">Klicka på mig</a>
<br/>
<div id="foo" style="display:none;">Något</div>

Perfekt tack! Kunde inte bli bättre :bire

Vad bra!
Då kan du markera mitt inlägg.

Jag accepterade som slutgiltligt svar.. var det rätt eller hur menar du med markera?

Flyttas från HTML, XHTML & CSS

Jag har lagt till en liten sån här (bild)pil brevid som ingår i länken till att visa lagret:

Jag tänkte att när man trycker fram lagret ska pilen ändras till en uppåt pil istället. Kan man lägga in i koden någonstans så att bilden ändras också? :)

Boye skrev:

Kan man lägga in i koden någonstans så att bilden ändras också?

Visst!

<script type="text/javascript">
function toggle(){
	obj = document.getElementById('foo');
	img = document.getElementById('bar');

	if(obj.style.display == "none"){
		obj.style.display = "block";
		img.src = "http://image.listen.com/img/356x237/3/8/6/2/622683_356x237.jpg";
	}else{
		obj.style.display = "none";
		img.src = "http://img213.imageshack.us/img213/3166/123mq2.jpg";
	}
	return false;
}
</script>

<a href="#" onclick="toggle();"><img src="http://img213.imageshack.us/img213/3166/123mq2.jpg" alt="" id="bar" /></a>
<br/>
<div id="foo" style="display:none;">Något</div>

Härligt! Tack Tor :)

Av någon anledning så varje gång man trycker på denna knappen så scrollar sidan upp sig till toppen automatiskt. Lite irriterande på grund av att knappen och lagret är ganska långt nere på sidan. Kan man göra något åt det?

Byt ut detta...

onclick="toggle();"

...mot detta...

onclick="toggle();return false;"

/r Eller så kan du lägga onclick direkt på bilden och skippa hela <a>-taggen.

Tack! :D

Hej igen! Lite gammal tråd men har en ny fråga till om detta :)

Knappen gör ett table synligt.

Går det att göra så att tablet blir onsynligt igen om jag klickar var som helst förutom på tablet?

Sedan har jag också ett helt annat litet område där jag vill kunna klicka utan att tablet blir onsynligt. Detta är inte lika viktigt men hade endå varit grymt bra.

Någon som vet hur man gör? :)

bump

Boye skrev:

Går det att göra så att tablet blir onsynligt igen om jag klickar var som helst förutom på tablet?

Sätt en onclick på body-taggen som kör delar av funktionen ovan.

Boye skrev:

Sedan har jag också ett helt annat litet område där jag vill kunna klicka utan att tablet blir onsynligt. Detta är inte lika viktigt men hade endå varit grymt bra.

Testa att sätta onclick på detta element med cancelBubble satt till "true".

Tack för svar :)

Web-Tor skrev:

Sätt en onclick på body-taggen som kör delar av funktionen ovan.

Humm, jag vet inte exakt hur du menar men efter lite testande har jag lyckats skriva såhär:

 <body onclick="onclick="toggle();">

Problemet är att den både öppnar och stänger när jag klickar någonstans på min sida. Jag vill bara att den ska stänga. Hur löser jag det? :)

Web-Tor skrev:

Testa att sätta onclick på detta element med cancelBubble satt till "true".

Jag är tyvärr inte duktigt nog ännu att förstå det här så bra. Om jag har ett område som ser ut såhär t ex:

<td style="width:50px;height:50px;">Här är området<td>

Hur gör jag då så att den inte stänger när man klickar på det området med hjälp av den här koden?:

 
<SCRIPT LANGUAGE="JScript">
function checkCancel()
{
    if (window.event.shiftKey)
        window.event.cancelBubble = true;
}
function showSrc()
{
    if (window.event.srcElement.tagName == "IMG")
        alert(window.event.srcElement.src);
}
</SCRIPT>

<BODY onclick="showSrc()">
<IMG onclick="checkCancel()" SRC="sample.gif">

(koden från cancelbubble länken) :)