jQuery show Inhalt ausblenden und Links ändern

Question

Auf einigen meiner Unternehmensseite möchte ich Toggle-Details anzeigen und ausblenden, während Sie auf Links klicken.

I verwendet .toggle(), aber ....

Aber hier kleinere Problem ist, während Benutzer auf anzeigen Inhalt nach unten rutschen sollte und wichtiger diesen Text ‚anzeigen‘ sollte sein ändern "Show less" und dies sollte umschalten. Ich hoffe dir ist klar, was ich wirklich brauche.

HTML:

<a href="#" id="toggle">Show More</a> 

jQuery (innerhalb Ihrer Toggle-Funktion): indem Sie die folgenden

Dank

Answer 1

J ohn McCollum hat im Grunde Ihre Antwort, aber man könnte auch die Verwendung von Javascript Stenografie machen, um Ihren Code ein wenig kompakter zu machen:

$('#toggle').click(function(ev) { 
    $('#content').toggle(); 
    this.html(($('#toggle').text() == 'Show more') ? 'Show less' : 'Show more'); 
}) 

EDIT: Aus Gründen der Klarheit, ich werde auch die html Markup hinzufügen, die Sie für die oben brauchen Code zum Arbeiten. In diesem Beispiel wird alles am Anfang angezeigt.

<p><a id="toggle" href="#">Show less</a></p> 
<div id="content"><!-- your stuff goes here. --></div> 

Wenn Sie es möchten, ausgeblendet werden, mit zu beginnen, ändern Sie einfach den Link-Text zu "Show more" und fügen Sie die folgende Stilregel zu Ihrem Stylesheet:

#content { display: none; } 

Answer 2

Sie können den Wert einer Verbindung mit der ID 'Toggle' ändern

$('a#toggle').text('Show less'); 

Answer 3

Sie können Elemente mit jquery hide() undausblenden und anzeigenFunktionen, gibt es auch eine slideDown Funktion.

so würden Sie so etwas wie dieses Feuer

Onclick

$("#showMore").click(function(){ 
    $("#showMore").hide(); 
    $("#showLess").show(); 
    $("#contentDiv").slideDown(); 
} 

, der sollte nur darüber zu machen, lassen Sie mich wissen, wenn Sie Fragen haben.

Answer 4

Dies sollte es tun ...

HTML:

<a href="#" id="expand"> 
     <span class="linktext" >Show More</span> 
     <span class="linktext" style="display:none">Show Less 
     </span> 
    </a> 
    <div id="details" style="display:none"><h1>This is the details</h1></div> 

Javascript:

$('a#expand').click(function() { 
     $('div#details').slideToggle(); 
     $('span.linktext').toggle(); 
    }); 

Answer 5

Toggle-Funktionen Erstellen Sie den Text Ihrer Verbindung zu setzen und Ihre Inhalte div animieren

$('a.toggle').toggle( 
    function() { 
     $('#contentDiv').slideDown(); 
     $(this).html('Show less'); 
    }, 
    function() { 
     $('#contentDiv').slideUp(); 
     $(this).html('Show more'); 
    } 
);