Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.08.2015, 20:26
Аватар для RadCor
Интересующийся
Отправить личное сообщение для RadCor Посмотреть профиль Найти все сообщения от RadCor
 
Регистрация: 26.04.2015
Сообщений: 10

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

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

Суть в том, что таких блоков будет много, и писать скрипт для каждого в ручную не подойдёт, нужно как-то автоматически, что бы он брал ID из кнопки по которой клацаешь, и открывал соответствующее описание.
Ответить с цитированием
  #2 (permalink)  
Старый 12.08.2015, 21:24
Аватар для RadCor
Интересующийся
Отправить личное сообщение для RadCor Посмотреть профиль Найти все сообщения от RadCor
 
Регистрация: 26.04.2015
Сообщений: 10

Помогли на тостере.
Если вдруг кому понадобиться - вот
Ответить с цитированием
  #3 (permalink)  
Старый 12.08.2015, 21:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите доработать скрипт Joannes Общие вопросы Javascript 0 08.09.2013 21:21
Помогите вставить скрипт на страницу alexsio Работа 7 22.04.2013 18:19
Помогите пожалуйста оптимизировать скрипт allanmiln Events/DOM/Window 15 10.02.2013 20:34
Помогите! "Не работает скрипт отсчета времени! Я нуб) Dobson Общие вопросы Javascript 4 28.05.2011 18:20
Скрипт условий if, помогите разобраться lyuis Общие вопросы Javascript 8 28.12.2010 21:21