0

Есть такая HTML конструкция:

    <div class="open_case_field_wrap">
            <input type="text" value=""><span class="help_wrap"><span class="help_icon">?</span><span class="help_text">ТЕКСТ 1</span></span>
   </div>
   <div class="open_case_field_wrap">
        <textarea name="desc"></textarea><span class="help_wrap"><span class="help_icon">?</span><span class="help_text">ТЕКСТ 2</span></span>
   </div>

И такой jquery

$('.help_icon').click(function() {
        $(this).parent('.help_wrap').toggleClass('help_info_open');
    });

Как дописать js, чтобы если у одного .help_wrap добавлен класс help_info_open (блок открывается стилями), а нажали на другой, то этот закрывается, а другой открывается.

1 ответ 1

0

Если нужно модифицировать только скрипт, то так можно например.

$('.help_icon').click(function() {
  $('.help_info_open').not($(this).parent()).removeClass('help_info_open');
  $(this).parent().toggleClass('help_info_open');
});
.help_wrap>.help_text {
  visibility: hidden;
}

.help_info_open>.help_text {
  visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="open_case_field_wrap">
  <input type="text" value="">
  <span class="help_wrap">
    <span class="help_icon">?</span>
  <span class="help_text">ТЕКСТ 1</span>
  </span>
</div>
<div class="open_case_field_wrap">
  <textarea name="desc"></textarea>
  <span class="help_wrap">
    <span class="help_icon">?</span>
  <span class="help_text">ТЕКСТ 2</span>
  </span>
</div>

3
  • Благодарю. То что нужно, а то я в какие-то дебри с parent, each, но нужного эффекта добиться не получилось. "Если нужно модифицировать только скрипт" - а вы что-то еще исправить хотели?
    – Aaron
    18 июл 2018 в 12:33
  • @Aaron мне показалась неудобной текущая верстка и работа с ней, но это субъективщина
    – yolosora
    18 июл 2018 в 12:38
  • всегда открыт к предложениям и корректировкам в лучшую сторону. Как бы вы изменили?
    – Aaron
    18 июл 2018 в 12:41

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.