Как сделать спойлер в каталоге "Онлайн игры" - Форум
Страница 1 из 11
Форум » Форум веб мастеров » uCoz » Как сделать спойлер в каталоге "Онлайн игры"
Как сделать спойлер в каталоге "Онлайн игры"

Handyman
VIP
Сообщений 270
+
+2162
-
Ваши награды 2
Handyman написал: отредактировал: Handyman - Среда, 09.12.2015, 18:30 В ответ пользователя Handyman Написано 08 Декабря 2015 в 13:54
Сообщение № 1
Здравствуйте, я тут посидел, подумал, раз форма uCoz не особо "приятная", то я решил реализовать форму так, выбрал "Тип формы по умолчанию для редактирования материалов: Чистый HTML", и нашел в интернете такой код:
и тут сразу 3 вопроса:
1) Я не особо, а точнее совсем не соображаю в JS, но на взгляд, криворукий код (ИМХО). Сам вопрос. Как его изменить, или сделать новый, чтобы при открытии, появлялась надпись "закрыть"?
2) Как добавить кнопку вот сюда
, чтобы получилось типа вот так:
чтобы при нажатии на SPOILER вставлялся JS код, который выше?
3) И если немного сложнее, можно как-то вставлять стандартный код
Код
[spoiler=TITLE]содержимое[/spoiler]
и чтобы он преобразовывался в спойлер? (это не столь важно, просто спросил, для удобства)
«Пред. тема След. тема»

Вовчик
Администратор
Сообщений 8682
+
+2355
-
Ваши награды 314
Вовчик написал: В ответ пользователя Вовчик Написано 25 Декабря 2015 в 20:05
Сообщение № 2
1) вот клевый спойлер, и там уже все есть, ничего делать не надо...

html
Код
  <div class="container">
        
            <div class="box">
                <h2>
                    Toggle (переключатель)
                    <span class="l"></span><span class="r"></span>
                </h2>
                <div class="hide"><span class="s">Show</span><span class="h">Hide</span></div>
                <div class="block">
                    <div class="block_in">
                             Контент 1
                    </div>
                </div>
            </div>
            
            <div class="box closed">
                <h2>
                    Toggle (переключатель)
                    <span class="l"></span><span class="r"></span>
                </h2>
                <div class="hide"><span class="s">Show</span><span class="h">Hide</span></div>
                <div class="block">
                    <div class="block_in">
                           Контент 2
                    </div>
                </div>
            </div>


css

Код
.box {
    background:#fff;
    margin-bottom:20px;
    padding:0;
    position: relative;
    overflow: hidden;
    border: 1px solid #ccc;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -webkit-box-shadow:0 0 10px #DCDCDC inset;
    -moz-box-shadow:0 0 10px #DCDCDC inset;
    box-shadow:0 0 10px #DCDCDC inset;
}
.box h2 {
    font-size:1em;
    font-weight:700;
    text-transform:uppercase;
    color:#444;
    background: #ddd;
    margin:0 -10px -1px -10px;
    padding:12px;
    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_in {
    padding:12px;
}

.box div.hide {
display: block;
width: 40px;
line-height: 24px;
position: absolute;
right: 5px;
top: 8px;
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;}


js

Код
    $(".box .block").show();
            $(".closed .block").hide();

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


Cтрочка $(".box .block").show(); - первый блок показывается по умолчанию, то есть развернут;

строчка $(".closed .block").hide(); - второй блок по умолчанию свернут, скрыт.

2) используй данный способ
$("тут нужный айди или класс").after("тут кнопка");

3) можно, смотри у меня в чате так...
подпись: Если я помог тебе, помоги и ты мне Мой WMR --> R250600748056
p.s. это лучшее выражение благодарности))
Вовчик
Форум » Форум веб мастеров » uCoz » Как сделать спойлер в каталоге "Онлайн игры"
Страница 1 из 11
Поиск:
Топ пользователей: