Текст кнопки Переключение не работает

Question

, что мне нужно

• когда нажмите на вид детали => показать данные.
• , когда данные отображаются, а затем показывают скрытые детали.

HTML код

<a href="javascript:void(0);" id="viewdetail" class="btn-primary" style="position:relative;left:20px;" 
       onclick=" 
       $(this).find('.speakers').toggle(function() { 
        $(this).text('Hide Details'); 
         }, function() { 
        $(this).text('view details'); 
         });">view details 


       <div class="speakers dis-non"> 

       </div> 
       </a> 

Ошибка

 JQMIGRATE: jQuery.fn.toggle(handler, handler...) is deprecated 

Answer 1

Тогда вы могли бы сделать это обычным способом с помощью jQuery.text «s function перегрузки и тройные операторы.

$('#viewdetail').click(function() { 
    $(this).find('.speakers').text(function(_, txt) { 
     return !txt.indexOf("Hide") ? 'Show Details' : 'Hide Details'; 
    }); 
}); 

Answer 2

Вы должны удалить .toggle() и использовать .text().

$('#viewdetail').click(function() { 
 
    var div_text = $(this).find('.speakers').text(); 
 
    if (div_text == 'Hide Details') { 
 
    $(this).find('.speakers').text('view details'); 
 
    } else { 
 
    $(this).find('.speakers').text('Hide Details'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<a href="javascript:void(0);" id="viewdetail" class="btn-primary" style="position:relative;left:20px;"> 
 
    <div class="speakers dis-non">view details</div> 
 
</a>

Answer 3

Проверьте FIDDLE

HTML

<a href="javascript:void(0);" id="viewdetail" class="btn-primary">view details</a> 
<div class="speakers"></div> 

JS

var button = $('#viewdetail'); 
var content = $('.speakers'); 
button.click(function(){ 
    var isOpen = content.hasClass('on'); 
    if(isOpen){ 
     button.html('Show Details'); 
     content.removeClass('on'); 
    }else { 
     button.html('Hide Details'); 
     content.addClass('on'); 
    } 
}); 

CSS

#viewdetail {} 
.speakers {height:20px;background-color:red;transitions:all 500ms;} 
.speakers.on {height:100px;}