Stort drop down / åben-lukke-box

Her kan du stille og svare på spørgsmål omkring HTML. Du kan altså med andre ord finde en masse hjælp til HTML og HTML5 på dette forum
Besvar
mick
Entusiast
Entusiast
Indlæg:42
Tilmeldt:13. nov 2014, 10:00
Stort drop down / åben-lukke-box

Indlæg af mick » 5. jan 2015, 14:14

God eftermiddag.

Jeg er ikke sikker på om det er her, min indlæg skal ligge, da jeg ikke helt ved hvordan jeg skal lave dette, så nu smider jeg den her.

Jeg har nogle boxe, som er 900 px x 200px. Jeg kunne godt tænke mig, at når jeg klikker på en af boxene så åbner den sig, så i stedet for 200px bliver den måske 300-900px i højden. Inde i den åbne box, skal der være billede, tekst og links. Så man kan vel sige at det en meget stor drop down bare med billeder i også :-)

Giver dette mening?

Som sagt ved jeg ikke om jeg kan lave det kun i html og css eller om der skal noget JavaScript ind over.

God dag til alle :-)

jepperask
Geni
Geni
Indlæg:378
Tilmeldt:4. nov 2012, 17:57

Re: Stort drop down / åben-lukke-box

Indlæg af jepperask » 5. jan 2015, 19:25

mick skrev:God eftermiddag.

Jeg er ikke sikker på om det er her, min indlæg skal ligge, da jeg ikke helt ved hvordan jeg skal lave dette, så nu smider jeg den her.

Jeg har nogle boxe, som er 900 px x 200px. Jeg kunne godt tænke mig, at når jeg klikker på en af boxene så åbner den sig, så i stedet for 200px bliver den måske 300-900px i højden. Inde i den åbne box, skal der være billede, tekst og links. Så man kan vel sige at det en meget stor drop down bare med billeder i også :-)

Giver dette mening?

Som sagt ved jeg ikke om jeg kan lave det kun i html og css eller om der skal noget JavaScript ind over.

God dag til alle :-)
Jeg tror du skal ud i noget jquery.

Der er her et eksempel på hvordan du ændrer bredden og farven på en div, når der klikkes på den:
http://api.jquery.com/width/

Det kan også være der er et eksempel på lige præcist det du søger, men jQuery er ihvertfald smart. :-)

mick
Entusiast
Entusiast
Indlæg:42
Tilmeldt:13. nov 2014, 10:00

Re: Stort drop down / åben-lukke-box

Indlæg af mick » 6. jan 2015, 14:06

Jeg kunne godt forstille mig at du kunne have ret i det. Jeg ser lige om jeg får tid, så laver jeg lige en tegning og ligger ind her inde, så giver det ihvertfald 100 % mening :-)

Jepsen
Begynder
Indlæg:18
Tilmeldt:8. jan 2015, 03:53

Re: Stort drop down / åben-lukke-box

Indlæg af Jepsen » 8. jan 2015, 16:18

Hej Mick,

Det kan udføres vha. Javascript- eller jQuery som allerede er pointeret.

Jeg vil dog anbefale dig, at lade være at sætte en fast højde på de bokse, som bliver "foldet ud", når der klikkes på dem.

Det kan klares ganske simpelt:
1) Hav en container for hver boks. Tildel de enkelte containers en klasse.

Kode: Vælg alt

<div class="container"></div>
2) Inde i containeren viser du en lille del af din tekst.

Kode: Vælg alt

<div class="container">
	<p>The shown text. Except.</p>
</div>
3) Tilføj et element, som som udgangspunkt er skjult. Tildel dette element en klasse.

Kode: Vælg alt

<div class="container">
	<p>The shown text. Except.</p>
	<p class="notShown" style="display:none;">
		This text is not shown. Click the container first.
	</p>
</div>
Vi har altså nu en container, en tekst der vises samt en tekst, som ikke vises.

Du vil tilføje funktionalitet til de forskellige containers. Det klarer jeg vha. jQuery:

Kode: Vælg alt

<script>
	$(document).ready(function() {
		$('.container').click(function(){
			$(this).closest('.container').find('.notShown').toggle();
		})
	});
</script>


Lidt forklaring:
Linje 1: Vi viser, at det er et script vi skal igang med.
Linje 2: Da vi ikke kan manipulere data før siden er klar, beder vi jQuery om, at vente med funktionaliten før dokumentet er klart.
Linje 3: Vi vælger vores selector. I denne omgang er det containeren. Vi bestemmer os for, at når der klikkes på en container, så skal der ske noget.
Linje 4: Her sker magien. Når der klikkes på en container, finder vi den tætteste container. Det er den vi har klikket på. I den container, finder vi klassen "notShown". Når der klikkes, skal der toggles mellem vis / skjul.
Linje 5-7: Vi lukker for tidligere starter.

Du kan oprette så mange containers som du har lyst til. Det er kun den aktuelle container, som bliver vist.

Eksempelvis kan du gøre følgende:

Kode: Vælg alt

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	</head>
	<body>
		<div class="container">
			<p>The shown text. Except.</p>
			<p class="notShown" style="display:none;">
				This text is not shown. Click the container first.
			</p>
		</div>
		<div class="container">
			<p>The shown text. Except.</p>
			<p class="notShown" style="display:none;">
				This text is not shown. Click the container first.
			</p>
		</div>
		<div class="container">
			<p>The shown text. Except.</p>
			<p class="notShown" style="display:none;">
				This text is not shown. Click the container first.
			</p>
		</div>

		<script>
			$(document).ready(function() {
				$('.container').click(function(){
				    $(this).closest('.container').find('.notShown').toggle();
				})
			});
		</script>
	</body>
