✔ mit "slideToggle" div ein- und ausblenden, gleichzeitig Text ändern

[EduDeLuxe]

Hallo,

ich habe folgendes Problem:

Es soll ein kurzer Anreisser-Text angezeigt werden, darunter steht "mehr erfahren".
Bei Klick auf "mehr erfahren" wir ein Container mit zusätzlichem Inhalt angezeigt, gleichzeitig wechselt "mehr erfahren" zu "weniger", welches dann bei Klick den zusätzlichen Inhalt wieder versteckt und aus "weniger" wieder "mehr erfahren" wird.

Im Grunde funktioniert alles ganz Prima, nur im letzten Teil ändert sich der Text nicht mehr von "weniger" zu "mehr erfahren"

JavaScript:

$(document).ready(function () {
    $('#view_more').hide();

    $('h3#view_link').click(function () {
        $(this).next('div').slideToggle('fast');

        if ($(view_more).is(':visible')) {
            view_link.innerHTML = 'weniger';
        }

        if ($(view_more).is(':hidden')) {
            view_link.innerHTML = 'mehr erfahren';
        }

    });

});

HTML:

<div id="start_long_text">
	<div class="">
		Kurzer Text ...
	</div>
    <h3 id="view_link">mehr erfahren</h3>
	<div id="view_more">
		... langer Text
	</div>
</div>

jsFiddle

vielleicht kann mich jemand in die richtige Richtung stupsen ...


Vielen Dank schon jetzt für Eure Hilfe und Tipps
Edu

 

[H4ckHunt3r]

ich würde das einfach so machen:

if (view_link.innerHTML() == 'mehr erfahren')
{
    view_link.innerHTML('weniger');
}
else
{
	view_link.innerHTML('mehr erfahren');
}

 

[EduDeLuxe]

Vielen Dank für Deinen Tipp ... aber leider funktioniert das auch nicht ...

Hat sonst noch jemand einen Tipp?

 

[H4ckHunt3r]

So habe es jetzt fertig gemacht, so dass es bei mir Funktioniert.

Hier der Code:

$(document).ready(function () {
    $('#view_more').hide();
    $('h3#view_link').click(function () {
        $(this).next('div').slideToggle('fast',function(){
        	if ($('h3#view_link').html() == 'weniger')
			{
        	    $('h3#view_link').html( 'mehr erfahren' );
        	}
			else
			{
        	    $('h3#view_link').html( 'weniger' );
        	}
		});
    });
});

achja falls du es nicht bereits getan hast,
setze am besten bei h3#view_link im stylesheet den cursor auf pointer.

Also

h3#view_link { cursor:pointer; }

 

[EduDeLuxe]

Dank Dir, genau so habe ich es mir vorgestellt. Funktioniert prima.
Nochmals vielen Dank für Deine Hilfe :-D