Javascript-форум - метод toggle()

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - метод toggle() (https://javascript.ru/forum/jquery/48678-metod-toggle.html)

метод toggle()

Здравствуйте, друзья.
Есть вот такой код:

$('#div_for_img').toggle(function(e){
        if(e.shiftKey){
            $(this).css('border', '4px solid #cc0000');
        }
        else {
            $(this).css('border', '4px solid #333333');
        }
    },
    function() {
        $(this).scc('border', 'none');          
    }
)

При перезагрузке страницы эл-т $('#div_for_img') "исчезает" со страницы. Но мне нужно, что бы он не исчезал, а выполнял следующее:
1. при нажатии на любой из наследников данного эл-та - вокруг него должна появиться рамка (цвет рамки зависит от нажатия клавиши shift);
2. при повторном нажатии на этого же наследника - рамка должа "исчезнуть";

Почитав информацию по методу toggle() - я так понял, что он не подходит для моей задачи. Подскажите, пожалуйста, что использовать для решения.

Заранее благодарю.

Убрать поставить рамку вокруг картинки по клику

OdessaNa,
:cray:

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #div_for_img img.border{
    border: 4px solid;
  }
  #div_for_img img{
     border: none;
  }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       var $img = $('#div_for_img img');
	   $img.on('click', function(e) {
       $(this).toggleClass('border').css('borderColor', e.shiftKey ? '#cc0000' : '#333333')
	   ;
      });
});
  </script>
</head>

<body>
<div id='div_for_img'>
<img src="http://javascript.ru/img/ws_1.png" alt="">
<img src="http://javascript.ru/img/ws_1.png" alt="">
</div>
</body>
</html>

рони,
спасибо!!!