valdemariuses

[РЕШЕНО] Как временно скрыть опции

Рекомендуемые сообщения

Приветствую.

Возможно кто сталкивался, как можно реализовать временное скрытие опций и открытие их по клику на ссылку.

Смысл такой. У товара есть к примеру 5 опций. В каждой из них от 1 до 8 вариантов. Надо отображать только первые 3, а остальные временно скрывать и выводить надпись "Посмотреть остальные" при клике на которую будут раскрываться остальные.

post-711394-0-64879700-1471442832_thumb.jpg

Возможно есть готовые решения.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
SlideShow    21

Если не заморачиваться, то версткой display: none; или opacity: 0;

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Tom    1 969

Если не заморачиваться, то версткой display: none; или opacity: 0;

В том то и дело, что необходимо их не полностью скрыть, а до нажатия на кнопку ПОКАЗАТЬ

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
AWARO    545

В том то и дело, что необходимо их не полностью скрыть, а до нажатия на кнопку ПОКАЗАТЬ

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
afwollis    1 094

ну так "display:none;", а по кнопке "показать" ставишь им, грубо говоря, "display:block;"

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Tom    1 969
В каждой из них от 1 до 8 вариантов. Надо отображать только первые 3, а остальные временно скрывать и выводить надпись "Посмотреть остальные" 

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Реализовал так

<script type="text/javascript">
window.onload= function() {
	document.getElementById('toggler').onclick = function() {
		openbox('input-option1,input-option2,input-option3,input-option4,input-option5,input-option6,input-option7,input-option8,input-option9,input-option10', this);
		return false;
	};
};
function openbox(id, toggler) {
	var div = document.getElementById(id);
	if(div.style.height == '100%') {
		div.style.height = '280px';
		toggler.innerHTML = 'ПОКАЗАТЬ ВСЕ';
	}
	else {
		div.style.height = '100%';
		toggler.innerHTML = 'СКРЫТЬ';
	}
}
</script>

Правда теперь возникла друга проблемма. Если в опции меньше 3 вариантов, остается пустое место. Как убрать - ума не приложу.

post-711394-0-39616800-1471462148_thumb.jpg

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
chukcha    888

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Изменено пользователем valdemariuses

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу