Hejsan!
Jag har en fråga och jag vet inte om det går att genomföra, men kanske någon vet. Jag ska lägga ut en sida på ett webbplats som inte stödjer något serverscript så jag måste utnyttja en klientbaserad lösning.
Jag vill göra följande.
Jag gör en sida som ska visa olika fritidsaktiviteter: Badplats, Fiske, Idrott etc.
Det ska listas under varandra med hysat långa texter.
Badplats
Bla bla bla bla.Bla bla bla bla.Bla bla bla bla.Bla bla bla bla.
Bla bla bla bla.Bla bla bla bla.Bla bla bla bla.Bla bla bla bla.
Bla bla bla bla.Bla bla bla bla.Bla bla bla bla.Bla bla bla bla.
Fiske
Bla bla bla bla.Bla bla bla bla.Bla bla bla bla.Bla bla bla bla.
Bla bla bla bla.Bla bla bla bla.Bla bla bla bla.Bla bla bla bla.
Bla bla bla bla.Bla bla bla bla.Bla bla bla bla.Bla bla bla bla. osv.
Jag skulle vilja göra detta så att varje rubrik följs av en kortare text och sedan en "läs mer"-länk. När man klickar på den ska hela texten visas.
Typ
Badplats
Bla bla bla bla.Bla bla bla bla.Bla bla bla bla.Bla bla bla bla.
Bla bla bla bla. ...läsmer
Och när länken klickas ska den dolda texten visas och de efterföljande stycken Fiske, Idrott etc. ska flyttas efter...
Vet inte om det var en förståelig förklaring :)
Är detta genomförbart med inte alltför komplicerad klientscript.
mvh Ulf
<script type="text/javascript>
function sh(elname){
var els=document.getElementById(elname).style;
els.display=(els.display=='hidden')?'':'hidden';
}
</script>
...
<a href="javascript:;;" onclick="sh('item0');">Läs mer</a>
<div id="item0">asdvzd sdfva fv</div>
<a href="javascript:;;" onclick="sh('item1');">Läs mer</a>
<div id="item1">asdvzd sdfva fv</div>
Koden är bara testad i mitt huvud dock, så säg till om nåt inte funkar.
oh, tack...
men det verkar inte fungera när jag kör koden.
texterna visas direkt...jag la de såhär
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<script type="text/javascript">
function sh(elname){
var els=document.getElementById(elname).style;
els.display=(els.display=='hidden')?'':'hidden';
}
</script>
<body>
<a href="javascript:;;" onclick="sh('item0');">Läs mer</a>
<div id="item0">asdvzd sdfva fv</div>
<a href="javascript:;;" onclick="sh('item1');">Läs mer</a>
<div id="item1">asdvzd sdfva fv</div>
</body>
</html>
Ah, jag glömde att lägga till kod för att dölja boxarna skulle vara dolda från början... Och ett litet skriptfel också. :bla
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
function sh(elname){
var els=document.getElementById(elname).style;
els.display=(els.display=='none')?'':'none';
}
</script>
<style type="text/css">
.hiddenitem{
display: none;
}
</style>
</head>
<body>
<a href="javascript:;;" onclick="sh('item0');">Läs mer</a>
<div id="item0" class="hiddenitem">asdvzd sdfva fv</div>
<a href="javascript:;;" onclick="sh('item1');">Läs mer</a>
<div id="item1" class="hiddenitem">asdvzd sdfva fv</div>
</body>
</html>
Hejsan!
Fick till det tror jag...det funkade inte först men jag ändrade lite i funktionen, och skrev
<script type="text/javascript">
function sh(elname){
var els=document.getElementById(elname).style;
els.display=(els.display=='block')?'':'block';
}
</script>
Kan inte så mycket om CSS och javascript, men då började det funka :)
Tackar :) (y)
