Tweet
Hallo,
hab lange nichts mehr gepostet aber nun bin ich mal wieder da um ein Problem dem Forum mitzuteilen.
Es geht um jQuery! Habe im unten genannten Codebeispiel folgendes Problem. Es sind 5 unterpunkte vorhanden, welche sich ausfahren wenn man auf eines drückt. Das funktioniert soweit. Nun möchte ich allerdings, dass sich das (+) bild beim ausklappen in ein (-) verwandelt.
Leider klappt das nicht so ganz.
Habt ihr ideen?
Danke
hab lange nichts mehr gepostet aber nun bin ich mal wieder da um ein Problem dem Forum mitzuteilen.
Es geht um jQuery! Habe im unten genannten Codebeispiel folgendes Problem. Es sind 5 unterpunkte vorhanden, welche sich ausfahren wenn man auf eines drückt. Das funktioniert soweit. Nun möchte ich allerdings, dass sich das (+) bild beim ausklappen in ein (-) verwandelt.
Leider klappt das nicht so ganz.
Habt ihr ideen?
Danke
HTML-Code:
<html> <head> <link rel="stylesheet" href="style.css" type="text/css" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ // Unternehmensprinzipien (out) $("#changediv").click(function() { $('#changedivtext').slideToggle(1000); }); $("#changediv").toggle( function(){ $(this).css({"background-image":"url('principels_on.png')"}); }, function(){ $(this).css({"background-image":"url('principels_off.png')"}); } ); // Ab hier unterpunkte $("#changedivtext").children().each(function() { $(this).children(".principels_point").click(function() { $(this).parent().children(".principels_pointtext").slideToggle(200); if ($(this).css("background-image") == "+.png") { $(this).css({"background-image":"url('-.png')"}); } else { $(this).css({"background-image":"url('+.png')"}); } }) }); }); </script> <title>Demo</title> </head> <body> <div class="content"> <div id="changediv"> </div> <div id="changedivtext"> <!-- Ab hier Unterpunkte für Changedivtext --> <div class="wrapper"> <div class="principels_point"> 1. Verpflichtung zur Qualität </div> <div class="principels_pointtext" id="one">Ich bin Der Text zu Verpflichtung zur Qualitaet</div> </div> <div class="wrapper"> <div class="principels_point"> 2. Beratung ist kostenlos </div> <div class="principels_pointtext" id="two">Ich bin Der Text zu Verpflichtung zur Qualitaet</div> </div> <div class="wrapper"> <div class="principels_point"> 3. Kreativität und Benutzerfreundlichkeit </div> <div class="principels_pointtext" id="three">Ich bin Der Text zu Verpflichtung zur Qualitaet</div> </div> <div class="wrapper"> <div class="principels_point"> 4. Enge Zusammenarbeit </div> <div class="principels_pointtext" id="four">Ich bin Der Text zu Verpflichtung zur Qualitaet</div> </div> <div class="wrapper"> <div class="principels_point"> 5. Keine Massenware sondern Individualität </div> <div class="principels_pointtext" id="five">Ich bin Der Text zu Verpflichtung zur Qualitaet</div> </div> </div> <!-- Ab hier normales Dokument! --> <div class="downtext"> <p>Ich bin der text unter dem Text der erscheint und bin immer sichtbar!</p> <p>TextAAAAAA BBBBB CCCCC etc</p> </div> </div> </body> </html>
Kommentar