Avatar billede nemlig Professor
22. maj 2012 - 14:00 Der er 6 kommentarer og
1 løsning

Vis og skjul HTML Div

Jeg fandt en god vejledning på nettet:

http://www.minitek.gr/tutorials/javascript-tutorials/item/14-how-to-dynamically-display-hide-html-divs.html

Vejledningen viser hvordan en enkelt div-blok skjules og vises ved hjælp af javascript.
Jeg har et ønske om, at lave en html-side, hvor det skal være muligt at skjule/vise flere blokke uafhængigt af hinanden.
Jeg må kunne nøjes med en enkelt javascript-function, men har brug for hjælp til omskrivningen.

Nogen der kan bidrage til løsningen?
Det kan også være link til en vejledning på nettet.
Avatar billede claes57 Ekspert
22. maj 2012 - 14:09 #1
jeg har nogle div'er med id sat til f0, f1, f2, f3 osv og skal kun vise en ad gangen

var taellermin=0;
var taellermax=5;
function vis(mnu) {
var i=taellermin;
for (i=taellermin;i<=taellermax;i++) {
    document.getElementById("f"+i).style.display = "none";
}
document.getElementById("f"+mnu).style.display = "";
}

jeg starter de enklete div'er med
<div id="f4" style="display:none;">

og har en lille menu med fx
<a href="#"><span class="menu1" onclick="vis(1);">Data</span></a>
til at åbne div med id=f1
Avatar billede nemlig Professor
22. maj 2012 - 15:19 #2
Hmmm - jeg kan ikke helt hitte ud af det.
Jeg har prøvet at omskrive den første kode til:

function hideText(idnr) {
document.getElementById('textblock_div'+idnr).style.display='none';
document.getElementById('more_btn'+idnr).style.display='inline';
}
function showText(idnr) {
document.getElementById('more_btn'+idnr).style.display='none';
document.getElementById('textblock_div'+idnr).style.display='inline';
}

Umiddelbart ser det ud til at virke efter hensigten.

Men der skal lige leges lidt.
Avatar billede nemlig Professor
22. maj 2012 - 15:40 #3
Det lader til at løsningen ovenfor virker efter hensigten.
Jeg vil så gerne lave en "Skjul alle" funktion, og tager afsæt i dit forslag til en gennemløbe en funktion et antal gange. Men der sker ingenting. Kan du gennemskue hvorfor:

<script type="text/javascript" language="javascript">   
function hideText(idnr) {
document.getElementById('textblock_div'+idnr).style.display='none';
document.getElementById('more_btn'+idnr).style.display='inline';
}
function showText(idnr) {
document.getElementById('more_btn'+idnr).style.display='none';
document.getElementById('textblock_div'+idnr).style.display='inline';

var taellermin=0;
var taellermax=5;
function skjul() {
var i=taellermin;
  for (i=taellermin;i<=taellermax;i++) {
    document.getElementById('textblock_div'+i).style.display='none';
    document.getElementById('more_btn'+i).style.display='inline';
  }
}
</script>

Jeg kalder skjul() sådan her:
<a href="java script:void()" onClick="skjul()" />Skjul alt</a>
Avatar billede nemlig Professor
22. maj 2012 - 15:45 #4
nåhhh - fordi der ikke må være huller i nummerrækkefølgen.
Det virker når jeg ændrer tælleren fra 1-4 (jeg havde ingen 0).

Jeg tror dælme det spiller - så smid et svar. Jeg blev jo inspireret af din kode med løkken.
Avatar billede claes57 Ekspert
23. maj 2012 - 10:13 #5
bare luk selv - loop var bare for at slippe for at holde styr på hvilken div, der var åben - så var det lettere at lukke alle først, og så åbne den ønskede.
Avatar billede nemlig Professor
23. maj 2012 - 18:54 #6
Hejsa. Jeg samler ikke, så smid bare et svar. Desuden kunne jeg jo bruge dit bidrag.
Avatar billede claes57 Ekspert
23. maj 2012 - 19:09 #7
ok, så...
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester