Accordion CSS su mobile

[gahan]

Buongiorno a tutti,

ho un problema con la visualizzazione di un sito su mobile.

In questo sito ho utilizzato la proprietà "accordion" presente a questo indirizzo:
accordion

Nel momento in cui navigo il sito su mobile, cliccando sui vari pulsanti non succede nulla.

Mi chiedevo se esistesse un modo per rendere fruibile questa proprietà anche sui dispositivi mobili.

Grazie mille.

[webbeloz]

su che dispositivo mobile lo hai testato?

[gahan]

Ciao,

l'ho testato su un iPhone 3G e su un SAMSUNG e non funge su nessuno dei due.

Grazie per la risposta.

[webbeloz]

se noti nei commenti, anche altri intervengono a dire:

my iPad not working... ecc ecc...

ma se avrai notato non gli danno risposta!

xchè?

semplice...
con un min di CSS chiunque si può rendere conto che i CSS
della demo sono privi di -webkit-

quindi aggiungendo i dovuti CSS, tutto è perfetto.

[gahan]

Quello che non funge sui mobile è la seguente funzione presente nel foglio di stile:

input:checked ~ article{
   opacity:1;
   visibility:visible;
   z-index:100;
   display:block;
}

In che modo si dovrebbe incorporare il -webkit- ?

non mi risulta che si possa fare:
-webkit-input:checked ~ article

il webkit lo uso per le transizioni e per le nuove regole CSS3.

Aspetto delucidazioni in merito.
Grazie.

[webbeloz]

no no, infatti come hai scritto non può essere, ma forse non è neppure questione di -webkit-
quindi dato che non posso testare in questo momento, prova a dare un'altezza...

 height:150px;

questo dovrenne sistemare " slideDown(); "
metti height alle 4 voci del menu... solo al sibling selector. > input

[webbeloz]

verificato:

DEMO originale OK su iPhone4s e 5
iPad idem.

[gahan]

Ciao webbeloz,

io ho un iPhone 3G è la demo non funge.

Inoltre nel mio script (ho effettuato delle piccole modifiche secondo le mie esigenze), l'altezza è impostata.

label#item1 {
       background:url(../img/item1.jpg);
       position:relative;
       float:left;
       width:151px;
       height:151px;
       padding:15px 0 0 15px;	   
       font:35px GOTHIC;
       line-height:30px;
       letter-spacing:-2px;
       text-transform:uppercase;
       color:#222;
       cursor:pointer;
       -moz-box-shadow: 0 0 5px #888;
       -webkit-box-shadow: 0 0 5px #888;
       box-shadow: 0 0 5px #888;
}


input{
       display: none;
}


article{
	position:absolute; 
           font:16px arial;
	color:#fff;
	top:185px; 
	right:10%;
           width:700px;
	height:300px;		
	padding:30px;
	background:rgba(0,0,0,.9);
	border-radius:2px;
	box-shadow:2px 2px 10px #000;
	opacity:0;
	visibility:hidden;
	transition-property:opacity, visibility;
	transition-duration:0.5s;
	-o-transition-property:opacity, visibility;
	-o-transition-duration:0.5s;
	-webkit-transition-property:opacity, visibility;
	-webkit-transition-duration:0.5s;
	-moz-transition-property:opacity, visibility;
	-moz-transition-duration:0.5s;
	}
	

input:checked ~ article{
   opacity:1;
   visibility:visible;
   z-index:100;
   display:block;
   }

A questo punto devo fare qualche piccola modifica al CSS e usare il responsive creando alcuni breakpoint.