|
|
Регистрация Восстановить пароль |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
20.07.2016, 12:48 | #1 |
Форумчанин
Регистрация: 04.12.2008
Сообщений: 260
|
Растянуть div по ширине по нажатию на ссылку
Добрый день! Подскажите, может есть скрипт такой. Есть несколько div блоков, построенных на bootstrap:
Код HTML:
<div class="row"> <div class="col-md-4 col-sm-6"> <a href="1">Ссылка 1</h3></a> <p>бла бла бла</p> </div> <div class="col-md-4 col-sm-6"> <a href="2">Ссылка 2</h3></a> <p>бла бла бла</p> </div> <div class="col-md-4 col-sm-6"> <a href="3">Ссылка 3</h3></a> <p>бла бла бла</p> </div> .... </div> Мне надо, чтобы по клику на ссылку div-блок растянулся на всю ширину экрана и в нем был расширенный текст, а остальные div-блоки или исчезли или сдвинулись вниз. При этом в расширенной форме появилась кнопка закрыть, по нажатию на которую все возвращалось бы в первоначальный вид. Т.е. что-то вроде: Существует такое в природе?
Я бы изменил мир, но Бог не дает исходники...
|
20.07.2016, 19:19 | #2 |
юзер как все
Участник клуба
Регистрация: 10.01.2012
Сообщений: 1,586
|
Наверняка существует, чего сейчас только нет.
Но задача тут не большая, и имеет некоторые особенности. И как мне кажется, лучше всего написать маленький логический кусок кода, чем искать что-то в инете, а потом еще и переписывать его. Как пример логики. Код:
PHP код:
<Дзен - Вся вселенная в тебе > | Резюме: https://ch3ll0v3k.github.io/CV/
|
21.07.2016, 14:21 | #3 |
Форумчанин
Регистрация: 04.12.2008
Сообщений: 260
|
Я привел картинку для примера. Там не 4-ре дива, а аж 9 штук, 3 строки и 3 столбца. Сделано через bootstrap, шаблон заточен под мобилу. Скажите, а можно как-то через код удалить или заморозить класс, которые уже прописан в коде. Т.е. есть вот команда addClass - она добавляет класс, есть removeClass - она удаляет, добавленный класс, а можно ли как-то удалить или заморозить уже существующий класс. Идея такая, что я хочу по нажатию на ссылку удалить класс col-md-4 col-sm-6 и вместо него добавить col-md-12 col-sm-12, чтобы он стад на всю ширину экрана.
Я бы изменил мир, но Бог не дает исходники...
|
21.07.2016, 17:08 | #4 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
https://jsfiddle.net/naiveMan/3puyqyrv/
UPD: можно переписать на флексах и менять порядок, чтобы открытый блок сдвигал вниз свою линию всегда, а не только для первых
Alar, верни репу!
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Растянуть div (по ширине) внутри div | CorvusiiCorax | HTML и CSS | 8 | 26.01.2013 05:21 |
Как растянуть div на оставшуюся высоту родительского div'a? | Gans.7 | HTML и CSS | 0 | 01.04.2012 10:55 |
Ряд символов, растянуть по ширине. | Alex Cones | HTML и CSS | 2 | 13.03.2010 09:19 |
Растянуть текст по ширине в PowerPoint | RIO | Microsoft Office Word | 1 | 06.03.2010 23:40 |
Как растянуть текст по ширине слоя | shass | HTML и CSS | 5 | 01.03.2009 02:43 |