подскажите, как сделать гармошку

подскажите, как сделать гармошку

Опции

Nitrogen4ik

Topic Starter сообщение

23.5.2011, 10:49; Ответить: Nitrogen4ik

Сообщение #1

0

Группа: User
Сообщений: 10
Регистрация: 13.5.2011
Поблагодарили: 0 раз
Репутация:

0

проблема в том, что при открытии нового элемента, старый не закрывается..
вот html

<div class="accord">

<div><h4>Первый элемент аккордиона</h4>
<p>содержимое аккордиона</p>
</div>

<div><h4>Второй элемент аккордиона</h4>
<p>содержимое аккордиона</p>
</div>

<div><h4>Третий элемент аккордиона</h4>
<p>содержимое аккордиона</p>
</div>

</div

по нажатии на заголовок <h4> появляется содержимое <p>
вот js
[JS]$(document).ready(function(){
$(".accord p").hide();

$(".accord h4").click(function(){

$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h4").removeClass("active");
});

});[/JS]
я так понимаю, закрытие старого элемента не срабатывает потому, что в строке .siblings("p:visible").slideUp("slow"); скрипт ищет открытые р в родительском элементе <h4>, а это <div> и там только 1 р...

подскажите пожалуйста как сделать, чтобы скрипт полностью отрабатывал.

0

Ответить с цитированием данного сообщения

Nitrogen4ik Topic Starter Nitrogen4ikTopic Starter 23.5.2011, 11:11; Сообщений: 10 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	Topic Starter 23.5.2011, 11:11; Ответить: Nitrogen4ik Сообщение #2
0 Группа: User Сообщений: 10 Регистрация: 13.5.2011 Поблагодарили: 0 раз Репутация: 0	вы ни чего нового мне не предложили, просто добавили тело страницы... а ответа на мой вопрос нет :( мне нужно, чтобы изначально все теги р были закрыты, потом нажимаешь на один он открывается, нажимаешь на второй, старый закрывается и открывается новый, а сейчас происходит так, нажимаешь на один он открывается, нажимаешь на второй он открывается, старый тоже открыт и чтобы они закрылись нужно повторно нажимать на них....

P0ZiTR0N P0ZiTR0N 23.5.2011, 11:56; Сообщений: 0 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	23.5.2011, 11:56; Ответить: P0ZiTR0N Сообщение #3
Новичок Группа: Viewer Сообщений: 0 Регистрация: 6.5.2012 Поблагодарили: 0 раз Репутация: 0	<script type="text/javascript"> $(document).ready(function(){ $('.acc_container').hide(); $('.acc_trigger:first').addClass('active').next().show(); $('.acc_trigger').click(function(){ if( $(this).next().is(':hidden') ) { $('.acc_trigger').removeClass('active').next().slideUp("slow"); $(this).toggleClass('active').next().slideDown("slow"); } }); }); </script> <h4 class="acc_trigger">Первый элемент аккордиона</h4> <div class="acc_container"> <p>содержимое аккордиона</p> </div> <h4 class="acc_trigger">Второй элемент аккордиона</h4> <div class="acc_container"> <p>содержимое аккордиона</p> </div> <h4 class="acc_trigger">Третий элемент аккордиона</h4> <div class="acc_container"> <p>содержимое аккордиона</p> </div>

Nitrogen4ik Topic Starter Nitrogen4ikTopic Starter 23.5.2011, 13:34; Сообщений: 10 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	Topic Starter 23.5.2011, 13:34; Ответить: Nitrogen4ik Сообщение #4
0 Группа: User Сообщений: 10 Регистрация: 13.5.2011 Поблагодарили: 0 раз Репутация: 0	спасибо, но тоже немного не то :) сам див не должен закрываться, только р внутри него... сейчас детальнее объясню, чего я хочу добиться. у меня есть страница с отзывами о продукции компании, хочу сделать чтобы по нажатии на название продукта(<h4>) появлялись отзывы о нем. html такой <h2 align="center">Отзывы о продукции</h2><br /> <div class="accord"> <div class="panel"><img src="картинка продукта.jpg" align="left" height="90" width="99" /><h4>Название продукта</h4> <p>Отзывы по данному продукты</p> </div> </div> тоесть на странице выглядит так, картинка и название продукта, нажимаем на название и появляются отзывы. нажимаем на следующий продукт появляются отзывы о нем, старые закрываются. я недавно начал изучать веб-программирование и создание сайтов, поэтому немного дурачек)) я пытался через .find("p:visible") находить открытые р, но результат был тот же, что и с .siblings()

