Div a comparsa con i css

**djdalle** · 26-09-2008, 11:14

Ciao a tutti! Volevo chiedere se mi potreste aiutare per creare un div a comparsa (è una giornata che faccio ricerche ma non riesco a trovare qualcosa di simile!).

Questa è la pagina in questione:
Sito

Vorrei riuscire a fare in modo che la parte rosa non compaia finchè non si clicca sulla parte viola (e viceversa), facendo così scorrere automaticamente tutto quello che c'è sotto.

Questo è il codice, se era possibile evitare il javascript meglio

Questo è l'XHtml

codice:

<body>
      <div class="f25"> 
        <div class="top" style="background:#7f005c;"> 
          <div class="p5">Menu2</div>
        </div>
        <div class="elencone"> 
          <div class="spazio"></div>
          <div class="elenchino"> 
            Lorem ipsum dolor sit amet etc etc etc :-P Lorem ipsum dolor sit amet etc etc etc :-PLorem ipsum dolor sit amet etc etc etc :-PLorem ipsum dolor sit amet etc etc etc :-P
          </div>
          <div class="clear"></div>
        </div>
        <div class="spazio"></div>
        <div class="top" style="background:#7f005c;"> 
          <div class="p5">Menu 1</div>
        </div>
        <div class="elencone"> 
          <div class="spazio"></div>
          <div class="elenchino"> 
            Lorem ipsum dolor sit amet etc etc etc :-P Lorem ipsum dolor sit amet etc etc etc :-PLorem ipsum dolor sit amet etc etc etc :-PLorem ipsum dolor sit amet etc etc etc :-P
          </div>
          <div class="clear"></div>
        </div>
      </div>
</body>

Questo invece il Css

codice:

* {margin:0; padding:0;}

body {text-align:center;
	padding:5px 0 0 0;
	font: 0.8em/1.25 Geneva, Arial, Helvetica, sans-serif;
	color:#606;
	background:#FFF;}

div.clear {clear:both;}
div.elenchino {margin:0 2%; width:96%; color:#007; text-align:left;}
div.elencone {background:#FFA9FF;}
div.f25 {float:left; width:24.9999%;}
div.p5 {padding:5px 0;}
div.spazio {clear:both; padding:5px 0 0 0;}
div.top {color:#FFF; text-align:center;}

**salasir** · 26-09-2008, 11:41

Guarda se questo fa al caso tuo.

**djdalle** · 26-09-2008, 13:53

Ok... avevo chiesto senza javascript comunque quello funziona. Per ora tengo quello.

C'è modo eventualmente di assegnare il comando a una class anzichè a un Id. Perchè di mostrare dei div ne ho bisogno su più punti della pagina.

Non so più se scrivere qua, rispondere all'altro post che mi hai linkato o andare in javascript!!!

Comunque grazie

**fcaldera** · 26-09-2008, 13:59

nessuna delle tre: sposto il thread in javascript
Ciao

**djdalle** · 26-09-2008, 14:27

Ok... il codice ho visto che funziona però c'è un piccolo problema. Sulla scritta per aprire il div bisogna cliccarci 2 volte prima di vedere l'effetto. Perchè?

E poi ripongo la domanda di prima. E' possibile assegnare il comando a una classe (o a più Id senza dover ripetere ogni volta tutto il codice)?

Posto il nuovo codice

codice:

<script language="JavaScript">
<!--
function mostra(){
var el=document.getElementById('testo');
el.style.display=(el.style.display=='none')?'block':'none';
} 
//-->
</script>
</head>

<body>
      <div class="f25"> 
        <div class="top" style="background:#7f005c;"> 
          <div class="p5">Menu2</script></div>
        </div>
        <div id="testo"> 
          <div class="spazio"></div>
          <div class="elenchino"> 
            Lorem ipsum dolor sit amet etc etc etc :-P Lorem ipsum dolor sit amet etc etc etc :-PLorem ipsum dolor sit amet etc etc etc :-PLorem ipsum dolor sit amet etc etc etc :-P
          </div>
          <div class="clear"></div>
        </div>
        <div class="spazio"></div>
        <div class="top" style="background:#7f005c;"> 
          <div class="p5">Menu 1</div>
        </div>
        <div class="elencone"> 
          <div class="spazio"></div>
          <div class="elenchino"> 
            Lorem ipsum dolor sit amet etc etc etc :-P Lorem ipsum dolor sit amet etc etc etc :-PLorem ipsum dolor sit amet etc etc etc :-PLorem ipsum dolor sit amet etc etc etc :-P
          </div>
          <div class="clear"></div>
        </div>
      </div>
</body>

**djdalle** · 27-09-2008, 12:01

up

**cavicchiandrea** · 27-09-2008, 12:16

Originariamente inviato da djdalle

E poi ripongo la domanda di prima. E' possibile assegnare il comando a una classe (o a più Id senza dover ripetere ogni volta tutto il codice)?

Per capirci, vuoi mostre tutti i div che hanno la classe x e non la classe y, oppure assegnare il comando javascript mostra/nascondi ad una classe specifica.

prova cosi:

codice:

function mostra(){
var el=document.getElementsByTagName('div');
for(i=0; i<el.length; i++){
if(el[i].className=='spazio')
el[i].style.display=(el[i].style.display=='' || el[i].style.display=='none')?'block' : 'none';
}
}

**djdalle** · 27-09-2008, 12:42

Tipo ho due div con titolo uno sotto l'altro...

Vorrei che cliccando sul primo titolo si apra e chiuda il primo div e cliccando sul secondo titolo si apra e chiuda il secondo div. Ho già visto che ripetendo l'intero codice la cosa funziona; chiedevo appunto se vi era modo di sintetizzare il codice. tutto qua.

Il vero problema al momento però rimane l'altro cioè quello che per aprire il div bisogna cliccare 2 volte sul titolo

**cavicchiandrea** · 27-09-2008, 13:05

Prova cosi

codice:

function mostra(id){
var el=document.getElementById(id);
el.style.display=(el.style.display=='' || el.style.display=='none')? 'block' : 'none';
}

che richiami cosi:

codice:

<body>
      <div class="f25"> 
        <div class="top" style="background:#7f005c;"> 
          <div class="p5">Menu2</div>
        </div>
        <div id="testo"> 
          <div class="spazio"></div>
          <div class="elenchino"> 
            Lorem ipsum dolor sit amet etc etc etc :-P Lorem ipsum dolor sit amet etc etc etc :-PLorem ipsum dolor sit amet etc etc etc :-PLorem ipsum dolor sit amet etc etc etc :-P
          </div>
          <div class="clear"></div>
        </div>
        <div class="spazio"></div>
        <div class="top" style="background:#7f005c;"> 
          <div class="p5">Menu1</div>
        </div>
        <div id="testo1"> 
          <div class="spazio"></div>
          <div class="elenchino"> 
            Lorem ipsum dolor sit amet etc etc etc :-P Lorem ipsum dolor sit amet etc etc etc :-PLorem ipsum dolor sit amet etc etc etc :-PLorem ipsum dolor sit amet etc etc etc :-P
          </div>
          <div class="clear"></div>
        </div>
      </div>
</body>

**djdalle** · 27-09-2008, 13:47

Ottimo!!! PERFETTO!! Grazie milleeeee!!!

Discussione: Div a comparsa con i css

Strumenti discussione

Ricerca discussione

Visualizza

Div a comparsa con i css

Permessi di invio