Изменение текста и значка с помощью jQuery

Question

Когда вы нажимаете «Скрыть информацию», я хотел бы изменить текст «Скрыть информацию» на «Показать информацию», а также изменить значок: https://cdn4.iconfinder.com/data/icons/seo-and-data/500/view-content-window-16.png.

Когда текст снова нажимается, он должен измениться с «Показать информацию» на «Скрыть информацию».

Пожалуйста, помните, что при отображении информации должен отображаться текст «тестовые тесты». Если вы хотите скрыть «тестовые тесты», вы нажимаете «Скрыть информацию».

Я не знаю, как это сделать.

Спасибо!

$(document).ready(function(){ 
 
    $("div#test").click(function(){ 
 
     $("#test2").toggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="test2" style="display:none"> 
 
teststests 
 
</div> 
 

 
<div id="test"> 
 
<img src="https://cdn0.iconfinder.com/data/icons/octicons/1024/eye-16.png" /> Show Information 
 
</div>

Answer 1

проверить это fiddle

код

$(document).ready(function(){ 
    $("div#test,div#test2").click(function(){   
     $("div#test,div#test2").toggle(); 
    }); 
}); 

HTML

<div id="test"> 
<img src="https://cdn0.iconfinder.com/data/icons/octicons/1024/eye-16.png" /> Show Information 
</div> 

<div id="test2" style="display:none"> 
    <div>teststests</div> 
<img src="https://cdn4.iconfinder.com/data/icons/seo-and-data/500/view-content-window-16.png"/> 
    hide information 
</div> 

Answer 2

FIDDLE

HTML:

<div id="show" style="opacity: 1;">Click this to show (insert wanted icon)</div> 

<div id="hide" style="opacity: 0;">Click this to hide (insert another icon)</div> 

<p id="text" style="opacity: 0;">testest</p> 

JQuery:

$(document).ready(function(){ 
$('#show').click(function(){ 
$('#show').fadeOut(500, 0); 
$('#text').fadeTo(500, 1); 
$('#hide').fadeTo(500, 1); 
}); 
$('#hide').click(function(){ 
$('#show').fadeTo(500, 1); 
$('#text').fadeOut(500, 0); 
$('#hide').fadeTo(500, 0); 
}); 
}); 

CSS:

#hide, #show{ 
position: absolute; 
top: 0; 
} 

Answer 3

Это предполагает, что вы используете шрифт-устрашающий для значка и JQuery для JavaScript

разметке

<div> 
    <a href="#" class="toggle show"><i class="fa fa-hide"></i> Show Information</a> 
</div> 

Ваш Jquery

$(function() { 
    $('.toggle').click(function() { 
     if ($(this).hasClass('show')) { 
      //replace the text 
      $(this).text('Hide information'); 
      //replace the icon 
      $(this).find('i').removeClass('fa-hide').addClass('fa-show'); 
      $(this).removeClass('show').addClass('hide); 
     } else { 
      //replace the text 
      $(this).text('Show information'); 
      //replace the icon 
      $(this).find('i').removeClass('fa-show').addClass('fa-hide'); 
      $(this).removeClass('hide').addClass('show);     
     } 
    }); 
}); 

Это должно сделать Приветствия.

Answer 4

именно то, что вы хотите:

JS часть:

$(document).ready(function(){ 
    $("div#test").click(function(){ 

    if ($('#test2').css('display') == 'none') { 
     $("#test2").show(); 
     $("#changeme").html("Hide Information"); 
     $("#changeimg").attr("src","https://cdn4.iconfinder.com/data/icons/seo-and-data/500/view-content-window-16.png"); 
}  
     else{ 
      $("#test2").hide(); 
     $("#changeme").html("Show Information"); 
      $("#changeimg").attr("src","https://cdn0.iconfinder.com/data/icons/octicons/1024/eye-16.png"); 

     } 
}); 
}); 

Вам просто нужно немного изменить в HTML, как добавление ID:

<div id="test2" style="display:none"> 
teststests 
</div> 



<div id="test"> 
<img id="changeimg" src="https://cdn0.iconfinder.com/data/icons/octicons/1024/eye-16.png" /> 
<span id="changeme">Show Information</span> 
</div> 

Проверить http://jsfiddle.net/2pys32qj/