Aufklappbares Menü

[smartjolka]

Hallo allerseits.
Ich habe folgendes Problem:
Ich möchte ein aufklappbares Menü über HTML/CSS in meine App einbinden.
Das Problem ist jedoch, dass die HTML nicht richtig funktioniert (man muss auf ein aufklappbares Feld klicken, dann ein wenig scrollen und dann öffnet sich erst der Content). Im Browser und auf meinem iPhone wird das alles korrekt angezeigt und man kann aus- und einklappen.


<div class="container">
<section class="ac-container">

<div>
<input id="ac-1" name="accordion-1" type="checkbox" />
<label for="ac-1"><h1>ÜBERSCHRIFT</h1><img src="images/arrow_down.png" class="ausklappen"></label>
<article class="ac-large">
<p>TEXTTEXTTEXTTEXTTEXT <hr> </p>
</article>
</div>


Die CSS dazu:

...
.container > header{
padding: 20px 30px 10px 30px;
margin: 0px 20px 10px 20px;
position: relative;
display: block;
text-align: center;
}
.container > header h1{
font-family: Bariol;
font-size: 20px;
line-height: 25px;
position: relative;
font-weight: 400;
color: #129740;
padding: 0px 0px 5px 0px;
}
...

.ac-container{
width: 95%;
margin: 0px auto 0px auto;
text-align: left;
}
.ac-container h1{
width: 75%;
float: left;
font-weight: bold;
}
.ac-container label{
font-family: Bariol;
padding: 5px 20px;
position: relative;
z-index: 20;
display: block;
height: 100px; /*höhe der klickbaren Box*/
cursor: pointer;
line-height: 25px;
font-size: 20px;
color: #129740;
}
...


Es wäre super, wenn ihr mir helfen könntet, da ich wirklich nicht weiß, woran es liegt.:blushing:

Viele Grüße!