Accordion Farben ändern

Arimon

Hallöchen,

ich habe diesen Code in meinem Accordion (klingt echt komisch ::-D )

HTML

<!doctype html><
html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Accordion - Customize icons</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css"> 
 <script>  $(function() {
    var icons = {
      header: "ui-icon-circle-arrow-e",
      activeHeader: "ui-icon-circle-arrow-s"
    };
    $( "#accordion" ).accordion({
      icons: Icons
    });
    $( "#toggle" ).button().click(function() {
      if ( $( "#accordion" ).accordion( "option", "icons" ) ) {
        $( "#accordion" ).accordion( "option", "icons", null );
      } else {
        $( "#accordion" ).accordion( "option", "icons", icons );
      }
    });
  });  
</script></head>

Alles anzeigen

Nun habe ich versucht Farbe ins ganze zubringen. Sprich die Rahmen, die Textfarbe. aber es gelingt mir nicht. habt ihr einen Tipp oder ein Beispiel für mich ?

Vielen Dank für Tipps und Kritik

Gruß
Marcus

Gastl

Das reicht nicht aus. Die *.js und *.css fehlen. Stell das ganze mal online und poste deinen Link.

Warum Englisch?

Arimon

Java würde noch gehe, aber CSS funktioniert nicht richtig mit dem WebAcapella oder ich bin zu dumm
ja keine Ahnung ich versuche das immer in Englisch zu lernen.

http://www.a-brickwedde.de/17.html

- - - Aktualisiert - - -

So hatte ich es erst programmiert allerdings habe ich es nicht geschafft das automatische sliden gegen klicken umzuprogrammieren.

HTML

<style>
#accordion .item {
width: 800px;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 #009090; /* 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;
height: 50px; /* This is the height of the gray portion of each section */
margin-bottom: 3px;
}
#accordion a {
display: block;
height: 50px;
line-height: 50px;
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:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* and of course we musn't forget ie */
padding: 2px;
color: #009090; /* This and the next few lines sets the font up for the header on each box */
text-decoration: none;
font-size: 1.5em;
font-family: Verdana, Arial, Tahoma, sans-serif;
}
#accordion p {
height: 1000px; /* 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.8em;
}
#accordion div:hover {
height: 1400px; /* This is the total height when the scroll unfolds see the 150px in the element above */
}
#accordion div:hover a {
border-bottom: 1px solid #009090;
}
</style>
<div id="accordion">
<div class="item">

Alles anzeigen

djheke

Na, vielleicht ist ja der Ursprung hier zu suchen?!
https://www.webcodegeeks.com/javascript/jqu…ordion-example/

Arimon

Super, vielen Dank ich lese mich mal durch

Tags