Changing span text to hide/show on jQuery toggle()

0
votes

strong textI'm trying to Hide/Show a div by clicking on Span element. I'm trying to change the text inside the span to toggle between hide(when element is showing) and show(when element is hidden). i belie I got on a good start but I'm now stuck in getting the jQuery script to work. Any help would be appreciated.

Here is my jsFiddle: http://jsfiddle.net/3AnPX/

HTML

<span class="help_target">Open</span>
<div class="help_content">Content 1</div>

<span class="help_target">Open</span>
<div class="help_content">Content 2</div>

<span class="help_target">Open</span>
<div class="help_content">Content 3</div>

<span class="help_target">Open</span>
<div class="help_content">Content 4</div>

jQuery

$(".help_content").hide();

$(".help_target").click(function () {
    $(this).next('.help_content').toggle();
    $(this).toggle(function () {
        $(this).text('Open');
    }, function() {
        $(this).text('Close');
    });
});

Update:

Trying to implement this on my actual website, but it's not working: http://jsfiddle.net/PzkxA/

2
javascriptjqueryhtmltoggle

2 Answers

2
votes

You can check the visibility of toggled element to change the text:

if(!$(this).next('.help_content').is(":visible") )
    $(this).text('Open');
else
    $(this).text('Close');

Update:

 $("span.hideshow").click(function () {
  $(this).closest('.profilestats-courseblock').find('.profilestats-course-badges').toggle();
  $(this).text($(this).text() == 'Close' ? 'Open' : 'Close');
 });

Working Demo

1
votes

Bit late but another way here :) demo http://jsfiddle.net/q76dk/

So probably all you want is to cahgne the text nsince the .help_content is outside span

Hope this fits your needs. :)

code

$(".help_content").hide();
$(".help_target").click(function () {
    $(this).next('.help_content').toggle();

    $(this).text($(this).text() == 'Close' ? 'Open' : 'Close');

    });