Ausklappbare Links

    Hallo,
    ich habe auf einer Seite was schönes entdeckt und wollte Fragen ob ich das mit Evo11 auch realisieren kann.
    Ich hoffe ihr könnt die Bilder sehen.
    Es geht darum, das auf einer Seite "Links" mit Namen von Leuten (Bild "seite01") sein sollen und wenn man diese anklickt, verschiebt es sich nach unten und es erscheint die Personalien von den Leuten (Bild "seite02")

    Wurde hier im Forum schon ausführlich behandelt...such mal nach Akkordion :)


    Hier könntest Du auch fündig werden...Akkordion

    Experience is a wonderful thing, it enables you to recognize a mistake when you make it again!

    Einmal editiert, zuletzt von Frex ()

    So ich habe jetzt den Code eingebaut aber folgende Probleme treten auf.


    Der Code ist ja nur für 4 Sektionen und ich habe sie auf 9 Sektionen erweitert.
    1.Doch leider kommt dann ein Scrollbalken, das soll so nicht sein.


    2.Desweiteren gibt es das Problem das eine Sektion immer aufgeklappt ist, aber wenn es soll am Anfang immer alles geschlossen sein.


    3.Und wie ändere ich die Farbe des Textes und die Schriftart und Schriftgröße?

    Ein bisschen Kenntnisse in HTML solltest du haben ! Hier mal die Kurzfassung !


    Das unter "4" Seo&code vor dem </head> Tag


    HTML
    1. <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    2. <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    3. <script> $(function() { $( "#accordion" ).accordion(); }); </script>


    Dann noch den Code in ein HTML-OBjekt an der gewünschten Stelle..


    HTML
    1. <div id="accordion"> <h3>Section 1</h3> <div> <p> Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. </p> </div> <h3>Section 2</h3> <div> <p> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> </div> <h3>Section 3</h3> <div> <p> Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> <h3>Section 4</h3> <div> <p> Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p> <p> Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> </div></div>

    Das wäre die Grundausstattung, aber verschönern und anderen Text musst du schon selber machen !

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

    Einmal editiert, zuletzt von zwoemti () aus folgendem Grund: Quellcode Tags hervorgehoben!

    Und wie ändere ich die Farbe des Textes und die Schriftart und Schriftgröße und die Farbe der Dreiecke?


    Gibt es auch die Möglichkeit, wenn ich z. B. Sektion 1 anklicke, das es dann wieder zusammenklappt?
    es bleibt bei mir immer offen

    Lösche oben bei der 3. Zeile den Code und ersetze ihn mit diesem..

    HTML
    1. <script>
    2. $(function() {
    3. $( "#accordion" ).accordion({
    4. collapsible: true
    5. });
    6. });
    7. </script>


    Bezüglich Schriftfarbe gebe ich dir eine vor.


    HTML
    1. <style>
    2. #accordion p {color: red; font-size: 16px;}
    3. </style>

    Weitere Befehle solltest du dir mehr CSS Kenntnisse zulegen !

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

    Einmal editiert, zuletzt von zwoemti () aus folgendem Grund: Quellcode Tags hervorgehoben!

    Super Danke.
    Hast du auch noch den Code für die Überschrift also die Sektion?
    Mit deinem Code konnte ich nur den Text ändern und nicht die Überschrift.


    und kannst du mir auch sagen, wie ich die Farbe der Balken ändere?
    Also die Balken wo die Sektion steht.

    mit dem Selektor #accordion h3 mit Color für die Schrift und background-color für den Hintergrund !
    Nun bastel mal schön...

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

    nun weiß ich genauso viel wie vorher.
    erklär mir das mit dem selektor dings mal bitte genauer.
    am besten wäre der code wie für den Text

    Guten Abend,
    ja, so ein ganz ganz bischen eigeninitiative wäre wirklich nett. Wir verbringen ja auch sehr viel Zeit um Lösungen zu finden ;)

    ich dachte das forum ist da, damit geholfen wird wenn jemand keine erfahrung mit css oder ähnlichen hat :-(


    das mit der schriftfarbe habe ich hinbekommen, aber background-color geht nicht

    Zitat von michag78

    ich dachte das forum ist da, damit geholfen wird wenn jemand keine erfahrung mit css oder ähnlichen hat :-(


    das mit der schriftfarbe habe ich hinbekommen, aber background-color geht nicht


    Guten Morgen


    Labelle hat schon recht, auch wir verbrinegn viel Zeit für Lösungssuche, ein bisschen Eigeninitiative...Self Html und so sollte Dein Freund werden

    Bernie


    " Was wir alleine nicht schaffen, das schaffen wir dann zusammen..."


    :thumbsup:

    Doch wir helfen gerne ! Aber die gesamte Website werden wir dir nicht machen. Wenn du schon Sonderwünsche hast (die was nicht das Programm betreffen), dann solltest du auch etwas dafür tun und dich über CSS informieren. du brauchst doch nur im Google danach suchen.


    Außerdem wissen wir ja nicht genau was du willst weil du uns keine näheren Angaben gibst und auch keinen LINK (Online) zum testen !

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

    Online ist die Seite nicht dann würde Sie ja jeder sehen, da sie noch nicht fertig ist.
    hier ist mal der Code.


    ich wollte den Balken von Sektion steht anders färben und geht das auch mit dem Dreieck was davor steht?


    Code
    1. <style>
    4. #accordion h3 {color: #930000; font-size: 12px; background-color: blue;}
    7. </style>

    und wieso stellst du sie nicht einfach online und machst einen Verzeichnisschutz rein. Links können wir ohne ende schreiben. Letztendlich liegt es immer an dir. Richtigen Code für dich nur wenn man sieht was du machen willst.

    hier ist mal ein Bild.
    Ich möchte den Hintergrund der Balken ändern. da die Hauptseite ins bläuliche geht.


    und diese Code habe unter 4 SEO Erweitert stehen