</html>
Her vises der 3 simple containers, og du kan klikke på hver eneste for at vise indholdet af "notShown".

Du kan ændre navnene som du lyster, du skal bare huske at rette til i jQuery delen.

vh,


Edit: Jeg glemte vidst at tilføje følgende:
Hvis der er tale om en masse forskellig information, herunder billeder, tekster osv, som ikke skal vises til at starte med, skal du nok skifte <p class="notShown"> ud med <div class="notShown">. Herefter kan du smide så meget information ind, som du har lyst til, og ikke kun tekst.

mick
Entusiast
Entusiast
Indlæg:42
Tilmeldt:13. nov 2014, 10:00

Re: Stort drop down / åben-lukke-box

Indlæg af mick » 9. jan 2015, 17:03

Jepsen skrev:Hej Mick,

Det kan udføres vha. Javascript- eller jQuery som allerede er pointeret.

Jeg vil dog anbefale dig, at lade være at sætte en fast højde på de bokse, som bliver "foldet ud", når der klikkes på dem.

Det kan klares ganske simpelt:
1) Hav en container for hver boks. Tildel de enkelte containers en klasse.

Kode: Vælg alt

<div class="container"></div>
2) Inde i containeren viser du en lille del af din tekst.

Kode: Vælg alt

<div class="container">
	<p>The shown text. Except.</p>
</div>
3) Tilføj et element, som som udgangspunkt er skjult. Tildel dette element en klasse.

Kode: Vælg alt

<div class="container">
	<p>The shown text. Except.</p>
	<p class="notShown" style="display:none;">
		This text is not shown. Click the container first.
	</p>
</div>
Vi har altså nu en container, en tekst der vises samt en tekst, som ikke vises.

Du vil tilføje funktionalitet til de forskellige containers. Det klarer jeg vha. jQuery:

Kode: Vælg alt

<script>
	$(document).ready(function() {
		$('.container').click(function(){
			$(this).closest('.container').find('.notShown').toggle();
		})
	});
</script>


Lidt forklaring:
Linje 1: Vi viser, at det er et script vi skal igang med.
Linje 2: Da vi ikke kan manipulere data før siden er klar, beder vi jQuery om, at vente med funktionaliten før dokumentet er klart.
Linje 3: Vi vælger vores selector. I denne omgang er det containeren. Vi bestemmer os for, at når der klikkes på en container, så skal der ske noget.
Linje 4: Her sker magien. Når der klikkes på en container, finder vi den tætteste container. Det er den vi har klikket på. I den container, finder vi klassen "notShown". Når der klikkes, skal der toggles mellem vis / skjul.
Linje 5-7: Vi lukker for tidligere starter.

Du kan oprette så mange containers som du har lyst til. Det er kun den aktuelle container, som bliver vist.

Eksempelvis kan du gøre følgende:

Kode: Vælg alt

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	</head>
	<body>
		<div class="container">
			<p>The shown text. Except.</p>
			<p class="notShown" style="display:none;">
				This text is not shown. Click the container first.
			</p>
		</div>
		<div class="container">
			<p>The shown text. Except.</p>
			<p class="notShown" style="display:none;">
				This text is not shown. Click the container first.
			</p>
		</div>
		<div class="container">
			<p>The shown text. Except.</p>
			<p class="notShown" style="display:none;">
				This text is not shown. Click the container first.
			</p>
		</div>

		<script>
			$(document).ready(function() {
				$('.container').click(function(){
				    $(this).closest('.container').find('.notShown').toggle();
				})
			});
		</script>
	</body>
</html>
Her vises der 3 simple containers, og du kan klikke på hver eneste for at vise indholdet af "notShown".

Du kan ændre navnene som du lyster, du skal bare huske at rette til i jQuery delen.

vh,


Edit: Jeg glemte vidst at tilføje følgende:
Hvis der er tale om en masse forskellig information, herunder billeder, tekster osv, som ikke skal vises til at starte med, skal du nok skifte <p class="notShown"> ud med <div class="notShown">. Herefter kan du smide så meget information ind, som du har lyst til, og ikke kun tekst.

Hold da op, det var noget af en kode. Den vil jeg lige sætte mig ned og lege med, håber at jeg får tid her i weekenden. Jeg er i gang med et Ninja Turtles projekt, bare sådan lidt hygge, i forbindelse med min uddannelse. Så skal bruge sitet til at lege og blive klogere :-) Men foreløbig tak for hjælpen :-)

Jepsen
Begynder
Indlæg:18
Tilmeldt:8. jan 2015, 03:53

Re: Stort drop down / åben-lukke-box

Indlæg af Jepsen » 9. jan 2015, 18:18

mick skrev: Hold da op, det var noget af en kode. Den vil jeg lige sætte mig ned og lege med, håber at jeg får tid her i weekenden. Jeg er i gang med et Ninja Turtles projekt, bare sådan lidt hygge, i forbindelse med min uddannelse. Så skal bruge sitet til at lege og blive klogere :-) Men foreløbig tak for hjælpen :-)
Jeg håber du finder ud af, hvordan og hvorfor det virker. Hvis du har nogle spørgsmål, må du vende tilbage :-)

vh,

Besvar