Tutorial Slide down & up - ein jQuery-Skript um Inhalte in einem Panel ein- und auszublenden - gefunden auf www.w3schools.com
Guckt Euch auch dieses Beispiel hier an, das Ihr direkt in dem Editor ändern und ausprobieren könnt.
Ich beschreibe hier den Einbau in NetObjects Fusion und zeige meine Dateien.
Zunächst kopiert Ihr Euch die Verlinkung zu der jQuery-Datei, das Skript mit der Funktion und die CSS (hier von mir angepasst) zwischen die Head-Tags Eurer Seite.
> Layout markieren > Fenster Layout-Eigenschaften > Button “HTML” > “Zwischen Head Tags”
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style>
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#F4F4F4;
border:solid 1px #999999;
box-shadow: 5px 5px 5px #888888;
border-radius: 5px 5px 0 0;
cursor: pointer;
}
#panel
{
border-radius: 0 0 5px 5px;
background-color:#E2E2E2;
padding-top: 30px;
padding-bottom: 30px;
display:none;
cursor: auto;
}
</style>
Wie Ihr oben in der CSS erkennen könnt, gibt es eine Style-Anweisung für die ID #panel und #flip und noch zusätzlich eine Anweisung nur für die ID #panel, also für das Panel, das ausklappt. Diese könnt Ihr natürlich mit Euren CSS-Anweisungen beliebig anpassen.
Nun zieht Ihr Euch, an der Stelle und auf die Breite wo das Panel erscheinen soll, ein Textfeld auf und fügt die beiden DIVs mit den entsprechenden IDs aus der CSS in den HTML-Code Editor des Textfeldes ein.
> Textfeld doppelklicken (Cursor blinkt) > Fenster “Text-Eigenschaften” > mittlere Button oben “Textfeld” > Button ”HTML” > Code einfügen
<div id="flip">Klicke hier um den Inhalt zu zeigen oder zu verbergen</div>
<div id="panel"><p>Was für ein schönes Foto<p><img id="Sonnenuntergang" height="305" width="960" src="./sonnenuntergang.jpg" alt="Sonnenuntergang" title="Sonnenuntergang"></div>
Mit etwas HTML-Kenntnissen könnt Ihr jeden beliebigen Inhalt dort einbauen, so wie ich z.B. ein Foto, das ich zunächst in der Assets-Verwaltung von NOF eingelesen habe, damit dieses sogleich von NOF mit publiziert wird.
Achtet bei Verlinkungen immer auf die korrekte relative Pfadangabe. In meinem Fall liegt das Foto im gleichen Verzeichnis wie meine Startseite, auf der ich dieses Skript eingebaut habe.
Viel Spaß!
