22.10.2015, 19:45
|
|
Интересующийся
|
|
Регистрация: 02.08.2015
Сообщений: 10
|
|
|
Toggle эффект блока с кнопкой "Читать дальше". С меня "+"
Добрый вечер. Помогите пожалуйста в таком деле.. есть много одинаковых блоков с разной высотой, нужно реализовать что-то вроде toggle-эффекта.
$(document).ready(function() {
$('.toggle_block').css('height', '90px');
$(".info_name").click(function(){
$('.toggle_block').css('height', 'auto');
});
});
задал высоту этих самых блоков, при клике делаю автоматическую.. но, нужно чтобы менялась высота только того блока в котором была нажата кнопка "Читать дальше", а при втором нажатии блок обратно становился высотой 90px.
Было бы хорошо если бы и текст кнопки менялся, ну это не обязательно)
Мне кажется задача не сложная, но сам додуматься не могу))
P.S с меня "+" в карму)) |
|
22.10.2015, 20:01
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,123
|
|
|
subbziro,
открывашка 230 и ещё куча
|
|
23.10.2015, 14:12
|
|
Интересующийся
|
|
Регистрация: 02.08.2015
Сообщений: 10
|
|
Спасибо  воспользовался поиском, сделал по вашему примеру из темы:
2 блока "отрыть полностью"
Сделал обработку нажатия на кнопки в других блоках(предыдущий сворачивается->новый блок открывается), но работает криво.. костыли не прокатили 
К вашему решению можно прицепить изменения текста на кнопке "Читать подробнее" / "Скрыть"? |
|
23.10.2015, 14:27
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,123
|
|
|
Сообщение от subbziro
|
|
К вашему решению можно прицепить изменения текста на кнопке "Читать подробнее" / "Скрыть"?
|
да
Вывод информации при нажатии кнопки читать далее или
Вывод информации при нажатии кнопки читать далее
|
Сообщение от subbziro
|
|
Сделал обработку нажатия на кнопки в других блоках(предыдущий сворачивается->новый блок открывается), но работает криво.. костыли не прокатили
|
открывашка есть все варианты врятли вы придумаите то чего нет ещё. |
|
23.10.2015, 14:47
|
|
Интересующийся
|
|
Регистрация: 02.08.2015
Сообщений: 10
|
|
не получается прицепить сюда код с примеров, не работает, кнопка сделана тегом <a></a> и классом .info_name. да я и не знаю как ее в код правильнее поставить
$('.toggle_block').css('height', '90px');
var txt = document.querySelectorAll('.toggle_block'), min = 90;
[].forEach.call(document.querySelectorAll('.info_name'), function(item,i) {
var elem = txt[i];
item.addEventListener('click', function() {
var h = elem.clientHeight < elem.scrollHeight ? elem.scrollHeight : min
elem.style.height = h + 'px';
// elem.classList.toggle('open')
});
});
|
|
23.10.2015, 15:02
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,123
|
|
|
subbziro,
сделайте минимальный html + css и описание
|
|
23.10.2015, 15:16
|
|
Интересующийся
|
|
Регистрация: 02.08.2015
Сообщений: 10
|
|
HTML
<div class="question-cont">
<div class="toggle_block">
<p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
</p>
</div>
<div class="question_info">
<a class="info_name">читать подробнее</a> </div>
</div>
</div>
CSS
.toggle_block{
float: left;
overflow: hidden;
}
.question-cont{
float: left;
margin: 50px;
}
высота блока регулируется через js, это основные стили
Последний раз редактировалось subbziro, 23.10.2015 в 15:19.
|
|
23.10.2015, 16:38
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,123
|
|
|
открывашка 231 со сменой текста на кнопке
subbziro,
медитируйте и давайте переменным разумные имена, а не так как в коде ниже.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.toggle_block{
float: left;
overflow: hidden;
}
.question-cont{
float: left;
margin: 50px;
width: 300px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var a = $(".question-cont"),
e = $(".toggle_block"),
h = $(".info_name"),
f = ["читать подробнее", "скрыть"];
e.css("height", "90px");
a.each(function(a, g) {
var c = $(".info_name", g);
c.click(function(b) {
b.preventDefault();
b = $(".toggle_block", g);
e.not(b).animate({
height: "90px"
}, 800, function() {
h.not(c).text(f[0])
});
var d = b[0],
a = d.clientHeight < d.scrollHeight ? d.scrollHeight + "px" : "90px";
b.animate({
height: a
},
1000,
function() {
c.text(f[+("90px" != a)])
})
})
})
});
</script>
</head>
<body>
<div class="question-cont">
<div class="toggle_block">
<p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
</p>
</div>
<div class="question_info">
<a class="info_name">читать подробнее</a> </div>
</div>
<div class="question-cont">
<div class="toggle_block">
<p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
</p>
</div>
<div class="question_info">
<a class="info_name">читать подробнее</a> </div>
</div>
</body>
</html>
Последний раз редактировалось рони, 12.09.2017 в 22:36.
|
|
24.10.2015, 11:07
|
|
Интересующийся
|
|
Регистрация: 02.08.2015
Сообщений: 10
|
|
Огромное спасибо, то что нужно!  |
|
28.12.2016, 01:09
|
|
Новичок на форуме
|
|
Регистрация: 28.12.2016
Сообщений: 1
|
|
|
Подскажите как в этом коде вместо переменной f = ["читать подробнее", "скрыть"]; прописать чтобы картинка менялась типа этого:
imgElem.src = "/new/images/min.png"; или что то другое
|
|
|
|
