Hallo Gemeinde,
bei folgendem Code werden die Einzelnen Elemente momentan via Mousover geöffnet und geschlossen.
Was muss geändert werden, damit die einzelnen Elemende via Mausklick öffnen und schließen ?
Edit: Ich hab den Code aus dem Netz und bin fachlichen Fragen gegenüber nicht gut gerüstet... Es funktioniert, aber ich hätt´s gern per Mausklick...
Vielen Dank für eure Hilfe !!!
#accordion .item {
width: 630px;
height: 30px; /* This is the height of the gray portion of each section */
overflow: hidden;
transition: height ease-in-out 500ms; /* This is the bit that makes the slider...slide */
-o-transition: height ease-in-out 500ms;
-moz-transition: height ease-in-out 500ms;
-webkit-transition: height ease-in-out 500ms;
border: 1px solid #ccc; /* This sets the color and width of the border */
border-radius: 5px; /* This sets the roundness of the border corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-bottom: 2px;
}
#accordion a {
display: block;
height: 20px;
line-height: 20px;
background: #eeeeee; /* This is for all the old browsers */
background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* This gradient is for firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* This one is for webkit browsers */
filter: progidXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* and of course we musn't forget ie */
padding: 5px;
color: #333333; /* This and the next few lines sets the font up for the header on each box */
text-decoration: none;
font-family: Verdana, Arial, Tahoma, sans-serif;
}
#accordion p {
height: 150px; /* This and the next few lines sets the font up for the content of each box */
padding: 5px;
font-family: Verdana, Arial, Tahoma, sans-serif;
font-size: 0.9em;
}
#accordion div:hover {
height: 350px; /* This is the total height when the scroll unfolds see the 150px in the element above */
}
#accordion div:hover a {
border-bottom: 1px solid #cccccc;
}
bei folgendem Code werden die Einzelnen Elemente momentan via Mousover geöffnet und geschlossen.
Was muss geändert werden, damit die einzelnen Elemende via Mausklick öffnen und schließen ?
Edit: Ich hab den Code aus dem Netz und bin fachlichen Fragen gegenüber nicht gut gerüstet... Es funktioniert, aber ich hätt´s gern per Mausklick...
Vielen Dank für eure Hilfe !!!
#accordion .item {
width: 630px;
height: 30px; /* This is the height of the gray portion of each section */
overflow: hidden;
transition: height ease-in-out 500ms; /* This is the bit that makes the slider...slide */
-o-transition: height ease-in-out 500ms;
-moz-transition: height ease-in-out 500ms;
-webkit-transition: height ease-in-out 500ms;
border: 1px solid #ccc; /* This sets the color and width of the border */
border-radius: 5px; /* This sets the roundness of the border corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-bottom: 2px;
}
#accordion a {
display: block;
height: 20px;
line-height: 20px;
background: #eeeeee; /* This is for all the old browsers */
background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* This gradient is for firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* This one is for webkit browsers */
filter: progid
XImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* and of course we musn't forget ie */padding: 5px;
color: #333333; /* This and the next few lines sets the font up for the header on each box */
text-decoration: none;
font-family: Verdana, Arial, Tahoma, sans-serif;
}
#accordion p {
height: 150px; /* This and the next few lines sets the font up for the content of each box */
padding: 5px;
font-family: Verdana, Arial, Tahoma, sans-serif;
font-size: 0.9em;
}
#accordion div:hover {
height: 350px; /* This is the total height when the scroll unfolds see the 150px in the element above */
}
#accordion div:hover a {
border-bottom: 1px solid #cccccc;
}
