Форум

web-expanse · #1 (**permalink**) 25.11.2014, 08:27

Доброе утро
Есть код(нашел на этом же ресурсе), который при нажатии на ссылку открывает и при повтором нажатии закрывает скрытый текст
Что нужно добавить, что бы блок открывался/закрывался плавно?
Важно сохранить "Открыть/Скрыть"

<script>
window.onload= function() {
	document.getElementById('toggler').onclick = function() {
		openbox('box', this);
		return false;
	};
};
function openbox(id, toggler) {
	var div = document.getElementById(id);
	if(div.style.display == 'block') {
		div.style.display = 'none';
		toggler.innerHTML = 'Открыть';
	}
	else {
		div.style.display = 'block';
		toggler.innerHTML = 'Закрыть';
	}
}
</script>

<a id="toggler">Открыть</a>
<div id="box" style="display: none;">Отображаемый блок</div>

kostyanet · #2 (**permalink**) 25.11.2014, 08:31

Нужно CSS. Или JQ. Или сами пишите плавное изменение высоты/ширины по таймеру. display="block" это самоочевидно не плавно.

web-expanse · #3 (**permalink**) 25.11.2014, 09:03

Задачу решил кустарным способом, всем спасибо

function BspoilerControl(){
            //Скрываем все спойлеры
            $("div[name='spoiler']").hide();
            //Всем кнопкам спойлеров задаем текст и картинку (удобно для многоязыковых интерфейсов)
            $("p[name='spoilerbutton']").html("ЧИТАТЬ ДАЛЕЕ");
            //Перебераем все кнопки спойлеров на странице
            $("p[name='spoilerbutton']").each(function(){
                //Если прямо перед кнопкой спойлера стоит заголовок
                if($(this).prev(this).get(0).tagName == "H1" || $(this).prev(this).get(0).tagName == "H2" || $(this).prev(this).get(0).tagName == "H3"){
                    //Текст из заголовка переносим в кнопку, а сам заголовок убераем
                    var NewSpoilerButton = "<div name='spoilerbutton' class='advSpoilerHeader'><p><b>"+$(this).prev(this).html()+"</b> <span>ЧИТАТЬ ДАЛЕЕ</span></p></div>";
                    $(this).prev(this).replaceWith("");
                    $(this).replaceWith(NewSpoilerButton);
                    //В результате кнопки спойлеров с заголовками становятся div-ами. Теперь на странице может быть 2 типа кнопок спойлеров p и div типа
                }
            });
            //Для всех div кнопок обрабатываем клик
            $("div[name='spoilerbutton']").click(function () {
                //Если спойлер видим. Дословно: если свойство display для первого DOM брата/сестры равно "block" (т.е. видим в контексте применяемого эффекта slide)
                if($(this).next(this).css("display")=="block"){
                    //Записываем "показать>>" в span, который ребенок p, который ребенок нашей кнопки this. Потом поменяем его на "<<скрыть"
                    $(this).children("p").children("span").html("ЧИТАТЬ ДАЛЕЕ");
                    //Сворачиваем открытый спойлер
                    $(this).next(this).slideUp("normal");
                } else {
                    //Если спойлер не открыт, то он закрыт и соответственно меняем надпись и разворачиваем спойлер
                    $(this).children("p").children("span").html("СКРЫТЬ");                
                    $(this).next(this).slideDown("normal");
                }
              return false;
             });        
            //Теперь клик для всех p-кнопок
            $("p[name='spoilerbutton']").click(function () {
                //По тому же принципу, что до этого, только проще
                if($(this).next(this).css("display")=="block"){
                    $(this).next(this).slideUp("normal");
                    $(this).html("ЧИТАТЬ ДАЛЕЕ");
                } else {
                    $(this).next(this).slideDown("normal");
                    $(this).html("СКРЫТЬ");
                }
              return false;
             });
        }

<head>
<script type="text/javascript"> 
$(document).ready(function(){
BspoilerControl();
});
</script>
</head>
<p name='spoilerbutton' style='cursor:pointer'></p>
 <DIV name='spoiler' class='spoiler'> 
содержимое блока
 </div>

kostyanet · #4 (**permalink**) 25.11.2014, 09:11

Ахренеть. Вместо 3 строк css и 2 в js - телега "выбераем и перебераем".

Все на выберы президента!
Кого выберали? - Того же!
Это - перебер!

рони · #5 (**permalink**) 25.11.2014, 09:48

10000001 поиск ...
Toggle: скрыть текущий блок при открытии другого

web-expanse · #6 (**permalink**) 25.11.2014, 09:57

Сообщение от kostyanet

Ахренеть. Вместо 3 строк css и 2 в js - телега "выбераем и перебераем".

Все на выберы президента!
Кого выберали? - Того же!
Это - перебер!

Я не владею js вообще, не знаю язык как таковой
Можете мне написать не тяжелый код?
По вашему предыдущему комментарию я так понял, что нет
По этому я нашел рабочий вариант, главное что он удовлетворяет мои задачи с лихвой

web-expanse · #7 (**permalink**) 25.11.2014, 10:00

Сообщение от kostyanet

Ахренеть. Вместо 3 строк css и 2 в js - телега "выбераем и перебераем".

Все на выберы президента!
Кого выберали? - Того же!
Это - перебер!

Сообщение от рони

10000001 поиск ...
Toggle: скрыть текущий блок при открытии другого

Не нашел ни одного скрипта где реализовано "Показать/Скрыть"
Спасибо

kostyanet · #8 (**permalink**) 25.11.2014, 15:01

Потому что это мегабаян в стопицотый раз показывать как воткнуть в элемент класс с transition, а потом выткнуть класс с transition.

Я как-то тоже поискал годный простой попуп и все равно написал свой. Принцип точно такой же:

var popup_message=function(title){
	if(!title)
		return;
	if(typeof pop_message === 'undefined') {
		pop_message=document.body.appendChild(document.createElement('div'));
		pop_message.className='pop_message';
	}
	pop_message.title=title;
	pop_message.classList.add('pop_message_show');
	setTimeout(function(){
		pop_message.classList.remove('pop_message_show');
	},1500);
};

div.pop_message {
	position:fixed;
	top:0;
	width:100%;
	text-align:center;
	visibility:hidden;
	opacity:0;
	transition:opacity .5s;
}
/*
*/
	div.pop_message:before{
		content:attr(title);
		display:inline-block;
		background-color:#a00c20;
		font-size:14px;
		line-height:30px;
		color:white;
		padding:0 20px;
		box-shadow:3px 3px 5px rgba(95,65,25,0.15);
	}
	
div.pop_message_show {
	visibility:visible;
	opacity:1;
	transition:opacity .5s;
}

ундерстенд?

kostyanet · #9 (**permalink**) 25.11.2014, 15:08

А, ну да, они все были с кликами, вспомнил, точно, поэтому пришлось свой безкличный написать.

Ну вот, а теперь если вместо события от таймера будет событие от мыши?

kostyanet · #10 (**permalink**) 25.11.2014, 15:12

С другой стороны я подумал а ведь все правильно делает ТС. Задал вопрос, сразу не написали, нашел кошмарный код, возник челендж, значит скоро все напишут, готовенькое.

Форум

Справочник

Discord чат

Курсы javascript