Показать сообщение отдельно
  #1 (permalink)  
Старый 13.11.2015, 18:17
Новичок на форуме
Отправить личное сообщение для Крутой KOSTYAN Посмотреть профиль Найти все сообщения от Крутой KOSTYAN
 
Регистрация: 13.11.2015
Сообщений: 4

Слайдинг на JQuery
Получиться: это

Код:

$(function() {
$('.question').toggle(function(){
$(this).siblings(".answer").show();
}, function(){
$('.название класса элемента на который нажимать').siblings(".класс того что будет выводить").hide();  
});
});


HTML:

<div id="faq">
				<p class="question" id="1">Почему нет авторизации?</p>
                                <div class="answer">Ответ: Она не готова</div>
		</div>

CSS:
<style type="text/css">
	.title {color:white;background:#00FFFF;padding:5px;margin-left:20px;text-align:center;font-size:30px;margin: 0 auto;}
	body {background:#75af49;margin:0;padding:0;font-size:13px;font-family:Tahoma,Geneva,sans-serif;color:#fff;};
	body.div {color:navy;background:#fff;padding:5px;margin-left:20px;}
	.div {color:navy;background:#fff;padding:5px;margin-left:20px;text-align:center;font-size:30px;margin: 0 auto}
	.auth {color:navy;background:#0ff;padding:5px;margin-left:20px;text-align:center;font-size:30px;margin: 0 auto}
	div {color:black;background:#fff;padding:5px;margin-left:20px;text-align:center;font-size:15px;margin: 0 auto}
	.img {position:absolute;right:0px}
	.stati {position:absolute;right:0px;margin-top:100px}
	.img2 {position:absolute;left:50px;down:80px;margin-top:105px;}
	.img3 {position:absolute;right:105px;down:80px;margin-top:105px;}
	.img4 {position:absolute;left:100px;down:80px;margin-top:3150px;}
	.b-popup{
    	width:100%;
    	height: 2000px;
   	background-color: rgba(0,0,0,0.5);
    	overflow:hidden;
    	position:fixed;
   	 top:0px;
	}
	.right {width:250px}
	.left {width:150px}
	.question {
		margin: 0 auto;
		font-size: 16px
		font-family: Tahoma;
		color: #0000FF;
		text-decoration: underline;
	}
        .question:hover {
		color: red;
	}
        .answer {
		border:1px solid;
		padding:50px;
		display:none;
	}
	</style>


Подключить JQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
Ответить с цитированием