Größe von Div Box nach Klick auf "mehr Info" bzw "weniger Info" anpassen

[Ritti1989]

Hallo Leute,

ich habe aktuell eine JQuery-Div-Box die sich nach einem Klick auf "Mehr Informationen" ausfährt (auf z.B. 400px) um weiteren Inhalt darzustellen. Bei einem Klick auf "weniger Informationen" kehrt die Box wieder zu ihrer Ausgangsgröße (z.B. 150px) zurück.

Wie kann ich diese DIV-Box mit HTML5 und CSS3 so formatieren, damit diese Funktion ohne JavaScript/JQuery funktioniert, damit die Zusatzinformationen auch ohne aktiviertes JavaScript sichtbar werden.


Danke für die Hilfe


Ritti

 

[tombe]

Habe hier ein paar nette Sache gefunden. So gehts ganz einfach:

<style type="text/css">
label {
    display: block;
    background-color:#808080;
	padding: 5px;
    font-weight: bold;
    width: 100px;
}

input[type=checkbox] {
	display: none;
}

input[type=checkbox]:checked ~ .info {
    height: 500px;
}

.info {
	border: 1px solid;
	width: 200px;
	height: 100px;
}
</style>

<input type="checkbox" id="box">
<label for="box">Klick</label>
<div class="info">Infobox mit ganz viel Text zum Lesen.</div>

 

[Ritti1989]

Die Informationen sollen ja erst nach einem Klick sichtbar werden. Ähnlich wie beim "Akkordeon-Script" von Contao..
Siehe hier beim Punkt "rundum verwöhnt": http://www.olympiahotel.at/stocks-inklusivleistungen.html

Auf dieser Seite ist es mit Jquery gelöst: http://nebenjob-perfekt.de/de/angebote/angeltouren/


bg
Ritti

Hey Tombe,
danke, aber das ist doch kein input-Feld was ich formatieren will, sondern ne div-box?!

bg

 

[tombe]

Hast du das Beispiel mal getestet oder nur den Code (grob) gelesen?

Im obigen Beispiel wird eine unsichtbare Checkbox bzw. die Checked-Eigenschaft benützt um die CSS-Eigenschaften der Div-Box zu verändern.

Die Checkbox wird über das Label angesprochen welches man ganz nach Wünschen formatieren kann.

Damit kannst du auch "Rundum verwöhnt" ganz einfach nachbauen!

 

[Ritti1989]

Okay ich test es mal.. will aber eher "mehr/weniger Informationen" nachbauen