Нужна помощь Toggle Open & Close Function

Question

У меня есть этот код javascript, который отлично работает при переключении div open/close. Часть, с которой мне не удалось добраться, заключается в том, что когда div находится в закрытом состоянии, я бы хотел, чтобы он показывал «Read More», и когда он открыт, мне хотелось бы показать «Read Less».

Вот код:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script type='text/javascript'> 
$(function() { 
    $('#open-content').click(function() { 
     $("#me").show({ 
      height: 'toggle' 
     }, 1000); 
    }), $("#clickme").click(function() { 
     //do nothing if hovered over 
    }, function() { 
     //hide on hover out 
     $("#me").hide({ 
      height: 'toggle' 
     }, 1000); 
    }); 
}); 
</script> 

Вот HTML:

<a href="#" id="open-content" class="button">Read More +</a> 
<div id="me"> 
    <div class="divider clear"></div> 
    <div class="inner-content scroll-pane"> 
    Content 
    </div> 
    </div> 
</div> 

Answer 1

Try:

$("#me").slideToggle(0); 
$('#open-content').click(function() { 
    $(this).text($(this).text() == "Read More +" ? "Read Less -" : "Read More +") 
    $("#me").slideToggle(1000); 
}) 

jsFiddle example

Answer 2

Изменить текст анкера открытого контента используя ниже код во время события щелчка,

$('#open-content').text("Read Less") 

Answer 3

Вы должны быть в состоянии сделать это в функции onclick.

$(this).text("Read Less"); 

или

$(this).html("Read Less"); 

Либо должны работать.

Answer 4

Вам просто нужно проверить, виден ли div или нет.

JS:

$(function() { 
    $('#open-content').click(function() { 
    $('.scroll-pane').toggle(); 
    if ($('.scroll-pane').is(":visible")){ 
    $('#open-content').text("Read Less -"); 
    } 
    else{ 
    $('#open-content').text("Read More +"); 
    } 

    }); 

}); 

HTML:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script><a href="#" id="open-content" class="button">Read Less -</a> 

<div id="me"> 
<div class="divider clear"></div> 
<div class="inner-content scroll-pane"> 
Content 
</div> 
</div> 
</div> 

jsbin: http://jsbin.com/AVaqIxU/1/