Проблема с текстом

[Shenia132]

Есть дивы на сайте http://nrdesign.com.ua/ 

НАС ЧАСТО СПРАШИВАЮТ

 

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

[Switch74]

в скрипте который их открывает добавьте закрытие всех элементов section.ac-container article, если конечно у вас нет подобной комбинации объектов еще где-нибудь, иначе придется закрывать их по классам .ac-large, .ac-large1 и т.п.

[Shenia132]

а можете показать как сделать пожалуйста, можете код выложить ?

как надо сделать

[Switch74]

дайте мне ваш код открытия этих блоков, а то рыться и искать нет возможности

[Shenia132]

<div class = "often-ask">

<a href = "#"><img src = "images/price-of-services.png" alt = "Сколько стоят наши услуги"></a>

<section class="ac-container">

<div>

<input id="ac-2" name="accordion-1" type="checkbox" />

<label for="ac-2">Сколько стоят<br>наши услуги</label>

<article class="ac-medium">

<p>Услуг мы не предоставляем, однако если вы желаете установить любую CMS систему на свой сайт (при условии наличия у вас архива данной CMS), то можете обратиться к нам через форму обратной связи. Любая помощь в комментариях на сайте осуществляется исключительно на добровольных условиях.</p>

</article>

</div>

</section>

</div>

<div class = "often-ask">

<a href = "#"><img src = "images/ready-site.png" alt = "Когда будет готов сайт"></a>

<section class="ac-container">

<div>

<input id="ac-3" name="accordion-1" type="checkbox" />

<label for="ac-3">Когда будет<br>готов сайт</label>

<article class="ac-large">

<p>У нас два небольших проекта: "Форум твоего направления" и непосредственно этот сайт "Скрипты для сайтов". Большая часть времени уходит на их содержание и обслуживание.</p>

</article>

</div>

</section>

</div>

<div class = "often-ask">

<a href = "#"><img class = "last-img" src = "images/robots-start.png" alt = "Что нужно для начала работы"></a>

<section class="ac-container">

<div>

<input id="ac-4" name="accordion-1" type="checkbox" />

<label for="ac-4" class = "big-label">Что нужно<br>для начала роботы</label>

<article class="ac-large1">

<p>Связаться с нами можно через форму обратной связи (email почту), через социальные сети (twitter) или системы мгновенных сообщений: ICQ.</p>

</article>

</div>

</section>

</div>

</div>

css

 

.ac-container{

text-align: center;

    width: 150px;

margin: 10px auto 30px auto;

}

.ac-container label{

text-transform: uppercase;

padding: 5px 20px;

position: relative;

z-index: 20;

display: block;

cursor: pointer;

color: #2d2d2d;

text-shadow: 1px 1px 1px rgba(255,255,255,0.8);

font:22px Cuprum;

width: 140px;

right: 13px;

}

.ac-container label:hover{

 

}

.ac-container input:checked + label,

.ac-container input:checked + label:hover{

 

}

.ac-container label:hover:after,

.ac-container input:checked + label:hover:after{

content: '';

position: absolute;

width: 24px;

height: 24px;

right: 13px;

top: 7px;

}

.ac-container input:checked + label:hover:after{

}

.ac-container input{

display: none;

}

.ac-container article{

background: rgba(255, 255, 255, 0.5);

margin-top: -1px;

overflow: hidden;

height: 0px;

position: relative;

z-index: 10;

-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;

-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;

-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;

-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;

transition: height 0.3s ease-in-out, box-shadow 0.6s linear;

}

.ac-container article p{

font-style: italic;

color: #777;

line-height: 23px;

font-size: 14px;

padding: 20px;

text-shadow: 1px 1px 1px rgba(255,255,255,0.8);

}

.ac-container input:checked ~ article{

-webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;

-moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;

-o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;

-ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;

transition: height 0.5s ease-in-out, box-shadow 0.1s linear;

box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);

}

.ac-container input:checked ~ article.ac-small{

height: 140px;

width: 940px;

}

.ac-container input:checked ~ article.ac-medium{

height: 116px;

    width: 665px;

}

.ac-container input:checked ~ article.ac-large{

float: right;

    height: 89px;

    overflow: hidden;

    width: 617px;

}

 

.ac-container input:checked ~ article.ac-large1{

float: right;

    height: 89px;

    overflow: hidden;

width: 940px;

}

 

.ac-container .big-label {

width:190px;

position:relative;

right:41px;

}

Edited May 7, 2014 by Shenia132

[Switch74]

оуу... у вас тут хитрая css конструкция, и реализовать толково через css свойства я не уверен, что это возможно. Такое лучше делать через js например так

[Shenia132]

спасибо помогли !

[Shenia132]

скажите пожалуйста а как сделать чтобы тот блок который раскрываеться отодвигал все остальное что находиться под ним ?

[Светлана Г.]

1. position:absolute не использовать, т. к. блок вырывается из потока;

2. Использовать - visibility:hidden; вместо display:none.

[Shenia132]

Спасибо ! Скажите пожалуйста как мне на сайте nrdesign.com.ua сделать чтобы два последних пункта открывались в другую сторону, мне надо сделать так чтобы один открыл и он открылся на всю ширину блока, в первых двух пунктах это получается но последних два надо чтоб открывались в другую сторону (надеюсь объяснил понятно) и еще одна проблема когда открываешь пункт как мы работаем то двигаются все блоки

[Switch74]

сдвигаются, потому что они у вас float и им не хватает места

чтобы открывались справа налево в последних блоках, сделайте им отрицательный отступ побольше

[Shenia132]

я увеличиваю ширину блока они все равно сдвигаются, я ставлю ширину -80% он не работает

[Switch74]

не знаю как вы увеличивали, но у меня при увеличении все норм получается и ничего ни куда не скачет

для .often убираем padding и ставим width:150% - при этом увидите свои блоки на одной строке и при открытии подсказок ни кто не прыгает.

НО ТАК ОСТАВЛЯТЬ НЕ НУЖНО!

решение проблемы таким и остается:

1. дать больше места вашим блокам

2. можно уменьшить размер блоков

3. сделать блоки таблицей

4. сделать блоки через display:inline; и запретить перенос на новую строку

 

PS кста, отрицательная ширина не работает и я советовал сделать отрицательный отступ для выпадающих блоков

например для .right установить margin: 0px 0px 0px -80%;

Edited May 13, 2014 by Switch74