Jump to content

[TUT|Javascript]Blok in/uit -klappen

Beagle

Door Beagle
in Computer Talk

 Share

Recommended Posts

Beagle The Godfather

Beagle

Geplaatst:
Geplaatst: (bewerkt)

Blok in/uit -klappen



Met Javascript, HTML en CSS

Als je de pagina laad:

foto-1.jpg

Als je op 't plusje klikt:

foto2.jpg

Als je weer op 't minnetje klikt:

foto-1.jpg

We beginnen bij het maken van het bestand index.html. Maak een nieuw HTML bestand aan, sla 't op als "index.html" en open het. Zet nu de stukken code die ik aangeef in je HTML bestand. Lees wel mijn uitleg!

<head>
<!-- De titel van je pagina -->
<title>Javascript tutorial - Beagle</title>

Hier beginnen we onze <head>, waar we als eerst de titel van de pagina aangeven.

<!-- onze CSS koppelen aan deze pagina -->
<link rel="stylesheet" type="text/css" href="stijl.css"/>

Zoals mijn comment zegt, koppelt deze code onze toekomstige CSS genaamd stijl.css aan ons HTML bestand.

<!-- Onze Javascript functies koppelen aan deze pagina -->
<script language="javascript" src="beagle.js"></script>
</head>

Hier zorgen we dat we ons toekomstig Javascript bestand genaamd beagle.js gekoppelt word aan ons HTML bestand.

<!-- Het blok waar we kunnen expanden/collapsen met inhoud e.d. -->
<div id="blok">

Hier beginnen we de div met de ID blok. Op de ID's komen we later op terug. In deze div komt ons hele blok met het plusje, minnetje, titel, inhoud, enzovoort. Dit is dus eigenlijk de container van het hele blok.

<!-- De bovenste balk waar de titel en 't knopje in staat -->
<div id="balk">

Hier beginnen we de div balk. Hier komt de titel ("Een tutorial") en het plaatje van de plus en de min.

<!-- de titel -->
<span id="titel">Een tutorial</span>

Hier zetten we wat tekst in onze balk, namelijk: Een tutorial. We geven deze tekst de ID titel mee.

<!-- de schakelaar voor uitklappen -->
<img src="plus.png" id="schakelaar_plus" onclick="ToggleBlok('show')">

Hier voegen we het plaatje van het plusje in. Het plusje staat in dezelfde map als dit HTML bestand zelf. We geven het plaatje ook een ID mee, genaamd schakelaar_plus. De onclick zorgt ervoor dat wanneer je op dit plaatje klikt, hij de functie ToggleBlok('show') aanroept. Deze functie is een Javascript functie. Deze ga ik later uitleggen.

<!-- de schakelaar voor het inklappen -->
<img src="min.png" id="schakelaar_min" onclick="ToggleBlok('hide')">

Hetzelfde als hierboven, maar hier geven we de ID schakelaar_min mee. Deze ID is anders dan de vorige, en in dat stuk CSS staat dat deze nog niet word weergegeven. Dat leg ik later nog uit. Hier heb ik weer een onclick meegegeven, met dezelfde functie, alleen geven we nu een andere parameter mee: hide. Dit leg ik later uit.

</div>

Deze tag sluit de div balk af, waar we net hebben in zitten werken.

<!-- de inhoud die word weergegeven als het uitgeklapt is -->
<div id="inhoud" style="visibility: hidden;">

Hier maken we een div aan, met de ID inhoud. Deze div heeft de inhoud van ons blok. Daarnaast geef ik de div ook de stijl visibility:hidden; mee. Hierdoor is 't onzichtbaar. Dit gebruik ik ook voor de schakelaar van het minnetje, maar daar kom ik nog op terug.

<!-- dummy tekst, niks van aantrekken =D-->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean purus tortor, iaculis quis varius in, tincidunt in risus. Vivamus egestas.

Dit is gewoon de dummy tekst in de inhoud, omdat ik niks beters kan verzinnen.

</div>

Deze tag sluit de div inhoud af.

</div>

En deze tag sluit de div blok af.

Nu gaan we de Cascading Style Sheet maken, die aangeeft hoe ons hele blok eruit moet zien. Deze noemen we stijl.css en zetten we in dezelfde map als de vorige bestanden.

body
{
font-family: Arial;
}

Deze zegt dat de body (het hele document) het lettertype Arial moet gebruiken. Sans Serif lettertypen zijn veel mooier :puh:

