Show/Hide knapp på hemsida

2009-03-21 22:30

Medlem

Plats: Luleå
Registrerad: Dec 2008

●

Show/Hide knapp på hemsida

Sökte lite på forum efter någon som undrade något liknande som mig, hittade dock inget. Så om det är någon som har ställt samma fråga tidigare så får jag be om ursäkt i första hand.

Jag håller på med lite enkel webdesign/xhtml-kodning, är rätt så mycket nybörjare men kan väl lite enklare saker, men min fundering är hur jag ska kunna få en "Show/Hide" knapp på hemsidan. Antar att jag skulle kunna göra en länk som sedan bara skulle kunna visa, men jag vill att den ska kunna dölja texten igen också.
Jag måste kanske t.o.m. måste gå och skapa i php för att få allt att funka som jag vill ha det?
Hoppas jag inte var allt för otydlig.

Tack på förhand.

Rapportera Redigera

Citera flera Citera

2009-03-22 02:05

Permalänk

HyDrAn

Medlem

Plats: Härnösand
Registrerad: Jan 2005

●

Javascript funkar

<script type="text/javascript">
function toggleLayer(whichLayer)
{
	if (document.getElementById)
	{
		// this is the way the standards work
		var style2 = document.getElementById(whichLayer).style;
		style2.display = style2.display? "":"block";
	}
	else if (document.all)
	{
		// this is the way old msie versions work
		var style2 = document.all[whichLayer].style;
		style2.display = style2.display? "":"block";
	}
	else if (document.layers)
	{
		// this is the way nn4 works
		var style2 = document.layers[whichLayer].style;
		style2.display = style2.display? "":"block";
	}
}
</script>

Sen kör du bara:

<a href="javascript:toggleLayer('minDiv');">Visa / dölj</a>
<div id="minDiv">
Text som ska gömmas/tas fram!
</div>

Funkar smidigt och bra.

EDIT: Om en textlänk inte passar in i designen så kan du ju köra med bilder eller vad som helst, bara du länkar till "javascript:toggleLayer('minDiv');" , "OnClick"-attributen fungerar också.

Exempelvis: <img src="minbild" OnClick="javascript:toggleLayer('minDiv');" />

Visa signatur

Min signatur, inte din, MIN.
Bort med tassarna O.o

Rapportera Redigera

Citera flera Citera

2009-03-22 10:34

Permalänk

azoapes

Medlem

Plats: Göteborg
Registrerad: Jun 2004

●

Jag rekommenderar jQuery även till detta, då vet du att det fungerar i alla webbläsare och det blir enklare för dig att lägga på mer funktionalitet. Det enda du behöver göra är att ladda ner senaste jquery.min.js från http://jquery.com/ och lägga in den i din katalog. Lägg till <script type="text/javascript" src="jquery.min.js"></script> inuti din <head> och så använder du jQuery såhär:

<a href="#" onclick="$('#entext').toggle();return false;">Klicka här för att toggla texten</a>

<div id="entext">
En text
</div>

Visa signatur

På SoundCloud | Fästmöns galleri

Rapportera Redigera

Citera flera Citera

2009-03-22 11:51

Permalänk

Wishie

Medlem

Plats: Stockholm
Registrerad: Jun 2005

●

Fast det är att rekommendera att inte attacha eventsen direkt i din html-kod.

jQuery(document).ready(function()
{
    jQuery('#linkId').live('click', function() { jQuery('#divId').toggle(); return false; });
});

Rapportera Redigera

Citera flera Citera

2009-03-22 12:02

Permalänk

You

Medlem

Plats: Göteborg
Registrerad: Jan 2007

●

Citat:

Ursprungligen inskrivet av Wishie
Fast det är att rekommendera att inte attacha eventsen direkt i din html-kod.

jQuery(document).ready(function()
{
    jQuery('#linkId').live('click', function() { jQuery('#divId').toggle(); return false; });
});

Man bör även fundera lite på hur besökare utan JavaScript ska kunna se texten, vill man ha den dold från början bör man kanske dölja den med JS också.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Rapportera Redigera

Citera flera Citera

2009-03-22 12:29

Permalänk

Wishie

Medlem

Plats: Stockholm
Registrerad: Jun 2005

●

Japp, då har du en hållbar lösning.

Rapportera Redigera

Citera flera Citera

2009-03-22 12:43

Permalänk

azoapes

Medlem

Plats: Göteborg
Registrerad: Jun 2004

●

Det de ovan pratar om är att skilja helt och hållet på HTML, CSS och JavaScript. Att det skulle vara så mycket bättre att attacha events från JS istället för inline när det är såhär enkelt exempel (och länken dessutom inte gör annat än att visa/dölja ett element) håller jag inte med om. Det är nog bara kosmetika och/eller ideologi bakom den slutsatsen. Men om man vill gör man alltså såhär:

<div id="toggleMe">En text</div>

<a href="#" id="toggleLink">Visa/dölj element</a>

<script type="text/javascript">
$(document).ready(function(){
    $('#toggleMe').hide(); // dölj diven när sidan laddas
    $('#toggleLink').click(function(){
        $('#toggleMe').toggle();
    });
});
</script>

Visa signatur

På SoundCloud | Fästmöns galleri

Rapportera Redigera

Citera flera Citera

2009-03-22 22:28

Permalänk

Namekz

Medlem