Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 20.07.2016, 12:48   #1
Polotenchik
Форумчанин
 
Аватар для Polotenchik
 
Регистрация: 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-блоки или исчезли или сдвинулись вниз. При этом в расширенной форме появилась кнопка закрыть, по нажатию на которую все возвращалось бы в первоначальный вид. Т.е. что-то вроде:



Существует такое в природе?
Изображения
Тип файла: png Image 1.png (38.0 Кб, 149 просмотров)
Тип файла: png Image 2.png (60.6 Кб, 152 просмотров)
Я бы изменил мир, но Бог не дает исходники...
Polotenchik вне форума Ответить с цитированием
Старый 20.07.2016, 19:19   #2
pompiduskus
юзер как все
Участник клуба
 
Аватар для pompiduskus
 
Регистрация: 10.01.2012
Сообщений: 1,586
По умолчанию

Наверняка существует, чего сейчас только нет.
Но задача тут не большая, и имеет некоторые особенности.
И как мне кажется, лучше всего написать маленький логический кусок кода, чем искать что-то в инете, а потом еще и переписывать его.

Как пример логики.
Код:

<div id="left-top"> 
    <div onclick="controll(this)" status="closed"></div>
    <div class="content">.....</div>
</div>

<div id="right-top">
    <div onclick="controll(this)" status="closed"></div>
    <div class="content">.....</div>
</div>

<div id="left-bottom">
    <div onclick="controll(this)" status="closed"></div>
    <div class="content">.....</div>
</div>

<div id="right-bottom">
    <div onclick="controll(this)" status="closed"></div>
    <div class="content">.....</div>
</div>

PHP код:

function controll(elem){

    if( 
elem.getAttribute("status") == "closed" ){
        
elem.setAttribute("status""open");
        
elem.parentNode.style.width "ширина закрытого елемента";

    }else{
        
elem.setAttribute("status""closed");
        
elem.parentNode.style.width "ширина открытого елемента";

    }


<Дзен - Вся вселенная в тебе > | Резюме: https://ch3ll0v3k.github.io/CV/
pompiduskus вне форума Ответить с цитированием
Старый 21.07.2016, 14:21   #3
Polotenchik
Форумчанин
 
Аватар для Polotenchik
 
Регистрация: 04.12.2008
Сообщений: 260
По умолчанию

Я привел картинку для примера. Там не 4-ре дива, а аж 9 штук, 3 строки и 3 столбца. Сделано через bootstrap, шаблон заточен под мобилу. Скажите, а можно как-то через код удалить или заморозить класс, которые уже прописан в коде. Т.е. есть вот команда addClass - она добавляет класс, есть removeClass - она удаляет, добавленный класс, а можно ли как-то удалить или заморозить уже существующий класс. Идея такая, что я хочу по нажатию на ссылку удалить класс col-md-4 col-sm-6 и вместо него добавить col-md-12 col-sm-12, чтобы он стад на всю ширину экрана.
Я бы изменил мир, но Бог не дает исходники...
Polotenchik вне форума Ответить с цитированием
Старый 21.07.2016, 17:08   #4
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

https://jsfiddle.net/naiveMan/3puyqyrv/
UPD: можно переписать на флексах и менять порядок, чтобы открытый блок сдвигал вниз свою линию всегда, а не только для первых
Alar, верни репу!
Naive вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Растянуть 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