Just nu i M3-nätverket
Gå till innehåll

Dölja och visa löpande text med HTML o CSS


Jompan

Rekommendera Poster

Jag håller på med en programsida i en årskalender, och vill därför dölja delar av informationen för att läsaren lättare ska kunna se helheten. Således en funktion för 'Läs mer' resp 'Dölj'.

 

Hur kodar jag detta?

 

// Jompan

Länk till kommentar
Dela på andra webbplatser

Med css kan man sätta "display:none" resp "display: block" på element för att styra synligheten.

 

Med javascript kan man styra denna css på elementet alternativt lägga till och ta bort css-klass .hide {display: none} 

 

 

Med jQuery skulle det kunna se ut så här:

<p><a href="#" class="btnToggle">Show / hide</a></p>
<div class="hide-at-load toggleElement">
    <p>This is some content that is hidden at page load but visible when clicked on link above.</p>
</div>
$(function(){
    $(".hide-at-load").hide(); //gömmer divven när sidan laddats
    $(".btnToggle").on("click",function(e){
        e.preventDefault(); //avaktivera vanliga klick-eventet
        $(this).parent().next(".toggleElement").toggle();
    });
});

Förutsätter att följden på knapp och element inte ändras.

 

Se live-exempel: http://jsfiddle.net/3HG8e/

Länk till kommentar
Dela på andra webbplatser

Nja, där fick jag ingen framgång.

Behövs det inte några koder i CSS-filen också?

 

Jag har redan en övergripande <div> och </div> som innehåller ett flertal stycken.

Ett av dessa stycken i mitten vill jag kunna dölja för att göra sidan mer tillgänglig om någon vill se helheten.

Ska jag då lägga in en ny <div> </div> runt detta aktuella stycke?

 

// Jompan

Länk till kommentar
Dela på andra webbplatser

Du behöver inte css för själva visa/dölj-funktionen - men för att styra hur det ser ut, men du har väl redan mallar för det?

 

Kan du visa ditt kodavsnitt du beskriver?

Länk till kommentar
Dela på andra webbplatser

Så här ser det ut i min kod:

<p>
<b>Onsdag 26 februari<br>Cosmos, kl 19</b>
</p>
<p>
<a href="http://www.riksteatern.se/alskaren" target="blank"><b>Älskaren</a></b><br>
Ett skruvat relationsdrama av Harold Pinter som överraskar med komiska och oväntade vändningar.
Vi möter det gifta paret Sara och Richard som har varsitt förhållande vid sidan om – med den andras goda minne.
</p>
<p>
Under pjäsens gång förstår vi att allt är en lek. Men vad händer när leken går dem ur händerna och utvecklas till
ett maktspel? 
</p>
<p>
Pinter visar i denna klassiska enaktare upp äktenskapets dramatik och svarta humor. Vi får upptäcka
skikt efter skikt i förhållandet mellan makarna, och lockas till både skratt och eftertanke.
</p>
<p>
Harold Pinter (1930-2008) är en av de största moderna brittiska dramatikerna. Hans genombrott blev Fastighetsskötaren 1959. 
Pinters återkommande tema är maktspel, där rollfigurerna byter plats och där man sällan anar utgången. 
Pinter tilldelades Nobelpriset i litteratur 2005.
</p>
<p>
<b>Medverkande</b><br>
Maria Selbing och Per Burell
</p>
<p>
<b>Föreställningens längd</b><br>
Ca 1 tim och 15 min (ingen paus)
</p>
<p>
<b>Producent</b><br>
Riksteatern
</p>

Jag vill dölja texten från "Under pjäsens gång ... " till ... " i litteratur 2005." med VISA MER resp DÖLJ.

 

Informationen ligger som del 1 av 3 inom ett övergripande block <article id="content"> </article>

 

// Jompan

Länk till kommentar
Dela på andra webbplatser

Jag är ledsen men jag förstår inte instruktionen.

 

Har du något annat exempel (på lägre nivå) där jag kan kopiera/justera koder?

 

// Jompan

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

×
×
  • Skapa nytt...