Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Вертикальный слайдер или ..? (https://javascript.ru/forum/dom-window/50997-vertikalnyjj-slajjder-ili.html)

Jonny316 20.10.2014 15:17

Вертикальный слайдер или ..?
 
не подскажете скрипт когда 1 контент находит на другой, другой бы исчезал?

MallSerg 20.10.2014 18:40

аккардион?

ViRuSreloaded 20.10.2014 18:55

Код яваскрипт(вставляем до </head>):
<script type="text/javascript">
$(document).ready(function() {
	$('.content').click(function() {
			$('.content').removeClass('big'); // Убираем у всех класс "большой"
			$(this).addClass('big'); // Ставим текущему класс "большой"
     });
});
</script>


А после HTML:
<div class='content small'>
	БЛОК 1
</div>
<div class='content small'>
	БЛОК 2
</div>


CSS:
.small {
width:100%;
height:50px;
background: pink;
}
.big {
width:100%;
height:100px;
background: green;
}

ViRuSreloaded 20.10.2014 18:56

P.S.: Писал все тут, возможны опечатки.

Jonny316 22.10.2014 11:14

да наверно аккардион,
ViRuSreloaded спасибо Вам большое! выручили

kostyanet 22.10.2014 11:17

Цитата:

Сообщение от Jonny316
да наверно аккардион,

Пишите тогда уж по-русски: баян.

Jonny316 24.10.2014 17:14

я вот тут хочу сделать чтоб при наезде нижнего блока на верхний, верхний растворялся, тогда что в скрипте изменить надо?
<script type="text/javascript">
$(document).ready(function() {
$('.content').click(function() {
$('.content').removeClass('big'); // Убираем у всех класс "большой"
$(this).addClass('big'); // Ставим текущему класс "большой"
});
});
</script>

kostyanet 24.10.2014 17:32

Надо добавить йаду. Йад растворяет.

рони 24.10.2014 17:45

Jonny316,
:-?
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .small {
width:100%;
height:50px;
background: pink;
}
.big {
width:100%;
height:100px;
background: green;
}

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script type="text/javascript">
$(document).ready(function() {
	$('.content').click(function() {
			$('.content').not(this).removeClass('big').fadeToggle(1500);
			$(this).toggleClass('big');
     });
});
</script>

</head>

<body>
<div class='content small'>
	БЛОК 1
</div>
<div class='content small'>
	БЛОК 2
</div>

</body>

</html>

kostyanet 25.10.2014 12:20

Я же говорил что нужен йад. Когда растворяются пункты top-level-menu - а именно так и задумал ТС и ему уже помогают - то это признак растворения мозга.


Часовой пояс GMT +3, время: 22:10.