Показать сообщение отдельно
  #2 (permalink)  
Старый 02.08.2015, 20:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,785

Открывашка 223 взаимозависимая
tutzya,
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <style type='text/css'>
    .block1, .block3 {
  position: relative;
  width: 500px;
  height: 50px;
  background: blue;
}

.block2 {
  position: relative;
  width: 500px;
  height: 125px;
  background: #fff;
  padding: 25px;
  transition: all 0.5s ease;
}

.block2 > div {
  float: left;
  width: 250px;
}

.elem {
  position: relative;
  margin-bottom: 20px;
  width: 200px;
}

.head {
  width: 100%;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background: green;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.hide {
  border-top: none!important;
  border: 1px solid #bbb;
  padding: 10px;
}
  </style>



<script>
$(function() {
    var $h = $(".hide"),
        $a = $(".head"),
        $b = $(".block2");
    $h.each(function(indx, el) {
        el = $(el);
        var contHeight = el.height(),
            head = $a.eq(indx);
        el.hide();
        head.on("click", function(event) {
            event.preventDefault();
            $h.stop(true,true).not(el.slideToggle(800)).slideUp(800);
            $a.not(head.toggleClass("open")).removeClass("open");
            $b.height(125 + head.is(".open") * contHeight)
        })
    })
});

</script>


</head>
<body>
  <div class="block1"></div>
<div class="block2">
  <div class="left">
    <div class="elem">
      <div class="head">Клик</div>
      <div class="hide">Длинный спрятанный контент</div>
    </div>
    <div class="elem">
      <div class="head">Клик</div>
      <div class="hide">Очень-очень длинный трудночитаемый спрятанный контент</div>
    </div>
    <div class="elem">
      <div class="head">Клик</div>
      <div class="hide">Спрятанный контент</div>
    </div>
  </div>
  <div class="right">
    <div class="elem">
      <div class="head">Клик</div>
      <div class="hide">Спрятанный контент</div>
    </div>
    <div class="elem">
      <div class="head">Клик</div>
      <div class="hide">Спрятанный контент</div>
    </div>
    <div class="elem">
      <div class="head">Клик</div>
      <div class="hide">Спрятанный контент</div>
    </div>
  </div>
</div>
<div class="block3"></div>

</body>


</html>
Ответить с цитированием