Форум

RadCor · #1 (**permalink**) 12.08.2015, 20:26

Парни, набросал такую штуку.
Суть в том, что при клике по зелёной области, она становится меньше + появляется ещё крассная область и кнопка "закрыть".

Помогите пожалйста сделать так, что бы при клике на "Название фильма 1", в левом блоке открывалось "Описание фильма 1", что бы не все блоки которые есть открывались, а только тот, который соответствуте.
То есть если нажать на Название 1 Откроется Описание 1, если на Название 2, откроется Описание 2

Суть в том, что таких блоков будет много, и писать скрипт для каждого в ручную не подойдёт, нужно как-то автоматически, что бы он брал ID из кнопки по которой клацаешь, и открывал соответствующее описание.

RadCor · #2 (**permalink**) 12.08.2015, 21:24

Помогли на тостере.
Если вдруг кому понадобиться - вот

рони · #3 (**permalink**) 12.08.2015, 21:27

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>

Форум

Справочник

Discord чат

Курсы javascript