Всплывающий блок при клике на input не хочет сварачиваться назад, что делать?

Question

[ChikiBOBONI]

ребята такая проблема, есть два input и один textarea нужно что бы при клике на поле текст уезжал вверх этих полей, вот мой код

HTML

<form action="handler.php" method="post" id="reply">
<div id="content1" style="display: none;">Ваше имя</div>
<div class="Content-Top2-1"><input id="link1" type="text" name="name" class="text" id="name" value="Ваше имя" onfocus="if (this.value=='Ваше имя') this.value='';" onblur="if (this.value==''){this.value='Ваше имя'}"/></div>
<div id="content2" style="display: none;">Способ связи</div>
<div class="Content-Top2-4"><input id="link2" type="text" name="email" class="text" id="name" value="Способ связи" onfocus="if (this.value=='Способ связи') this.value='';" onblur="if (this.value==''){this.value='Способ связи'}"/></div>
<div id="content3" style="display: none;">Задача</div>
<div class="Content-Top2-2"><textarea id="link3" name="text" id="comment" placeholder="Задача" cols="28" rows="15" ></textarea></div>
<div class="Content-Top2-3"><input type="submit" class="button" value="Отправляем"><img src="images/Strelka.jpg"></div>
</form>

javascript

<script>
    $(document).ready(function () {
        $('textarea#link3').click(function (e) {
            $(this).toggleClass('active');
            $('#content3').toggle();
                 
            e.stopPropagation();
        });
        $('body,input').click(function () {
            var link = $('textarea#link3');
            if (link.hasClass('active')) {
                link.click();
            }
        });
    });
</script>

<script>
    $(document).ready(function () {
        $('input#link1').click(function (e) {
            $(this).toggleClass('active');
            $('#content1').toggle();
                 
            e.stopPropagation();
        });
        $('body,.Content-Top2-2').click(function () {
            var link = $('input#link1');
            if (link.hasClass('active')) {
                link.click();
            }
        });
    });
</script>

<script>
    $(document).ready(function () {
        $('input#link2').click(function (e) {
            $(this).toggleClass('active');
            $('#content2').toggle();
                 
            e.stopPropagation();
        });
        $('body,#link1,textarea').click(function () {
            var link = $('input#link2');
            if (link.hasClass('active')) {
                link.click();
            }
        });
    });
</script>

при клике в body все нормально сварачивается назад но при клике на другое поле инпут или текстера оно не хочет сварачиваться, помогите пожалуйста чайнику

Answer 1

[Vitaliy Orlov]

выложи на jsfiddle, так проще тебе помочь будет

на первый взгляд, тебе надо добавить ко всем появляющимся объектам единый класс, и потом скрывать его перед показом нового, т.е. что-то типа:

<div class="panel" id="panel-1"></div>
  <div class="panel" id="panel-2"></div>

$('#btn-panel-1').click(function(){
    $('.panel:visible').hide();
    $('#panel-1').show();
  });

  $('#btn-panel-2').click(function(){
    $('.panel:visible').hide();
    $('#panel-2').show();
  });

идея думаю понятна

Answer 2

[ChikiBOBONI]

нашел кое что

<input href="#div1" id="" class="link">
  <input href="#div2" class="link">
  <input href="#div3" class="link">
  <input href="#div4" class="link">
  <div class="bar" id="div1">asdasdasdasd</div>
  <div class="bar" id="div2">asdasdasd</div>
  <div class="bar" id="div3">asdasdasd</div>
  <div class="bar" id="div4">asdasdasdad</div>

$(function() {
    $('.link').on('click', function(e) {
        e.preventDefault();
        $('.bar').each(function() {
            $(this).css('display', 'none');
        });
        var block = $(this).attr('href');
        $(block).css('display', 'block');
    });
});

только как теперь сделать что бы блоки скрывались на нажатие на любом месте, а не только по нажатию на input ?

Comments

[Александр]

$('.link').on('click', function(e)
у вас клик привязан к элементу с классом .link
повесьте на $('body') и будет работать при клике на любом элементе

[ChikiBOBONI]

Александр: $('.link').on('click', function(e) заменил на $('body').on('click', function(e), вышло так что вообще не открываются блоки