Кнопка переключения и видимость Переключение

Question

Я использую эту JQuery, чтобы скрыть DIV:

$("#slider").click(function() { 
    $(".help").slideToggle(); 
    $("#wrapper").animate({ opacity: 1.0 },200).slideToggle(200, function() { 
    $("#slider a").text($(this).is(':visible') ? "Hide" : "Show"); 
    }); 
}); 

Вместо изменения текста шоу, которое я хочу, чтобы отобразить графику, я хочу grpahic измениться в зависимости от .toggle

Текущий HMTL:

<div id="wrapper"> 
    LI ITEMS 
</div> 

<div class="help"> 
    IMAGE 
</div> 

<div id="slider"> 
    <a href="#">Hide</a> 
</div> 

Я хотел бы добавить два изображения в .slider, удаление <a>:

<div id="slider"> 
<img class="show" title="Hide" alt="Hide" src="images/showbutton.png" /> 
<img class="hide" title="Hide" alt="Hide" src="images/hidebutton.png" /> 
</div> 

Возможно, я смогу использовать css, чтобы скрыть кнопку 'hide', а затем переключить ее с помощью jquery?

Любые предложения?

Answer 1

Вы можете скрыть один сначала с помощью CSS, а затем просто переключать два в вашей функции, используйте это для CSS:

.hide { dislay: none; } //Reverse if "Hide" should be the default button 

И этот JQuery, используя .toggle() (без аргументов, она переключает видимость):

$("#slider").click(function() { 
    $(".help").slideToggle(); 
    $("#wrapper").animate({ opacity: 1.0 },200).slideToggle(200, function() { 
    $("#slider img").toggle(); 
    }); 
}); 

Это должно было бы отображать видимость обоих изображений ... поскольку вы скрыты, и у вас только 2, он эффективно меняет их. Также не забудьте исправить свои /title атрибуты на .show, один для людей, читающих экран. :)