Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.09.2014, 11:50
Интересующийся
Отправить личное сообщение для serdeles Посмотреть профиль Найти все сообщения от serdeles
 
Регистрация: 13.11.2009
Сообщений: 13

Несколько блоков под одним скриптом
Приветствую!

Уже битый час танцую с бубном над скриптом, и никак не могу заставить его работать с двумя и более блоками.

Задача такая: есть скрипт, который разворачивает/сворачивает блок с текстом: http://jsfiddle.net/NRc3x/16/.

Но когда я добавляю второй блок, скрипт все равно работает только с первым блоком. А на второй никак не влияет.

Мне нужно иметь на странице несколько таких блоков. Подскажите, пожалуйста, куда копать.
Ответить с цитированием
  #2 (permalink)  
Старый 19.09.2014, 12:01
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,215

Сообщение от serdeles
Мне нужно иметь на странице несколько таких блоков. Подскажите, пожалуйста, куда копать.
"Копать" нужно в сторону классов и структуры ДОМ...

<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
p { 
	margin:0; 
	padding:0;
}
#open1 {
    display: block;
    padding: 3px 7px;
    background:#CCC;
    cursor: pointer;
    width:300px;
}
#hidd1 {
    width:300px;
    display: none;
    margin: 0 auto;
}
#blo{ 
	margin:0 auto;
	width:300px;
}
</style>
<script type='text/javascript'>
$(function (){
	$('.open').click(function(){
		var hBlock = $(this).prev();
		$(this).text(hBlock.is(':visible') ? 'Подробнее' : 'Скрыть');
		hBlock.toggle('fast');
	});
});
</script>
</head>
<body>
<div class="blo">
	<p>Lorem ipsum dolor sit amet, consectetur</p>
	<div class="hidd">
		adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
		Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex 
		ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
		sunt in culpa qui officia deserunt mollit anim id est laborum.
	</div>
   <span class="open">Показать всё</span>
</div>
<div class="blo">
	<p>Lorem ipsum dolor sit amet, consectetur</p>
	<div class="hidd">
		adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
		Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex 
		ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
		sunt in culpa qui officia deserunt mollit anim id est laborum.
	</div>
   <span class="open">Показать всё</span>
</div>
</body>
</html>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 19.09.2014, 12:03
Аватар для Viral
Профессор
Отправить личное сообщение для Viral Посмотреть профиль Найти все сообщения от Viral
 
Регистрация: 26.04.2011
Сообщений: 472

эх.. не успел..
вот еще вариант
Ответить с цитированием
  #4 (permalink)  
Старый 19.09.2014, 12:11
Интересующийся
Отправить личное сообщение для serdeles Посмотреть профиль Найти все сообщения от serdeles
 
Регистрация: 13.11.2009
Сообщений: 13

Спасибище!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите с написанием скриптом под PhantomJS RauenS Оффтопик 0 22.10.2013 11:15
Вызов close несколько блоков sparklingman Элементы интерфейса 2 30.08.2013 10:53
Несколько форм с одним классом + submit klev2004 Общие вопросы Javascript 8 09.07.2012 15:41
Несколько селектов с одним содержанием Andres Events/DOM/Window 1 15.06.2011 22:26
Несколько div блоков. Переключение по нажатии на соответствующую ссылку. Help$ Элементы интерфейса 4 25.09.2010 00:01