Как изменить стиль дива, при нажатии на textarea

169

07 февраля 2019, 20:10

Есть див, в котором находится textarea

        <div class="card-content block-add-feed">
            <div class="card-body">
                <textarea placeholder="Что у Вас нового?" v-model="description" class="form-control desc-feed" id="description" rows="3" required></textarea>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <button @click="update" class="btn btn-primary text ml-2 mb-2" v-if="!is_refresh">Отправить</button>
                </div>
            </div>
        </div>

По умолчанию этот див 'свернут'

Я сделал 'разворачивание' дива при наведении на него мышкой

.block-add-feed {
  height: 65px;
}
.block-add-feed:hover {
  height: 175px;;
}

+ справа от кнопки будут располагаться прикрепленные файлы, их кол-во не ограниченно

Вопрос: как сделать 'разворачивание' дива, при нажатии на textarea? Пробовал использовать

 .block1:hover ~ .block2 h1 { color: red;}

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

Answer 1

Эта тема уже поднималась не раз. Но, пока нет CSS-реализации parent() - только JS/jQ и parentElement или closest().
Если это единичная форма на странице, то инлайн Вам в помощь. Для более сложных проверок и условий, лучше вешать обработчик в основных скриптах.

.block-add-feed { 
  height: 20px; 
  overflow: hidden; 
  border: 1px dotted #090; 
}

<div class="card-content block-add-feed"> 
  <div class="card-body"> 
    <textarea  
      placeholder="Что у Вас нового?"  
      v-model="description"  
      class="form-control desc-feed"  
      id="description"  
      rows="3"  
      required  
      onfocus="this.closest('.block-add-feed').style.height='175px';"  
      onblur="this.parentElement.parentElement.style.height='20px';"></textarea> 
  </div> 
  <div class="row"> 
    <div class="col-md-4"> 
      <button @click="update" class="btn btn-primary text ml-2 mb-2" v-if="!is_refresh">Отправить</button> 
    </div> 
  </div> 
</div>

Answer 2

Вариант с css только такой:

.card-content { 
  box-shadow: 0 0 10px rgba(0, 0, 0, .25); 
  padding: 10px; 
  overflow: hidden; 
  position: relative; 
} 
 
.card-content textarea { 
  position: absolute; 
  height: 150px; 
} 
 
.height-helper { 
  height: 20px; 
  transition: height .2s; 
} 
 
textarea:focus~.height-helper { 
  height: 200px; 
}

<div class="card-content block-add-feed"> 
  <div class="card-body"> 
    <textarea placeholder="Что у Вас нового?" v-model="description" class="form-control desc-feed" id="description" rows="3" required></textarea> 
    <div class="height-helper"></div> 
  </div> 
  <div class="row"> 
    <div class="col-md-4"> 
      <button @click="update" class="btn btn-primary text ml-2 mb-2" v-if="!is_refresh">Отправить</button> 
    </div> 
  </div> 
</div>

В вашем случае точно лучше будет на js сделать изменение класса всего блока на фокусе. Тк тут плавает высота от дополнительных блоков.