Suche im Forum:
Suchen


Autor Nachricht
Beitrag10.06.2011 um 20:35 (UTC)    
Titel: Textfelder aus- und einblenden

Hallo,

ich möchte gerne auf bestimmten Seiten meiner Homepage nur die Überschriften von bestimmten Texten schreiben und dann, wenn der Besucher auf diese Überschrift klickt, öffnet sich das dazugehörige Textfeld. Also ähnlich wie >> hier auf der Seite. Habe leider noch keinen Code dafür gefunden, aber vielleicht kann mir hier einer weiterhelfen. Danke.
Beitrag10.06.2011 um 21:30 (UTC)    
Titel:

Hey.
Habe hier was.

Zitat:
<script language="Javascript" type="text/javascript">
function clip (id) {
if (document.getElementById("span_" + id).style.display == 'none') {
document.getElementById("img_" + id).src = "http://kohompa.bplaced.net/images/minusimg.jpg";
document.getElementById("span_" + id).style.display = "block"; }
else {
document.getElementById("img_" + id).src = "http://kohompa.bplaced.net/images/plusimg.jpg";
document.getElementById("span_" + id).style.display = "none"; } }
</script>


#########Box Nummer 1############
<img src="http://kohompa.bplaced.net/images/plusimg.jpg" id="img_1]" width="9" height="9" border="0" /></a> </b>
<a href="javascript:clip('1')" style="text-decoration: none;">
Details</a><b><span id="span_1" style="display:none"><br />
Hier steht ihr Text ...</span><br />

#########Box Nummer 2############
<img src="http://kohompa.bplaced.net/images/plusimg.jpg" id="img_2" width="9" height="9" border="0" /></a> </b>
<a href="javascript:clip('2')" style="text-decoration: none;">
Details</a><b><span id="span_2" style="display:none"><br />
Hidden Text 2....</span><br />



Wenn du noch weitere Boxen machen willst musst du immer noch die ID anpassen, das sind die zahlen die ich bei Box 2 Rot markiert habe, die dann einfach alle auf " 3 " setzten (im dritten code)

Also hoffe du verstehst alles. Ah und das ganze einfach halt in den Inhalt Bereich einfügen.

Gruß Shäf
______________
Beitrag11.06.2011 um 08:59 (UTC)    
Titel:

Danke für die schnelle Antwort und den guten Code!

Eine Frage habe ich noch: Wenn man jetzt auf Box Nummer 1 klickt, öffnet sich ja richtigerweise Text 1. Wenn man danach auf Box Nummer 2 geht, kommt Text 2 hinzu. Ist es auch möglich, dass bei dem letzten Fall Text Nummer 1 automatisch verschwindet, sodass man immer nur ein geöffneten Text auf der Seite hat?

EDIT: Da ist ja ein kleines Bild in dem Code (dieses + bzw. das - Symbol). Darf ich das legal auf meiner Homepage verwenden?


Zuletzt bearbeitet von martin-tiere am 11.06.2011, 10:00, insgesamt einmal bearbeitet
Beitrag11.06.2011 um 09:55 (UTC)    
Titel:

Hey,
Wegen dem Automatisch schließen, habe hier mal noch ne andere wariante, die ich persönlich auch schöner finde.

Zitat:
<script type="text/javascript" src="http://flashstyler.xe.cx/tools/SpryAccordion.js"></script>
<link rel="stylesheet" type="text/css" href="http://flashstyler.xe.cx/tools/SpryAccordion.css" />
<style type="text/css">
<!--
.AccordionPanelOpen .AccordionPanelTab {
background-color: #EEEEEE;
}
.AccordionPanelTabHover {
color: #555555;
}
.AccordionPanelOpen .AccordionPanelTabHover {
color: #555555;
}
.AccordionFocused .AccordionPanelTab {
background-color: #EEEEEE;
}
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
background-color: #09C;
}
-->
</style>
<div id="Accordion1" class="Accordion" tabindex="0">

<!--Anfang eines "Klaptextes"-->
<div class="AccordionPanel">
<div class="AccordionPanelTab">Titel über dies...</div>
<div class="AccordionPanelContent">Inhalt 1</div>
</div>
<!--Ende eines "Klaptextes"-->

<div class="AccordionPanel">
<div class="AccordionPanelTab">Titel über das...</div>
<div class="AccordionPanelContent">Inhalt 2</div>
</div>

<div class="AccordionPanel">
<div class="AccordionPanelTab">Tite über jemanden...</div>
<div class="AccordionPanelContent">Inhalt 3</div>
</div>

</div>
<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
//-->
</script>


Da im Stylesheet bereich (<style type="text/css"> ...</style>) kannst du die Faben der Balken einstellen. Da musst einfach mal etwas Experimentieren was zu was gehört und wie es am besten aussieht.

Und noch was zu den kleinen Icons, die habe ich erstellt, und die liegen bei mir aufem Server, also kannst du sie mit guten gewissen benutzen ^^...

gruß Shäf
______________
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de