wie kann ich einstellen, das standardmäßig in open/close Umschalten jquery

im mit ein wenig jquery-code fand ich auf einer Webseite vor einiger Zeit zum Umschalten Inhalt.
standardmäßig wird der Inhalt geschlossen, und wenn Sie einen link angeklickt, der Inhalt öffnet sich in einem weichen slide-animation.
so weit so gut.
das problem ist, dass die Inhalte, die Sie ausführen soll, werden standardmäßig ausgeblendet ist sichtbar, bis die Seite geladen ist, dann schließt, sobald das jquery geladen wird.
ich hängte das jquery am Ende der Seite zu reduzieren die Ladezeit für den Inhalt der website.
ich weiß, dieses Verhalten ist normal, aber ich habe gesehen, andere toggle-scripts vor, wo der Inhalt geöffnet werden kann, geschlossen wurde, noch bevor die jquery-bit-Lasten.
das problem ist, dass Leute mit langsamen internet-verbindungen finden die "hidden" Teil für durchaus einige Zeit, bis die Seite fertig geladen ist. dann wird das Teil geschlossen, weil sein soll standardmäßig geschlossen.

habe ich versucht css zu halten, die Teil geschlossen, noch bevor die jquery wird geladen, aber das problem ist, dass ich nicht öffnen kann, es nicht mehr durch klicken auf den "show more" - link, weil das css noch zwingt es geschlossen bleiben..
shiatsu!!

heres der code, den ich verwenden:

<div class="morepara"> content that should be hidden by default can be opened by clicken on the image link below</div>

<p class="togglebutn">
<a>
<img src="/images/read-more.png" class="img-swap" aid="myImage"/>
</a>
</p>

<script type="text/javascript">
var $s = jQuery.noConflict();
$s('document').ready(function() {
    $s('.morepara div').hide();
    $s('.togglebutn a').click( function() {
        var parentpara = $s(this).parent().prev().children();
        parentpara.toggle('normal');
    });
});
$s(function() {
    $s(".img-swap").live('click', function() {
        if ($s(this).attr("class") == "img-swap") {
            this.src = this.src.replace("-more", "-less");
        } else {
            this.src = this.src.replace("-less", "-more");
        }
        $s(this).toggleClass("on");
    });
});
</script>

ach ja, und die Bild-swap-Skript funktioniert Super, keine Probleme mit dem Teil 🙂

vielen Dank im Voraus! 🙂

edit: vielen Dank an alle für die schnellen Antworten.. im mit der display:none; option jetzt, aber ich würde gerne wissen, ob dies ein problem für seo..
die Erfahrung zeigte mir, dass google nicht zählen Inhalte, die standardmäßig ausgeblendet, können aber angezeigt werden mit javascript..
im nicht sicher, wenn es einen index der Inhalt jetzt, da es nun ausgeblendet werden, mithilfe von css..
irgendwelche Erfahrungen mit denen?

nochmals vielen Dank!

  • Sie sollten nicht ein problem haben, wenn Ihr div morepara ist für die Anzeige none. Gib mir 5 Minuten und krank senden Sie einen link zu jsfiddle um Ihnen zu zeigen, was ich meine.
  • Zu lassen, den Inhalt "slide" - in können Sie slideToggle()
Schreibe einen Kommentar