Показать сообщение отдельно
  #5 (permalink)  
Старый 06.04.2016, 09:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,975

Открывашка 255 спойлер открытие на высоту содержимого
villiwalla,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .desc-it  {
       height: 0; opacity: 0;
    }
    .items.acti .panel-heading{
        color: #FF0000;
    }
    .desc-it.acti{
      border: 2px solid #FF00FF;
    }
    .mr{
      cursor: pointer;
    }

</style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
$(function() {
    $(".items").each(function(indx, item) {
        $(".mr", item).on("click", function(event) {
            event.preventDefault();
            var op = $(item).toggleClass("acti").is(".acti"),
            content = $(".desc-it", item);
            op = op ? {
                height: content[0].scrollHeight,
                opacity: 1
            } : {
                height: 0,
                opacity: 0
            };
            content.stop().toggleClass("acti").animate(op, 1000)
        })
    })
});
  </script>
</head>

<body>
<div class="items panel panel-default col-md-3">
    <div class="panel-heading row">title</div>
        <div class="panel-body row">
            <form >
               <div class="desc-it">content</div>
            </form>
             <a class="mr" >Все характеристики <br> <i class="fa fa-angle-double-down"></i></a>
    </div>
</div>
<div class="items panel panel-default col-md-3">
    <div class="panel-heading row">title</div>
        <div class="panel-body row">
            <form >
               <div class="desc-it">content<br><br><br><br><br>content</div>
            </form>
             <a class="mr" >Все характеристики <br> <i class="fa fa-angle-double-down"></i></a>
    </div>
</div>
</body>
</html>

Последний раз редактировалось рони, 06.04.2016 в 09:58.
Ответить с цитированием