Comment mettre en œuvre un “lire la suite” lien avec jQuery

Je veux être capable d'afficher une version abrégée d'un long champ de texte par défaut, mais alors un "lire la suite" lien qui permettrait d'étendre le champ de sa version complète. J'ai un assez simple d'installation, mais se sentir comme il devrait y avoir un moyen plus efficace de le faire.

Voici mon code actuel:

$(document).ready(function () {

    $("#narrative-full").hide();

    $("a#show-narrative").click(function() {
        $("#narrative-short").hide();
        $("#narrative-full").show('fast');
    });
    $("a#hide-narrative").click(function() {
        $("#narrative-full").hide();
        $("#narrative-short").show('fast');
    });
});

Cela fonctionne, mais il semble maladroit. Par exemple, il serait agréable d'avoir le texte original, pas de scintillement ou de disparaître brièvement, mais plutôt juste en douceur de l'expansion. Des suggestions?

OriginalL'auteur tchaymore | 2010-08-24

  1. 23

    Il y a un plugin pour ça. Ne pas réinventer la roue.

    +1, On a renvoyé le même plugin... la suppression de ma réponse maintenant 🙂
    Très habile plugin, et bien personnalisable. Souhaitez qu'il était venu dans ma recherche Google, mais heureux que y'all me l'a fait remarquer. Merci!
    veuillez donner un nouveau lien. celui-ci est mort.
    Je ne vois pas pourquoi cela mérite une tique, car il ajoute une dépendance qui ne fera que rendre votre site plus susceptible de briser, comme le commentaire ci-dessus: "c'est mort" prouve. Il est préférable d'utiliser un home-grown solution dépend que jQuery ou l'un au-dessous de par rebelliard.

    OriginalL'auteur Stefan Kendall

  2. 8

    De jQuery Recettes:

    <html>
    <head>
        <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $(".message").hide();
                $("span.readmore").click(function(){
                    $(".message").show("slow");
                    $(this).hide();
                });
            });
        </script>
    </head>
    <body>
        <div>
        Styles make the formatting job much easier and more efficient.
        </div>
        <span class="readmore">Read More...</span>
        <div class="message">
        To give an attractive look to web sites, styles are heavily used.
        JQuery is a powerful JavaScript library that allows us to add dynamic elements to our web
        sites. Not only it is easy to learn, but it's easy to implement too. A person must have a
        good knowledge of HTML and CSS and a bit of JavaScript. jQuery is an open source project
        that provides a wide range of features with cross-platform compatibility.
        </div>
    </body>
</html>
    nettoyez et propre.. Pourquoi courir derrière les plugins de tous les temps!

    OriginalL'auteur rebelliard

  3. 1

    Vous pouvez placer le texte dans un div et le lieu de la première partie directement et le reste dans un span à l'intérieur de la div

    <div>
   first part of the text
   <span id="expendable" style="display:none">
     second part of the text
   </span>
</div>

    En Jquery vous faire quelque chose comme ceci:

     $("expendable").slideToggle("slow");

    Le Jquery ref est ici.

    Belle solution! J'ai donné le chèque à l'autre réponse, parce que le plugin était tellement personnalisable, mais j'ai bien aimé votre solution.

    OriginalL'auteur Muffun

  4. 1

    Vérifier ces plugins.Vous pouvez le faire facilement.

    jQuery Expander

    Readmore.js

    Simple Jquery et CSS utilisation.Pas le plugin

    OriginalL'auteur Sumith Harshan