Помогите модернизировать простенький скрипт открытие блока
Парни, набросал такую штуку.
Суть в том, что при клике по зелёной области, она становится меньше + появляется ещё крассная область и кнопка "закрыть". Помогите пожалйста сделать так, что бы при клике на "Название фильма 1", в левом блоке открывалось "Описание фильма 1", что бы не все блоки которые есть открывались, а только тот, который соответствуте. То есть если нажать на Название 1 Откроется Описание 1, если на Название 2, откроется Описание 2 Суть в том, что таких блоков будет много, и писать скрипт для каждого в ручную не подойдёт, нужно как-то автоматически, что бы он брал ID из кнопки по которой клацаешь, и открывал соответствующее описание. |
Помогли на тостере.
Если вдруг кому понадобиться - вот |
RadCor,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.3.js'></script>
<style type='text/css'>
.content {
display:table;
width:100%;
height:200px;
}
.left {
display:table-cell;
background:#bd0c0c;
visibility:hidden;
opacity:0;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
}
.right {
display:table-cell;
width:80%;
background:#0baa1a;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
}
.right > div {position:relative; border: 1px solid #FFFFFF}
.close {position:absolute;bottom:0px;right:10px;display:none;}
.close.open {display:block;cursor:pointer;}
.right.open {width:50%;}
.left.open {visibility:visible;opacity:1;}
.left > div{
}
</style>
<script>
$(window).load(function(){
var right = $(".right > div"), left = $(".left > div");
right.click(function() {
var i = right.index(this), close = !$(".close.open", this).length;
left.hide().eq(i).show();
$(".right").toggleClass("open",close);
$(".left").toggleClass("open",close);
$(".close").not($(".close", this).toggleClass("open")).removeClass("open");
});
});
</script>
</head>
<body>
<div class="content">
<div class="left">
<div id="d1">Описание фильма 1</div>
<div id="d1">Описание фильма 2</div>
<div id="d1">Описание фильма 3</div>
</div>
<div class="right">
<div id="t1">Название фильма 1<div class="close">закрыть</div></div>
<div id="t2">Название фильма 2<div class="close">закрыть</div></div>
<div id="t3">Название фильма 3<div class="close">закрыть</div></div>
</div>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 11:33. |