P0ZiTR0N P0ZiTR0N 23.5.2011, 14:05; Сообщений: 0 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	23.5.2011, 14:05; Ответить: P0ZiTR0N Сообщение #5
Новичок Группа: Viewer Сообщений: 0 Регистрация: 6.5.2012 Поблагодарили: 0 раз Репутация: 0	Объясняю... для нормальной функциональности скрипта в данном случае нужен хидер aka кнопка, которая скрывает/раскрывает другие div'ы. Кнопка имеет название. У вас названия между <div class="accord"> и <div class="panel"> не вижу. Структура: <div class="acc_trigger">text</div><!--Заголовок байана--> <div class="panel acc_container">hidden text</div><!--тело ячейки--> Имеем рабочий вид: <h2 align="center">Отзывы о продукции</h2> <div class="acc_trigger">Тыц сюда!</div> <div class="panel acc_container"> <img src="#" align="left" height="90" width="99" /><h4>Название продукта</h4> <p>Отзывы по данному продукты</p><br><br> </div> <div class="acc_trigger">Тыц сюда ысчо рас!</div> <div class="panel acc_container"> <img src="#" align="left" height="90" width="99" /><h4>Название продукта</h4> <p>Отзывы по данному продукты</p><br><br> </div>

tgarl tgarl 23.5.2011, 15:36; Сообщений: 140 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	23.5.2011, 15:36; Ответить: tgarl Сообщение #6
0 Группа: User Сообщений: 140 Регистрация: 29.9.2009 Поблагодарили: 0 раз Репутация: 0	если правильно понял(прошу прощения проверить негде в данный момент), но загвоздка заключается в том, что предыдущие открытые не скрываются? если да то добавь так: [JS]$(".accord h4").click(function(){ $(".accord p").hide();[/JS] т.е. при клике продублируй команду скрыть все абзацы в классе аккорд. так как при будет код в начале идти то соответственно произойдет сначала скрытие всех, а затем появление нужного

Nitrogen4ik Topic Starter Nitrogen4ikTopic Starter 23.5.2011, 15:43; Сообщений: 10 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	Topic Starter 23.5.2011, 15:43; Ответить: Nitrogen4ik Сообщение #7
0 Группа: User Сообщений: 10 Регистрация: 13.5.2011 Поблагодарили: 0 раз Репутация: 0	P0ZiTR0N, спасибо за терпение))

Nitrogen4ik Topic Starter Nitrogen4ikTopic Starter 23.5.2011, 15:48; Сообщений: 10 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	Topic Starter 23.5.2011, 15:48; Ответить: Nitrogen4ik Сообщение #8
0 Группа: User Сообщений: 10 Регистрация: 13.5.2011 Поблагодарили: 0 раз Репутация: 0	tgarl, именно! то, что нужно, спасибо большое.

Nitrogen4ik Topic Starter Nitrogen4ikTopic Starter 23.5.2011, 15:54; Сообщений: 10 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	Topic Starter 23.5.2011, 15:54; Ответить: Nitrogen4ik Сообщение #9
0 Группа: User Сообщений: 10 Регистрация: 13.5.2011 Поблагодарили: 0 раз Репутация: 0	только теперь, в случае если открыт 1 р и пытаешся его закрыть, он закрывается и открывается)) простите за наглость и назойливость

tgarl

24.5.2011, 15:58; Ответить: tgarl

Сообщение #10

0

Группа: User
Сообщений: 140
Регистрация: 29.9.2009
Поблагодарили: 0 раз
Репутация:

0

[JS]<script type="text/javascript">
$(document).ready(function(){
$('div.accord p').hide();
$("div.accord h4").toggle(function(){
$('div.accord p').hide();
$(this).next('p').show();},function(){
$(this).next('p').hide();
});
});
</script>[/JS]

вот принцип, ну а красоты и плавности уже сам сделаешь

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой

или обратитесь к любому из модераторов.

« Предыдущая тема · Программная часть · Следующая тема »

1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)

Пользователей: 0

Похожие темы

Тема	Ответов	Автор	Просмотров	Последний ответ
Как вы отдыхаете от работы за компом	151	adw-kupon.ru	19809	Сегодня, 13:52 автор: Vmir
Как вы бросили работу и перешли на заработок с сайтов?	20	uahomka	3434	Сегодня, 11:54 автор: Skyworker
Как в пушсетках покупают по 100-200 тысяч кликов за день?	1	Boymaster	504	Сегодня, 11:45 автор: Skyworker
Как вывести деньги в Украине с заблокированного Юмани ?	30	freeax	4997	20.4.2024, 16:49 автор: Liudmila
Арбитражники, как ведете учет расходов и доходов?	13	Boymaster	2017	20.4.2024, 15:06 автор: Boymaster