Drop down text box

Tags:    html css

<< < 12 > >>
Jeg har en side ( HTML) der indeholder alt for lange tekster. Siden bliver utrolig lang, så min ønske er at lave nogle "Drop down text" felter.

Se billede - Se billede






13 svar postet i denne tråd vises herunder
3 indlæg har modtaget i alt 6 karma
Sorter efter stemmer Sorter efter dato
http://pastebin.com/qwardGiv burde meget gerne være lige til, med flere tekster der skal udvides. Beklager at det er blevet en smule rodet, men det burde ikke være specielt svært at gå til. Du bør blot huske på at folk med javascript slået fra, ikke vil kunne se disse tekster :)

____________

Opdaterer lige denne post med et fiddle, så det kan ses i aktion. Samtidigt er der også her gjort brug af a tags, da dette var sidste efterspørgsel.

http://jsfiddle.net/XtTse/4/



Indlæg senest redigeret d. 22.11.2013 15:18 af Bruger #17260
http://jsfiddle.net/XtTse/ kunne også være en simpel løsning :-)



<a href="#" id="expandText1" style="display1: block;">Læs mere</a> ?



Super - tak for hurtig svar.


men hvor skal dette sætte ind i min dokument ?
--------------------------------------

$("#expandText").click(function() {
$("#moreText").fadeIn('slow');
});

-----------------------------------

og er der noget tilsvarende der kan sættes til sidst i teksten som lukker teksten sammen igen ?





Husk script language="JavaScript" tag.
Fold kodeboks ind/udJScript kode 


Kan være i <head> eller omkring ved din fade div.



Indlæg senest redigeret d. 22.11.2013 01:25 af Bruger #17554
http://jsfiddle.net/XtTse/1/

opdateret version, så teksten også kan skjules.

Du skal sætte javascript delen ind i en inkluderet js fil, eller i et script tag, gerne i bunden af dit dokument.

Foruden dette, skal du huske at inkludere jQuery-biblioteket.

Ønsker du ikke at inkludere det, kan løsningen også opnås (i en simplificeret version) med følgende i stedet, http://jsfiddle.net/XtTse/2/

________________________________

Kan være i <head> eller omkring ved din fade div.


http://stackoverflow.com/questions/3037725/is-it-wrong-to-place-the-script-tag-after-the-body-tag

http://developer.yahoo.com/performance/rules.html#js_bottom

Bare lige for at få placeringen på det rene. Det er selvfølgelig op til en selv, og i dette tilfælde har det ikke den helt store effekt. But best practice :)



Indlæg senest redigeret d. 22.11.2013 01:35 af Bruger #17260
Nicklas - jeg er meget taknemmelig for din hjælp, men det siver ikke ind.

Er det muligt at du oploader et html dokument, der viser det jeg ønsker, både "vise" og "Skjule" - jeg er ikke noget haj til det her.

Gratis opload af filer



http://pastebin.com/pEHSCGDb skulle meget gerne være lige til at kopiere fra :)



Hej Nicklas

Tak for fremsendte det virker. Men jeg troede at hvis jeg først havde første "Se mere" tags, kunne disse kopieres nedad på siden så der blev flere og flere, men så let er det åbenbart ikke.

Har forsøgt at gøre følgende - uden at ramme rigtigt:

Punkt 1
Siden 1976 har der altid være gang i et eller flere bla. bla . bla.<br />
Senere blev det discus. - 1. gang jeg forsøgte med disse flotte fisk, bla. bla . bla.<br />
<br />

<button id="expandText1" style="display1: block;">Læs mere</button>

<div id="moreText1" style="display1: none;"></span><span class="broedtekst"> <br />
Killi - et spændende alternativ. De krævede bla. bla . bla. </span>

</div>

Punkt 2
Lorem ipsum dolor sit amet, bla. bla . bla.


<button id="expandText2" style="display2: block;">Læs mere 2</button>

<div id="moreText2" style="display2: none;">
Aliquam vel est nec elit congue congue eget at bla. bla . bla.

</div>

Punkt 3
Nam pharetra augue sed enim commodo, bla. bla . bla.


<button id="expandText3" style="display3: block;">Læs mere 2</button>

<div id="moreText3" style="display3: none;">
fermentum malesuada augue blandit. Aliquam erat bla. bla . bla.

</div>

------------------------------------
<script src="http://code.jquery.com/jquery-git.js"></script>
<script>
$("#expandText1").click(function() {
if($(this).text() == "Læs mere") {
$(this).text("Skjul tekst");
$("#moreText1").stop().fadeIn('slow');
} else {
$(this).text("Læs mere");
$("#moreText1").stop().fadeOut('slow');
}
});

</script>
<script>

$("#expandText2").click(function() {
if($(this).text() == "Læs mere") {
$(this).text("Skjul tekst");
$("#moreText2").stop().fadeIn('slow');
} else {
$(this).text("Læs mere");
$("#moreText2").stop().fadeOut('slow');
}
});
</script>

<script>

$("#expandText3").click(function() {
if($(this).text() == "Læs mere") {
$(this).text("Skjul tekst");
$("#moreText3").stop().fadeIn('slow');
} else {
$(this).text("Læs mere");
$("#moreText3").stop().fadeOut('slow');
}
});
</script>



Der er nu som ønsket. og jeg takker dig for din indsats.



Steen


PS: i stedet for en "Button" kan det så ændres til et almindeligt link der kun vises som tekst "Læs mere"

<button class="expandText" data-num="1" tyle="display: block;">



<< < 12 > >>
t