Javascript-oppførsel uten javascript

[kongen]

Jeg har denne koden:

<a href="#">Les mer</a> <a href="#">Lukk</a>
<div>masse masse tekst</div>

div'en skal være usynlig, og når linken "Les mer" klikkes så skal div'en bli synlig. Så skal div'en igjen bli usynlig når "Lukk" klikkes.

Hvordan kan dette gjøres uten Javascript?

 

[adeneo]

Nei, det kan ikke gjøres uten javascript med anchors.

Det kan dog gjøres med CSS3 og litt triksing og miksing dersom du forandrer litt

<style>
    #lesmer, #lukk {display:none;}
    label {cursor: pointer}

    #lesmer:checked ~ #mer {display:block}
    #lukk:checked ~ #mer {display:none}
</style>

<input type="radio" id="lesmer" name="test" />
<label for="lesmer">Les mer</label>

<input type="radio" id="lukk" name="test" checked="checked"  />
<label for="lukk">Lukk</label>

<div id="mer">masse masse tekst</div>

Edit fiddle - JSFiddle

Her har jeg "jukset" med skjulte radiobokser, samt :checked og adjacent sibling selectoren.

 

[kongen]

Takk Det funker i Firefox. Noen tips til å få det til å virke i IE8?

 

[adeneo]

Du kan bare glemme å få det til å virke i IE8, adjacent/general sibling selectoren virker i IE7 og opp, men :checked virker kun i IE9 og opp.

Det har ingenting for seg å støtte IE8 uansett.

 

[kongen]

OK.

Da er det samme grunn med denne kanskje, at man ikke kan bruke sprites og :checked for å bytte bilde:

https://www.webforumet.no/forum/html-css/23394-css-sprites-gammel-ie.html

 

[Guntherman]

Nei, det kan ikke gjøres uten javascript med anchors.

Det kan dog gjøres med CSS3 og litt triksing og miksing dersom du forandrer litt

Joda Blir bare IE9 og opp dette også, så det er vel ingen forbedring strengt tatt. Bare enda et triks å ha i ermet.

<a href="#tekst">Les mer</a> <a href="#">Lukk</a>
<div id="tekst">masse masse tekst</div>

#tekst {
  display: none;
}

#tekst:target {
  display: block;
}

 

[kongen]

Hva hvis jeg ønsker at div'en skal være synlig som standard til alle med IE8 og nedover, hvordan kan jeg gjøre det?

Alt ville blitt så mye enklere hvis ingen skrudde av javascript. Det burde være forbudt å lage browsere hvor man kan tukle med innstilliger. Hvis alle hadde javascript på, så kunne man jo bare brukt javascript...

 

[Guntherman]

Da kan du f.eks. laste et eget stylesheet for IE8 og nedover på denne måten :

<!--[if lt IE 9]>
<link rel="stylesheet" href="ie.css">
<![endif]-->

(if lt IE 9 betyr "if less than IE 9")

I den css-filen legger du for eksempel inn dette :

.tekstdiv {display: block;}
.lesmerknapp {display: none; visibility: hidden;}

 

[kongen]

Hvordan ville dette bli hvis man likevel valgte å gjøre det med javascript (unobtrusive JavaScript)?