Javascript свернуть развернуть div

Так мы выбрали все блоки для сворачивания, то что нужно.

Но теперь HTML новый, что сделает всё тот же $(this).siblings() ? Он выбирает соседей кликнутого блока. В этом html:

 
Заголовок
 
здесь будет текст
 
 
Заголовок
 

Очевидно, мы пошли куда-то не туда, ведь нам нужно было добраться до соседних .pointer-box

Совет:
Вы можете пользоваться console.log() для того чтобы понять как работает ваш код. Например:

console.log($(this)); console.log($(this).siblings()); console.log($(this).siblings().children(".pointer-text"));

— этот код покажет в консоли браузера коллекции элементов на каждом этапе. Так вы смогли бы сами сразу понять где ошиблись или куда идти дальше.

Чтобы их достичь, нужно сначала из this === .pointer добраться до .pointer-box
Это можно сделать с помощью метода parent() — http://jquery.page2page.ru/index.php5/Поиск_элемен.

Новый код $(this).parent().siblings()
this — это .pointer

Для него находим родителя

Для него находим соседей, у него только один сосед

Ну и .children(«.pointer-text») выберет в этих блоках именно то что нужно сверуть.

$(this) .parent() .siblings() .children(".pointer-text") .slideUp("show") .prev(".pointer").toggleClass("pointer-active");

Но я бы переписал, чтобы не использовать метод prev():

var pointerBoxSiblings = $(this).parent().siblings(); pointerBoxSiblings .children(".pointer") .toggleClass("pointer-active"); pointerBoxSiblings .children(".pointer-text") .slideUp("show");

Ну и вторую чать кода можно попроще сделать, без блужданий вперёд и назад:

$(this) .toggleClass("pointer-active") .next(".pointer-text") .slideToggle("show");

Источник

Сворачивание и разворачивание блока на javascript

Передо мной стояла задача написать плавное сворачивание и разворачивание блока на javascript, без использования библиотек jqery и ей подобных. Но эффект должен быть подобен jquery toggle, то есть должно быть плавное сворачивание блока и разворачивание блока, как вконтакте.

Решением данной задачи является мною написанная javascript функция, которая не занимает более 1,3кб.

Ниже предоставлен код и пример использования функции сворачивания/разворачивания div блоков.

js код сворачивания/разворачивания блока

function toggle(id) < var e = document.getElementById(id); var dh = gh(id); var elems = e.getElementsByTagName('*'); if (e.style.display == "none") < for(var i=0; ie.style.height="1px"; e.style.display = "block"; for(var i=0;i<=100;i+=5) < (function() < var pos=i; setTimeout(function(),pos*5); > )(); > setTimeout(function()>,500); return true; > else < var lh=dh-1+"px"; for(var i=0; ifor (var i=100;i>=0;i-=5) < (function() < var pos=i; setTimeout(function() < e.style.height = (pos/100)*dh+"px"; if (pos<=0) < e.style.display = "none"; e.style.height=lh; >>,1000-(pos*5)); > )(); > return true; > return false; > function vhe(obj, vh) function gh(id) < var e = document.getElementById(id); if(e.style.display == "none") < e.style.visibility = "hidden"; e.style.display = "block"; dh = e.clientHeight||e.offsetHeight+5; // Высота e.style.display = "none"; e.style.visibility = "visible"; >else < dh = e.clientHeight||e.offsetHeight+5; // Высота >return dh; >

Как видите в примере предоставлено три функции: toggle — отвечает за сворот/разворот блока, а остальные вспомогательные, одна определяет высоту div блока, другая показывает или скрывает дочерние элементы нужного блока.

Использование функции:

 
 Текст блока. 
 
Свернуть/Развернуть
 

Как видите все просто, по нужному событию посылаем у функцию id блока и наслаждаемся красивым сворачиванием и разворачиванием блока на javascript

Источник

Свернуть и развернуть блок по клику на jQuery

По умолчанию или при открытии страницы данная категория имеет значение высоты и скрывает все переполненные тексты, а когда вы нажмете на кнопку, то автоматически показывается скрытый текст, что изначально его не видим. Когда весь раздел развернется, текст для чтения будет заменен, где при повторном при щелчке по разделу, мы снова свернем или уменьшим, как изначально было. Также есть кнопка со стрелкой, которая меняется вверх и вниз в зависимости от положение по фиксации.

p <
margin: 0 0 1.5em;
>
.container <
max-width: 400px;
margin: 0 auto;
>

.entry <
position: relative;
overflow: hidden;
margin: 30px 0;
padding: 20px 20px 4em 20px;
background: #FFF;
font-family: «Open Sans», sans-serif;
box-shadow: 0 0 15px #999;
>

.entry-title,
.entry-title a <
margin-top: 0;
font-family: Oswald, sans-serif;
color: #333;
text-decoration: none;
>

.entry-title a:hover <
color: #ff0047;
>

.more-link <
position: absolute;
left: 0;
bottom: 0;
display: block;
width: 100%;
padding: 8px;
background: #ff0047;
color: #FFF;
text-align: center;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
box-shadow: 0 0 10px #000;
>

.more-link:hover <
background: #e60023;
>

.more-link:after <
content: «\2193»;
margin-left: 8px;
font-size: .8em;
>

.more-link.open:after <
content: «\2191»;
>

$(document).ready(function() <
var closeHeight = ’10em’;
var moreText = ‘Read More’;
var lessText = ‘Read Less’;
var duration = ‘1000’;
var easing = ‘linear’;

$(‘.page-template-page_blog-php #content .entry, .container #content .entry’).each(function()

var current = $(this).children(‘.entry-content’);
current.data(‘fullHeight’, current.height()).css(‘height’, closeHeight);

var openSlider = function() <
link = $(this);
var openHeight = link.prev(‘.entry-content’).data(‘fullHeight’) + ‘px’;
link.prev(‘.entry-content’).animate(, , easing);
link.text(lessText).addClass(‘open’).removeClass(‘closed’);
link.unbind(‘click’, openSlider);
link.bind(‘click’, closeSlider);
>

var closeSlider = function() <
link = $(this);
link.prev(‘.entry-content’).animate(, , easing);
link.text(moreText).addClass(‘closed’).removeClass(‘open’);
link.unbind(‘click’);
link.bind(‘click’, openSlider);
>

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

Источник