Problem bei Akkordeon mit HTML, CSS

[haberkorn]

Hallo alle zusammen,

ich habe ein kleines Problem bei einem Akkordeon, welches ich mit HTML, CSS gebaut habe. Das Akkordeon wird für eine Frage-Antwort Seite verwendet.
Da der Content ziemlich klein ist und die Texte unterschiedlich lang habe ich Platzprobleme mit "min-height".
Ich möchte für die Antworten nun immer eine eigene Höhe angeben um so Platz zu sparen.
Frage ist wie?
Habe schon einiges ausprobiert, aber elider funktioniert es nicht so wie ich es will. :(

Ich bedanke mich schomal im vorraus.

HTML:
<div class="accordionMenu">
<div id="frage1" class="menuSection">
<h2><a href="#frage1">...</a></h2>
<p>... </p>
</div>
<div id="frage2" class="menuSection">
<h2><a href="#frage2">...</a></h2>
<p>Ganz...</p>
</div>
<div id="frage3" class="menuSection">
<h2><a href="#frage3">...</a></h2>
<p>....</p>
</div>
<div id="frage4" class="menuSection">
<h2><a href="#frage4">...</a></h2>
<p>...</p>
</div>
<div id="frage5" class="menuSection">
<h2><a href="#frage5">...</a></h2>
<p>...</p>
</div>
<div id="frage6" class="menuSection">
<h2><a href="#frage6">...</a></h2>
<p id="frage6">...</p>
</div>
</div>

CSS:
.accordionMenu {
padding: 0px;
width: 500px;
font: 13px 'Source Sans Pro', sans-serif;
background: #fff;
}
.accordionMenu h2 {
margin:5px 0;
padding:0;
}
.accordionMenu h2 a {
font-size: 14px;
display: block;
font-weight: normal;
color:#fff;
text-decoration:none;
margin:0;
padding:3px;
padding-left:5px;
background: #b90529;

}

.accordionMenu :target h2 a {
font-weight:bold;
}

.accordionMenu h2 a:hover,
.accordionMenu h2 a:focus,
.accordionMenu h2 a:active {
font-weight:bold;
}

.accordionMenu p {
padding:0px;
padding-bottom:0px;
margin:0;
height: 0;
overflow: hidden;
-moz-transition: height 0.3s ease-in;
-webkit-transition: height 0.3s ease-in;
-o-transition: height 0.3s ease-in;
transition: height 0.3s ease-in;
}

.accordionMenu :target p {
overflow: auto;
min-height:120px;
padding: 0px;
}

 

[phzu]

Hallo!

Ich wuerde an deiner Stelle nicht divs fuer das Ganze hier verwenden, sondern Listen.

<div id="content">
   <ul id="fragen>
      <li class="frage">
         Dies ist Frage 1....
         <ul class="antworten">
            <li>Antwort 1</li>
            <li>Antwort 2</li>
            <li>Antwort 3</li>
         </ul>
      </li>
            <li class="frage">
         Dies ist Frage 2....
         <ul class="antworten">
            <li>Antwort 1</li>
            <li>Antwort 2</li>
            <li>Antwort 3</li>
         </ul>
      </li>
   </ul>
</div>

Mittels ein wenig JavaScript bzw. JQuery kannst du dann die Formatierung bearbeiten.

Hoffe du verstehst ein wenig was ich meine ;)

Ach ja, wie meinst du das mit der eigenen Hoehe? Willst du praktisch im Bereich der Antworten scrollen? Das koenntest du mit overflow: scroll machen. Falls es das ist was du meinst.

 

[Cheffchen]

wo ist der Link zu Seite?
bei css sachen immer bitte Link, das macht es den helfer um einiges leichter.

also p als akkordion ist mutig aber egal.
in .accordionMenu p sagst ja height: 0; und deswegen funktioniert das alles nicht mehr so richtig denn transition ändert nicht die höhe.
das ist das richtige css, achso wenn beim beitrag schreiben auf erweitert gehst hast auch mehr tags wie PHP, HTM oder code.

habe nur in den letzten beiden classen was geändert

.accordionMenu {
padding: 0px;
width: 500px;
font: 13px 'Source Sans Pro', sans-serif;
background: #fff;
}
.accordionMenu h2 {
margin:5px 0;
padding:0;
}
.accordionMenu h2 a {
font-size: 14px;
display: block;
font-weight: normal;
color:#fff;
text-decoration:none;
margin:0;
padding:3px;
padding-left:5px;
background: #b90529;

}

.accordionMenu :target h2 a {
font-weight:bold;
}

.accordionMenu h2 a:hover,
.accordionMenu h2 a:focus,
.accordionMenu h2 a:active {
font-weight:bold;
}

.accordionMenu p {
    padding:0px;
    padding-bottom:0px;
    margin:0;
    /* [disabled]height: 0; */
    display:none;
    overflow: hidden;
    -moz-transition: height 0.3s ease-in;
    -webkit-transition: height 0.3s ease-in;
    -o-transition: height 0.3s ease-in;
    transition: height 0.3s ease-in;
}

.accordionMenu :target p {
    overflow: auto;
    /* [disabled]min-height:120px; */
    padding: 0px;
    display: block;
}

das IE8 ausschliesst ist dir klar, also nichts richtig wichtiges so machen wie impressum :O)

Cheffchen

@phzu das ändert ja nichts an die css fehler wenn html änderst :O)

 

[phzu]

Schon klar. Aber wie du ja schon geschrieben hast, ist es nicht immer optimal das <p> Tag dafuer zu verwenden.

 

[haberkorn]

@Cheffchen: Vielen Dank es funktioniert! :)
Da die Seite jetzt erst online geht bringt ein Link leider nicht viel..
Ich habe vorher noch keine Seite komplett umgesetzt und deswegen Java & PHP außen vor gelassen.
Und wer den IE benutzt ist jetzt einfach selbst Schuld