#blok
{
position: absolute;
width: 200px;
height: 500px;
}

Dit is de code voor blok (voor meer info zie hierboven, wat geld voor alles wat nu komt). We zeggen dat de positie absoluut moet zijn, zodat je kan aangeven waar hij moet staan. Onthoud: Wanneer je iets absoluut maakt en het positioneert moet de ouder (parent, container) relatief zijn! Verder zeggen we dat de div 200 px breed moet zijn, en 500 hoog.

#balk
{
height: 30px;
background-color: lightgray;
border: 1px solid gray;
font-size: 20px;
}

De code voor de balk, waar de titel in staat en de plus en min. Hoogte moet 30 pixels zijn, achtergrond kleur licht grijs, grijze rand en tekst grootte 20 px.

#titel
{
position: relative;
top: 3px;
left: 5px;
}

De code voor de titel, dus de tekst: Een tutorial. De rede dat ik hier ook nog een code voor heb is omdat het anders niet mooi in het midden stond (en teveel naar links). Deze zegt dat 'ie vanaf de bovenkant (van de div balk) 3 pixels moet zijn, en van links 5 pixels.

#schakelaar_plus
{
position: absolute;
right: 5px;
top: 5px;
}

De code voor het plusje. Positie absoluut, en 5 px van rechts en 5 px van de bovenkant van de balk.

#schakelaar_min
{
position: absolute;
right: 5px;
top: 5px;
visibility: hidden;
}

Zelfde als hierboven, alleen hier gebruik ik ook: visibility: hidden;. Dit zorgt ervoor dat dit plaatje onzichtbaar is ^_^

#inhoud
{
position:relative;
background-color:lightblue;
border: 1px solid gray;
border-top: none;
padding: 5px;
}

De code voor de inhoud. Positie relatief, dus hij ligt gewoon onder de balk. Achtergrond kleur licht blauw, 1 pixel grijze rand. Daarna zeg ik dat de rand bij de bovenkant none moet zijn. Dat doe ik omdat daar al een rand zit van de balk, en anders we 2 pixels krijgen. Daarna ook nog 5 px padding. Dit zorgt ervoor de de tekst 5 pixels van de randen af zitten.

Nu gaan we, het moeilijkste I guess, het Javascript doen. Maak een nieuw bestand genaamd beagle.js en zet het in dezelfde map als je andere bestanden.

