Собственный спойлер для сайта

[7Lexus]

Блин, всё равно не получается ((
Может ещё какой вариант есть?

[Admin]

Еще пару мелочей забыл упомянуть, а именно:
- при копировании у Вас почему-то вместо " стоит ";
- правильно подключать jQuery надо так: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>, а у Вас было <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

У меня в Опере и IE работает:

Код:

<STYLE type="text/css">
.box {
background:#fff;
margin-bottom:20px;
padding:0;
position: relative;
overflow: hidden;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-left: 3px solid #438fbf;
background: #f8f9f9;
}
.box_title{
font-weight:700;
color:#444;
background: #f8f9f9;
margin:0 -10px 1px -10px;
padding:4px;
padding-left: 15px;
padding-right: 45px;
-webkit-box-shadow:0 0 10px #DCDCDC inset;
-moz-box-shadow:0 0 10px #DCDCDC inset;
box-shadow:0 0 10px #DCDCDC inset;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
}

.block {
padding:0;
}

.block_text {
padding:6px;
}

.box div.hide {
display: block;
width: auto;
padding:1px;
line-height: 17px;
position: absolute;
right: 5px;
top: 4px;
cursor: pointer;
font-size: 10px;
text-transform: uppercase;
text-align: center;
border: solid 1px #aaa;
background: #f5f5f5;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-box-shadow:0 0 4px #DCDCDC inset;
-moz-box-shadow:0 0 4px #DCDCDC inset;
box-shadow:0 0 4px #DCDCDC inset;
}

.box div.hide:hover {
background: #fff;
}

.box div.hide span.h {display: block;}
.box div.hide span.s {display: none;}
.box div.show span.h {display: none;}
.box div.show span.s {display: block;}

.closed div.hide span.h {display: none;}
.closed div.hide span.s {display: block;}
.closed div.show span.h {display: block;}
.closed div.show span.s {display: none;}

</style>


<div class="container">
<div class="box closed">
<div class="box_title">Title (Название)<br>
</div>
<div class="hide"><span class="s">Показать</span>
<span class="h">Скрыть</span></div>
<div class="block" style="display: none;">
<div class="block_text">Ваш скрытый текст...<br>
</div></div></div></div>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

<script type="text/javascript">
$(".box .block").show();
$(".closed .block").hide();

$("div.hide").click(function(){
$(this).toggleClass("show").next().slideToggle("medium");
});
</script>

[7Lexus]

Настоящий мастер! Всё чётко! Спасибо большое!

[kinouser]

Здравствуйте, Admin, вопрос заключается в том, а можно ли сделать по примеру вашего спойлера скрипта, только что бы при нажатие на кнопку блок под спойлером выходил не вниз как обычно, а в бок, а именно влево. И если вас не затруднит, написать сие чудо скрипт. Спасибо.

[Admin]

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

[7Lexus]

Я снова к Вам, Генералиссимус.

Нашел вот такой спойлер и не могу нигде найти КАК в заголовке заменить слово "open" на слово, например, "Открыть"

Код:

<style>
body {
    background: #CCC;
}
.desc {
    background: #333;
    padding: 0 5px;
    border-radius: 0 0 5px 5px;
    margin-top: 22px;
}
.desc p {
    cursor: text;
    color: #FFF;
}
.close {    
    display: none;
    width: 100%;
    height: 22px;
    background: #FF6;
    border-radius: 5px 5px 0 0;
    text-indent: 10px;
    cursor: default;
    border-bottom: 1px dotted #000;
    position: absolute;
    top: 0px;
    left: 0;
}
.close:hover {  
    background: #f5ff27;
}
.open:before {
    content: 'open';
    border-bottom: 1px dotted #000;
    cursor: default;
    text-indent: 10px;
    border-radius: 5px 5px 0 0;
    width: 100%;
    height: 22px;
    background: #FF6;
    display: block;
    position: absolute;
    top: 0px;
    left: 0;
}
.open:hover:before {
    background: #f5ff27;
}
.open {
    margin: 5px 0 0 15px;
    height: 23px;  
    width: 240px;
    outline: none;
    float: left;
    position: relative;
    overflow: hidden;
    -webkit-transition: height 0.3s ease;
    -moz-transition: height 0.3s ease;
    -ms-transition: height 0.3s ease;
    -o-transition: height 0.3s ease;
    transition: height 0.3s ease;
}
.open:focus {
    height: 122px;
}
.open:focus .close {
    display: block;
}
.open:focus:before {
    display: none;
}

</style>
<div class="open" role="tab"tabindex="1">
    <div role="tabpanel" class="desc">
        <p>Нужно знать как и что делать, чтобы текст появился под спойлером, а в заголовке спойлера было "Открыть-Закрыть</p>
    </div>
    <span role="button" tabindex="0" class="close">Закрыть</span>
</div>

<div class="open" role="tab" tabindex="2">
    <div role="tabpanel" class="desc">
        <p>Нужно знать как и что делать, чтобы текст появился под спойлером, а в заголовке спойлера было "Открыть-Закрыть</p>
    </div>
    <span role="button" tabindex="0" class="close">Закрыть</span>
</div>

Визуальный пример здесь - admshel-forum.ucoz.ru/publ/menu/1-1-0-2

[Admin]

Просто измените в строчке:

Код:

content: 'open';

слово "open" на слово "Открыть".

Кстати, мне Ваш вариант спойлера на чистом CSS без использования JavaScript очень понравился. Думаю, Вы не будете против, если я его добавлю в скрипты на нашем сайте в виде отдельной темы.

[7Lexus]

Ох как я так прозевал-то )))))

Цитата:...не будете против...

никаких вопросов, конечно не против.
Очередной раз Вам спасибо!

P.S. А как сделать, чтобы спойлеры были не рядом, а друг под другом?

[Admin]

Т.к. Вы отредактировали сообщение, то я не заметил добавления вопроса, из-за того, что данная тема у меня была отмечена как прочитанная. Вот если бы добавили вопрос в виде отдельного сообщения, то я бы заметил новое сообщение и ответ пришел бы гораздо быстрее!

По теме.
Как самый простой вариант, добавьте между блоками <div> несколько тегов <br>:

Код:

<div class="open" tabindex="1">
     <div  class="desc">
         <p>Нужно знать как и что делать, чтобы текст появился под спойлером, а в заголовке спойлера было "Открыть-Закрыть</p>
     </div>
     <span role="button" tabindex="0" class="close">Закрыть</span>
</div>
<br><br><br><br>
<div class="open"  tabindex="2">
     <div  class="desc">
         <p>Нужно знать как и что делать, чтобы текст появился под спойлером, а в заголовке спойлера было "Открыть-Закрыть</p>
     </div>
     <span role="button" tabindex="0" class="close">Закрыть</span>
</div>

Над более изящным и правильным методом надо подумать. У меня всегда было плохо с блоками, у которых position: absolute;

Кстати, ссылка на тему - Спойлер для сайта на CSS

[7Lexus]

Хорошо, спасибо. Тоже тогда подумаю как сделать.
А... Тема получилась четкая!
-------------
P.S. А вот и решение проблемы )))) просто убираем float:left для .open