Как изменить содержимое диапазона при нажатии на другой элемент

Question

Я хочу изменить содержимое этого тега span:

<span class="ui-btn-text" id="btnText">Read how we have helped</span>

Кому:

<span class="ui-btn-text" id="btnText">Hide Story</span>

Вот что я получил до сих пор:

$('#storyBtn').click(function() {
        $('#story-body').slideToggle('fast', function() {
            $('#btnTextShow').hide();
            $('#btnTextHide').show();
        });
    });

Answer 1

Вот отличный пример того, как этого добиться:
Сначала посмотрите на JSFiddle DEMO

Посмотрим, что у нас здесь:

$('.ui-btn-text:eq(1)').hide();

$('#storyBtn').click(function() {
    $("#story-body").slideToggle(400);
    $(".ui-btn-text").toggle(300);
});

И HTML:

<div id="storyBtn">
    <span class="ui-btn-text">Read how we have helped</span>
    <span class="ui-btn-text">Hide Story</span>
</div>

<div id="story-body">
    A long,...<br> long time ago...
</div>

INFO:

Как видите, я упростила и удалила все ненужные идентификаторы и коды, ЧТОБЫ СДЕЛАТЬ ВИДИМЫ, КАК ПРОСТО МОЖЕТ БЫТЬ. Вы можете повторить мои изменения.

Answer 2

Я думаю, вы просто хотите обновить текст диапазона ... если это так, попробуйте это ->

<span class="ui-btn-text" id="btnText">Read how we have helped</span>

   $('#storyBtn').click(function() {
            $('#story-body').slideToggle('fast', function() {
                $('#btnText').text("Hide Story");
                $('#btnTextShow').hide();
                $('#btnTextHide').show();
            });
        });

* Не проверено