Переключение между двумя DIVs по щелчку изображения

Question

Эксперты

Мое требование иметь дисплей общие регистрационные линии на моем JSP и пользователь может также изменить те при щелчке изображения рядом с ним, Для отображения общая регистрация линии Im, используя следующую JPEG Дисплей карандаш рядом с общей помощью кода, как

<div class="row-fluid" id ="result"> 
     <div class ="span2"> 
      <label><spring:message code='total.registration' />:</label> 
     </div> 
     <div class = "span3"> 
      ${registrationStatusForm.totalRegis} 
      <img src="/static/img/icon_pensil.png"> 
     </div> 
    </div> 

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

При щелчке по X пользователь должен снова увидеть первое изображение.

Пожалуйста, предложите подходящий способ достижения этого.

Answer 1

Я использовал бы jquery. Вы можете просто скрыть/отобразить элементы с

$('#element_id').show() 
$('#element_id').hide(). 

Так, например, если вы хотите, чтобы показать новый DIV, когда они нажимают на изображение, слушать событие щелчка:

$('#pencil_picture_id').click(function(){ 
    $('#text_box').show(); 
}); 

EDIT: забыл круглые скобки

Answer 2

вы можете использовать .toggle()

$('img').on('click', function(){ 
    $('your selector').toggle(); 
});