Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 14.01.2010, 00:00   #1
soonner
Пользователь
 
Аватар для soonner
 
Регистрация: 14.03.2009
Сообщений: 97
По умолчанию jquery гармошка

Использую, обычную гармошку

Код HTML:
<script type="text/javascript">
$(document).ready(function(){
	
	$(".accordion h3").eq(2).addClass("active");
	$(".accordion p").eq(2).show();

	$(".accordion h3").click(function(){
		$(this).next("p").slideToggle("slow")
		.siblings("p:visible").slideUp("slow");
		$(this).toggleClass("active");
		$(this).siblings("h3").removeClass("active");
	});

});
</script>

<style type="text/css">

.accordion {
	width: 480px;
	border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
	background: #e9e7e7 url(images/arrow-square.gif) no-repeat right -51px;
	padding: 7px 15px;
	margin: 0;
	font: bold 120%/100% Arial, Helvetica, sans-serif;
	border: solid 1px #c4c4c4;
	border-bottom: none;
	cursor: pointer;
}
.accordion h3:hover {
	background-color: #e3e2e2;
}
.accordion h3.active {
	background-position: right 5px;
}
.accordion p {
	background: #f7f7f7;
	margin: 0;
	padding:  10px 15px 400px;
	border-left: solid 1px #c4c4c4;
	border-right: solid 1px #c4c4c4;
}
</style>

Код HTML:
<div class="accordion">
	<h3>Question One Sample Text</h3>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
</div>
в таком виде все отлично работает.
Но как только в <p></p> появляеться <div> или <table> всё что находится в этих тегах оказуеться за гармошкой.

Почему? как с этим бороться, и как зделать так что бы работало!
soonner вне форума Ответить с цитированием
Старый 14.01.2010, 00:15   #2
ssdm
Форумчанин
 
Регистрация: 20.05.2009
Сообщений: 506
По умолчанию

У меня <table> отлично работает с этой гармошкой. Может ошиблись где ?
ssdm вне форума Ответить с цитированием
Старый 14.01.2010, 00:28   #3
soonner
Пользователь
 
Аватар для soonner
 
Регистрация: 14.03.2009
Сообщений: 97
По умолчанию

Да действительно с <table> работает, но мне всеравно нужно <div>, а <div> его разрывает непонятно почему
soonner вне форума Ответить с цитированием
Старый 14.01.2010, 13:54   #4
ssdm
Форумчанин
 
Регистрация: 20.05.2009
Сообщений: 506
По умолчанию

Цитата:
Сообщение от soonner Посмотреть сообщение
Да действительно с <table> работает, но мне всеравно нужно <div>, а <div> его разрывает непонятно почему
Потому что <div> в <div> не работает в принципе. Браузер принудительно закрывает <div> , если видит новый. Вроде так.
ssdm вне форума Ответить с цитированием
Старый 14.01.2010, 15:54   #5
soonner
Пользователь
 
Аватар для soonner
 
Регистрация: 14.03.2009
Сообщений: 97
По умолчанию

Спасибо, немного поразкинул мозгами зделал кому интересно то

Код:
<script type="text/javascript">
$(document).ready(function(){
	
	$(".accordion h3").eq(2).addClass("active");
	$(".accordion div.info").eq(2).show();

	$(".accordion h3").click(function(){
		$(this).next("div.info").slideToggle("slow")
		.siblings("div.info:visible").slideUp("slow");
		$(this).toggleClass("active");
		$(this).siblings("h3").removeClass("active");
	});

});
</script>

<style type="text/css">

.accordion {
	width: 480px;
	border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
	background: #e9e7e7;
	padding: 7px 15px;
	margin: 0;
	font: bold 120%/100% Arial, Helvetica, sans-serif;
	border: solid 1px #c4c4c4;
	border-bottom: none;
	cursor: pointer;
}
.accordion h3:hover {
	background-color: #e3e2e2;
}
.accordion h3.active {
	background-position: right 5px;
}
.accordion div.info {
	background: #f7f7f7;
	margin: 0;
	padding:  10px 15px 400px;
	border-left: solid 1px #c4c4c4;
	border-right: solid 1px #c4c4c4;
}
</style>
это то что перед </head> как видите заминил "P" на "div.info" и затем в <body>

Код:
<div class="accordion">
	<h3>Question One Sample Text</h3>
	<div class="info">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</div>
</div>
soonner вне форума Ответить с цитированием
Старый 11.11.2011, 13:27   #6
Lio Messi
Новичок
Джуниор
 
Регистрация: 11.11.2011
Сообщений: 1
По умолчанию

Салам! Если есть время помогите, как только вставляю в внутри <h3> то программа не работает(( Вот и сам код
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){

$(".accordion h3").eq(2).addClass("active");
$(".accordion div.info").eq(2).show();

$(".accordion h3").click(function(){
$(this).next("div.info").slideToggl e("slow")
.siblings("div.info:visible").slide Up("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass( "active");
});

});
</script>

<style type="text/css">

.accordion {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
background: #e9e7e7;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion h3:hover {
background-color: #e3e2e2;
}
.accordion h3.active {
background-position: right 5px;
}
.accordion div.info {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 400px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
</style>

<div class="accordion">
<h3>Question One Sample Text</h3>
<img src="General.jpg" width="50" height="50" align="left"/>
<div class="info">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.
</div>

<h3>Question One Sample Text</h3>
<div class="info">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.
</div>
</div>
Lio Messi вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Lightbox jQuery конфликтует с Ajax Schwarz JavaScript, Ajax 5 18.01.2014 11:56
jQuery itself spein JavaScript, Ajax 4 25.12.2009 22:30
прозрачность png в IE6 и jQuery smok JavaScript, Ajax 0 08.12.2009 15:44
jQuery menu spein JavaScript, Ajax 3 06.07.2009 22:45
Вопрос по библиотеке jQuery Help_me JavaScript, Ajax 5 04.03.2009 12:57