function ToggleBlok(aanvraag)
{

Hiermee declareren we een nieuwe functie, genaamd ToggleBlok(aanvraag. Deze functie riepen we ook aan in de HTML bij de plaatjes. De parameter aanvraag is een hide of show, ligt eraan wat je wil doen.

var schakelaar_show = document.getElementById("schakelaar_show");
var schakelaar_hidden = document.getElementById("schakelaar_hidden");

Hier declareren we 2 variables: schakelaar_show en schakelaar_hidden. In deze 2 variabelen doen we alle divs die de ID schakelaar_show en schakelaar_hidden gebruiken. Aangezien dat er maar 2 zijn, en er maar één tegelijk word gebruikt, kunnen we daarvan wat maken.

if(aanvraag == "show")
{
	document.getElementById("schakelaar_plus").style.visibility = "hidden";
	document.getElementById("schakelaar_min").style.visibility = "visible";
	document.getElementById("inhoud").style.visibility = "visible";
}

Hier controleren of de parameter aanvraag het woord "show" bevat. Als dit zo is, weten we dat er op het plusje is geklikt. We geven dan de schakelaar_plus de stijl visibility:hidden; en de schakelaar_min de stijl visibility:visible;. Zo switch je dus tussen de twee knopjes. Daarna geven we de div die de ID inhoud gebruikt de stijl visibility:visible; zodat we die kunnen zien.

else if(aanvraag == "hide")
{
	document.getElementById("schakelaar_plus").style.visibility = "visible";
	document.getElementById("schakelaar_min").style.visibility = "hidden";
	document.getElementById("inhoud").style.visibility = "hidden";
}

Hier controleren we of de aanvraag gelijk is aan "hide", en als dat zo is weten we dat er op het minnetje is gedrukt. Nu doen we hetzelfde als hierboven, maar dan andersom (de plus word zichtbaar gemaakt en de min onzichtbaar, de inhoud word ook onzichtbaar gemaakt).

}

Hier sluiten we onze functie mee af.

Dit was het, ik hoop dat jullie er wat van geleerd hebben. De CSS kan je altijd nog aanpassen, en de code integreren in je eigen. Hier zijn nog de volledige codes:

HTML:

<head>
<!-- De titel van je pagina -->
<title>Javascript tutorial - Beagle</title>

<!-- onze CSS koppelen aan deze pagina -->
<link rel="stylesheet" type="text/css" href="stijl.css"/>

<!-- Onze Javascript functies koppelen aan deze pagina -->
<script language="javascript" src="beagle.js"></script>
</head>

<!-- Het blok waar we kunnen expanden/collapsen met inhoud e.d. -->
<div id="blok">

<!-- De bovenste balk waar de titel en 't knopje in staat -->
<div id="balk">

	<!-- de titel -->
	<span id="titel">Een tutorial</span>

	<!-- de schakelaar voor uitklappen -->
	<img src="plus.png" id="schakelaar_plus" onclick="ToggleBlok('show')">

	<!-- de schakelaar voor het inklappen -->
	<img src="min.png" id="schakelaar_min" onclick="java script:ToggleBlok('hide')">

</div>

<!-- de inhoud die word weergegeven als het uitgeklapt is -->
<div id="inhoud" style="visibility: hidden;">

	<!-- dummy tekst, niks van aantrekken =D-->
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean purus tortor, iaculis quis varius in, tincidunt in risus. Vivamus egestas.

</div>

</div>

CSS:

body
{
font-family: Arial;
}

#blok
{
position:absolute;
width: 200px;
height: 500px;
}

#balk
{
height: 30px;
background-color: lightgray;
border: 1px solid gray;
font-size: 20px;
}

#titel
{
position: relative;
top: 3px;
left: 5px;
}

#schakelaar_plus
{
position: absolute;
right: 5px;
top: 5px;
}

#schakelaar_min
{
position: absolute;
right: 5px;
top: 5px;
visibility: hidden;
}

#inhoud
{
position:relative;
background-color:lightblue;
border: 1px solid gray;
border-top: none;
padding: 5px;
}

java script:

function ToggleBlok(aanvraag)
{

var schakelaar_show = document.getElementById("schakelaar_show");
var schakelaar_hidden = document.getElementById("schakelaar_hidden");

if(aanvraag == "show")
{
	document.getElementById("schakelaar_plus").style.visibility = "hidden";
	document.getElementById("schakelaar_min").style.visibility = "visible";
	document.getElementById("inhoud").style.visibility = "visible";
}
else if(aanvraag == "hide")
{
	document.getElementById("schakelaar_plus").style.visibility = "visible";
	document.getElementById("schakelaar_min").style.visibility = "hidden";
	document.getElementById("inhoud").style.visibility = "hidden";
}
}

Als je nog vragen hebt, kan je ze hier gerust stellen.

xxx Beagle

Bewerkt: door Beagle
Donald F. Duck Kingpin

Donald F. Duck

Geplaatst:
Geplaatst: (bewerkt)

Ik wil het gaan gebruiken voor mijn website met een paar aanpassingen, alleen een probleempje.

Wat dit doet is de tekst hidden maken, waardoor dit als whitespace wordt aangezien.

Voorbeeldje:

Klik hier voor voorbeeld 1

Klik hier voor voorbeeld 2

Als je dan op voorbeeld 1 klikt krijg je mooi de tekst te zien in de whitespace, maar wat ik zou willen is dat er dan plaats wordt gemaakt voor de tekst.

Klik hier voor voorbeeld 1

Klik hier voor voorbeeld 2

Als je dan klikt, dat de tekst dan tussen de links wordt geplakt.

Is hier een oplossing voor?

Edit: Is al opgelost.

Bewerkt: door Donald F. Duck

Een reactie plaatsen

Je kan nu een reactie plaatsen en pas achteraf registreren. Als je al lid bent, log eerst in om met je eigen account een reactie te plaatsen.

Gast
Op dit onderwerp reageren...

×   Je hebt text geplaatst met opmaak.   Opmaak verwijderen

  Only 75 emoji are allowed.

×   Je link is automatisch ingevoegd.   In plaats daarvan weergeven als link

×   Je vorige bewerkingen zijn hersteld.   Alles verwijderen

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Naar onderwerpenlijst

  • Recent actief   0 leden

    • Er zijn hier geen geregistreerde gebruikers aanwezig.
×
×
  • Create New...