Раскрывающийся и сворачивающийся по клику div
Добрый вечер! Прошу найти решение задачи.
Есть несколько div, при клике на которые разворачивается скрытый текст: <div class="view-source"><a href="#></a> <div class="hide">Спрятанный текст</div> </div> <div class="view-source"><a href="#></a> <div class="hide">Спрятанный текст</div> </div> <div class="view-source"><a href="#></a> <div class="hide">Спрятанный текст</div> </div>
$(document).ready(function(){
$('.view-source .hide').hide();
$('.view-source a').toggle(
function(){
$(this).siblings('.hide').stop(false, true).slideDown(500);
},
function(){
$(this).siblings('.hide').stop(false, true).slideUp(500);
}
);
});
Как сделать так, чтобы развернутый div сворачивался при клике на любой из других div'ов - оберток (с классом view-source)? То есть, на один момент времени должен быть открыт только 1 скрытый div. |
Кавычки у атрибутов надо закрывать...
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<div class="view-source">
<a href="#">111</a>
<div class="hide">Спрятанный текст</div>
</div>
<div class="view-source">
<a href="#">222</a>
<div class="hide">Спрятанный текст</div>
</div>
<div class="view-source">
<a href="#">333</a>
<div class="hide">Спрятанный текст</div>
</div>
<script>
$(document).ready(function(){
$('.view-source .hide').hide();
$('.view-source a').on('click', function() {
$('.view-source .hide').slideUp(500);
$(this).parent().find('.hide').slideDown(500);
});
});
</script>
</body>
</html>
|
Спасибо! :)
|
jsnb,
нажмите 111 второй раз или поместите дивы в конец длинной страницы ... Вариант
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<div class="view-source">
<a href="#">111</a>
<div class="hide">Спрятанный текст</div>
</div>
<div class="view-source">
<a href="#">222</a>
<div class="hide">Спрятанный текст</div>
</div>
<div class="view-source">
<a href="#">333</a>
<div class="hide">Спрятанный текст</div>
</div>
<script>
$(function(){
$('.view-source .hide').hide();
$a = $('.view-source a');
$a.on('click', function(event) {
event.preventDefault();
$a.not(this).next().slideUp(500);
$(this).next().slideToggle(500);
});
});
</script>
</body>
</html>
|
Цитата:
|
Перекидывает на самый верх сайта
Здравствуйте, сделал отдельно все работает. Переношу на сайт, при нажатии выбрасывает на верх страницы и div не раскрывается. Думаю дело в ссылке "#" может можно чем-то заменить.Спасибо!
|
Александр77,
может забыли function(event) { event.preventDefault(); добавить? |
не работает код
проблема в том что у меня на этой странице подключен слайдер и когда я подключаю библиотеку слайдер перестает работать
|
Александр77,
ненадо грузить много версий jquery достаточно одной |
я их заменил и слайдер перестал работать? с чем это может быть связанно
|
Александр77,
c тем что слайдер устарел и не работает с новой версией jquery , так не ставьте новую оставьте с которой работал слайдер. |
рони,
привет помоги со скриптом |
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<div class="view-source">
<a href="#">111</a>
<div class="hide">Спрятанный текст</div>
</div>
<div class="view-source">
<a href="#">222</a>
<div class="hide">Спрятанный текст</div>
</div>
<div class="view-source">
<a href="#">333</a>
<div class="hide">Спрятанный текст</div>
</div>
<script>
$(function(){
$('.view-source .hide').hide();
$a = $('.view-source a');
$a.on('click', function(event) {
event.preventDefault();
$a.not(this).next().slideUp(500);
$(this).next().slideToggle(500);
});
});
</script>
</body>
</html>
скрипт твой дело в том что работает он не много не так как надо а именно мне на до чтобы внутри открывающего блока была ссылка а когда я ее добавляю блок закрывается |
Цитата:
$a = $('.view-source > a'); добавьте красное |
спасибо
|
Спасибо, скажите, а как сделать, чтобы первый пунт был развернут по умолчани при загрузке страницы?
|
Ust,
$('.view-source .hide').hide().eq(0).show(); |
Ребята, привет. Спасибо за подробное решение, поставил себе все работает, но хотелось бы уточнить. Можно ли сделать так, чтобы при обновлении страницы блок не раскрывался? А то сейчас, когда обновляешь страницу или заходишь по новой, блок сначала раскрывается, а потом закрывается как и должно быть. Буду рад помощи. Спасибо!:help:
|
Paul12345, в css добавить
.view-source .hide{
display: none;
}
из js убрать |
Цитата:
|
Рони, возник еще вопрос, помогите, пожалуйста, какой должна быть структура кода и js, чтобы список был в одну линию, а раскрывался контент каждого элемента в одном диве под списком.
|
|
Цитата:
|
Использовал вот такую конструкцию:
<!-- Tab -->
<span class='tab'>Ссылка 1</span>
<span class='tab'>Ссылка 2</span>
<span class='tab'>Ссылка 3</span>
<div class="tab-content">
<div class="c">Текст 1</div>
<div class="c none">Текст 2</div>
<div class="c none">Текст 3</div>
</div>
<!-- End Tab -->
<script type="text/javascript">
var tabs = document.querySelectorAll(".tab");
var con = document.querySelectorAll(".c");
var temp = con[0];
[].forEach.call(tabs, function(item, i) {
item.addEventListener("click", function() {
temp.classList.add("none");
temp = con[i];
temp.classList.remove("none")
})
});
</script>
Подскажите, как можно задать отдельный фон активной вкладке? Через CSS не получается. Можно потом перенести сообщение в другую ветку, если здесь не в тему. Спасибо! |
Цитата:
|
Я наверно не правильно выразился, фон самого таба
|
Paul12345,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.none {
display: none;
}
.active {
background-color: hsla(240, 100%, 40%, 1);
color: hsla(0, 0%, 100%, 1);
}
</style>
</head>
<body>
<!-- Tab -->
<span class='tab active'>Ссылка 1</span>
<span class='tab'>Ссылка 2</span>
<span class='tab'>Ссылка 3</span>
<div class="tab-content">
<div class="c">Текст 1</div>
<div class="c none">Текст 2</div>
<div class="c none">Текст 3</div>
</div>
<!-- End Tab -->
<script type="text/javascript">
var tabs = document.querySelectorAll(".tab");
var con = document.querySelectorAll(".c");
var temp = 0;
[].forEach.call(tabs, function(item, i) {
item.addEventListener("click", function() {
item.classList.add("active");
tabs[temp].classList.remove("active")
con[temp].classList.add("none");
temp = i;
con[temp].classList.remove("none")
})
});
</script>
</body>
</html>
|
Да, именно, спасибо огромное!!!
|
Цитата:
|
открывашка и смена текста на кнопке
Batyabest,
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.view-source .hide{
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="view-source">
<a href="#">развернуть </a>
<div class="hide">Спрятанный текст</div>
</div>
<div class="view-source">
<a href="#">развернуть </a>
<div class="hide">Спрятанный текст</div>
</div>
<div class="view-source">
<a href="#">развернуть</a>
<div class="hide">Спрятанный текст</div>
</div>
<script>
$(function(){
$('.view-source .hide');
var $a = $('.view-source a');
$a.on('click', function(event) {
event.preventDefault();
$a.text("развернуть").not(this).next().slideUp(500);
var $hidden = $(this).next().is(":hidden");
$(this).next().slideToggle(500);
$hidden && $(this).text("свернуть");
});
});
</script>
</body>
</html>
|
Вариант
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<div class="view-source">
<a href="#">Развернуть</a>
<div class="hide">Спрятанный текст</div>
</div>
<div class="view-source">
<a href="#">Развернуть</a>
<div class="hide">Спрятанный текст</div>
</div>
<div class="view-source">
<a href="#">Развернуть</a>
<div class="hide">Спрятанный текст</div>
</div>
<script>
$(function(){
$('.view-source .hide').hide();
$a = $('.view-source a');
$a.on('click', function(event) {
event.preventDefault();
$a.not(this).next().slideUp(500);
$a.not(this).text('Развернуть');
$(this).next().slideToggle(500);
$(this).text($(this).text()=='Свернуть'?'Развернуть':'Свернуть');
});
});
</script>
</body>
</html>
|
Dilettante_Pro,
А подскажите, пожалуйста, вариант, где "свернуть/развернуть" были бы в каждом случае оригинальные для каждого спойлера. Т.е., например: Развернуть 1 / Свернуть 1 Спрятанный текст 1 Развернуть 2 / Свернуть 2 Спрятанный текст 2 |
mikeac,
сложно придумать такую открывашку, которой ещё нет на форуме :lol: Открывашка 250 открытие/закрытие блоков со сменой текста на кнопке |
рони, вы кинули ссылку с https протоколом, а в коде, что расположен на той странице jq подключается по http протоколу, поэтому ваш код будет нерабочим.
У некоторых пользователей могут возникнуть сложности с воспроизведением вашего кода. |
Nexus,
добавил s :thanks: |
| Часовой пояс GMT +3, время: 21:08. |