[Løst] Legge all tekst inn i "Les mer"

[FreeZeMan83]

Det har seg slik at jeg holder på å lager en side med mye informasjon. Det jeg ønsker er å få samlet mye av denne informasjonen inn i linker som f.eks "Les mer".

 

Når man trykker på linken "Les mer", så skal resten av teksten og bildene komme frem nedenfor.

 

Håper noen vet hvordan man gjør dette.

 

Dette er snakk om en html side. Men hvis det skulle vise seg at det er umulig på html, så har jeg også muligheten til å bruke php.

 

Vennlig hilsen FreeZeMan83

[InsertNumLock]

Du kan løse dette ved hjelp av litt javascript.

 

Jeg mekka sammen et lite eksempel http://vann.is/files.../lesmer-expand/

 

Du trenger følgende:

 

jquery biblioteket:

http://code.jquery.com/jquery-1.8.3.min.js

 

expand koden:

http://vann.is/files...xpand/expand.js

 

css:

http://vann.is/files...xpand/style.css

 

Start med å lage en paragraf og legg ved en klasse som heter expand

 

<p class="expand">Les Mer!</p>

 

Rett under paragrafen lager du en div som får klassen innhold

<div class="innhold">her kommer teksten som skal utvides</div>

 

Last ned de 3 filene og legg dem til i headeren din

 

<link rel="stylesheet" type="text/css" href="style.css" />
 <script type="text/javascript" src="jquery.min.js"></script>
 <script type="text/javascript" src="expand.js"></script>

 

I korte trekk:

Det javascriptet gjør er å gjemme diven "innhold" som standard

 

jQuery(".innhold").hide();

 

Når du klikker på paragrafen med expand klassen så caller du funksjonen som utvider diven

jQuery(".expand").click(function()
 {
jQuery(this).next(".innhold").slideToggle(500);
 });

 

500 tallet som står i parantesen er hastigheten diven åpner seg i. Målt i millisekunder.

Du kan lese mer slideToggle funksjonen her http://docs.jquery.c...cts/slideToggle

Endret 14. januar 2013 av Hille

[FreeZeMan83]

Du kan løse dette ved hjelp av litt javascript.

 

Jeg mekka sammen et lite eksempel http://vann.is/files.../lesmer-expand/

 

Du trenger følgende:

 

jquery biblioteket:

http://ajax.googleap...2/jquery.min.js

 

expand koden:

http://vann.is/files...xpand/expand.js

 

css:

http://vann.is/files...xpand/style.css

 

Start med å lage en paragraf og legg ved en klasse som heter expand

 

<p class="expand">Les Mer!</p>

 

Rett under paragrafen lager du en div som får klassen innhold

<div class="innhold">her kommer teksten som skal utvides</div>[code]

Last ned de 3 filene og legg dem til i headeren din

[code]
<link rel="stylesheet" type="text/css" href="style.css" />
 <script type="text/javascript" src="jquery.min.js"></script>
 <script type="text/javascript" src="expand.js"></script>

 

I korte trekk:

Det javascriptet gjør er å gjemme diven "innhold" som standard

 

jQuery(".innhold").hide();

 

Når du klikker på paragrafen med expand klassen så caller du funksjonen som utvider diven

jQuery(".expand").click(function()
 {
jQuery(this).next(".innhold").slideToggle(500);
 });

 

Ahh.... Dette passer jo egentlig perfekt, ved bruk av javascript. For jeg har lagt til .css og jquery fra før av, så det er nok kun expand.js jeg nå må legge til.

 

Dette var nok den enkleste og beste metoden for meg ja, takker så utrolig mye. Fantastico

[InsertNumLock]

Bare hyggelig.