Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: спойлер, как сделать кнопку "скрыть"?

есть код для спойлера, на сайте все нормально полностью функционирует, интересует как сделать кнопку которая бы закрывала скрытый текст ее нажатием где нибудь в конце статьи.

пример:

Заголовок

Здесь скрытый текст

тут конец статьи, и кнопка "скрыть"(чтобы не обязательно ползти опять наверх и скрывать только через заголовок)



Вот собственно код спойлера

<a href="javascript:sh()">Заголовок</a>
<div id="blabla" style="display:none">
Здесь скрытый текст
</div>

<script type="text/javascript">
function sh() {
obj = document.getElementById("blabla");
if( obj.style.display == "none" ) { obj.style.display = "block"; } else { obj.style.display = "none"; }
}
</script>
Ответ:
<a href="javascript:sh('blabla1')">Заголовок</a>
<div id="blabla1" style="display:none">Здесь скрытый текст 1</div>

<a href="javascript:sh('blabla2')">Заголовок</a>
<div id="blabla2" style="display:none">Здесь скрытый текст 2</div>

<script type="text/javascript">
function sh(id) {
obj = document.getElementById(id);
if( obj.style.display == "none" ) {
obj.style.display = "block";
} else {
obj.style.display = "none";
}
}
</script>
Вопрос: При нажатии на кнопку класс убирается

Подскажите, пожалуйста, что я делаю не так, и как правильно, что бы все работало?

Нужно, чтобы при нажатии на кнопку "скрыть" скрывался div
Ответ: Gelloiss,
лучше не писать javascript в атрибуты

<input value="Скрыть" class="button" type="button">
<div id="scrit">много разного кода и текста</div>

<script>

var $ = document.querySelector.bind(document);
$('.button').addEventListener('click', function () {
  $('#scrit').style.display = 'none';
}, false);

</script>
Вопрос: Раскрыть текст по кнопке подробнее

Перерыл форум, но так и не нашел того что нужно мне, а именно:

Есть много текста, нужно часть его скрыть, так чтобы он заканчивался в определенном месте и под ним была кнопка "подробнее", при клике на нее текст разворачивается полностью.
Все это делается плавно.
Ответ: The_Host, я не знаю что Вы делаете, поэтому точно сказать не могу.
Возможно, Вам стоит дать такой пример:
Javascript
1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function() {
    $('.show_text').on('click',function() {
        if($(this).prev().is(':visible')) {
                $(this).text('Показать скрытое');
            $(this).prev().hide('slow');
        } else {
                $(this).text('Скрыть показанное');
            $(this).prev().show('slow');
        }
    });
});
Ну и как я уже говорил:
Текст, который должен быть спрятан, суете в какой нибудь <div></div> с атрибутом hidden.
После этого div'a добавляете кнопку
HTML5
1
2
<div hidden>скрытый текст</div>
<button>кнопка</button>
Кнопка сразу после div'a, который прячет текст.
Вопрос: Как скрыть "Контакт"?

Здравствуйте. Использую joomla 2.5. Не удается скрыть контакт. Пробовал в настройках компонента - не получается. Может кто-нибудь знает, где в коде нужно удалить?
Ответ: Нашел. components\com_contact\views\contact\tmpl\default.php. Но все равно не получилось как хотелось. Контакт остался, а форма обратной связи исчезло. Хотел эту гармошку убрать. Не нашел где. Вместо контакта в языках прописал "свяжитесь с нами".
Вопрос: Убрать "ошибку" с инпута, при вводе сообщения

У меня есть инпуты
Javascript
1
2
3
4
$(document).ready(function() {
    $('.form-name').focusout(function() {
    $(".form-name").addClass( "error" );
    $("#tooltip-form-name").show("slow");
На которые если их не заполнить, при .focusout - навешиваются класс "error" и тултип - #tooltip-form-name"..
Теперь мне надо скрыть тултип, и удалить класс "error" как только пользователь начинает заполнять поле.
Как мне это сделать? Каким образом отследить что юзер начал заполнять поле??

П.с. Впервые работаю с js/jqery, только учусь, спросил бы у гугла но даже не могу сформулировать запрос)) Спасибо за ответ!
Ответ: Например, так

HTML5
1
<input type="text" id="my-input" class="error">
Javascript
1
2
3
4
$("#my-input").keyup(function(){
    $(this).removeClass("error");
    $("#tooltip-form-name").hide("fast");
});
Вопрос: Toggle и изменение текста кнопки при клике на нее

По нажатию на кнопку "Подробнее" срабатывает toggle и раскрывается div. Как только я нажал на кнопку она должна сменить надпись на "Скрыть", и наоборот. как это сделать?
Пока получается сменить на "Скрыть", а обратно на "Подробнее" не меняется. И смена на "Скрыть" происходит только после срабатывания toggle, а не сразу по нажатию на кнопку.
Javascript
1
2
3
4
5
6
7
8
9
var ind = 1;
        $('#open' + ind).click(function(){
 
            $('#hidd' + ind).toggle('slow', function(){
                var oc= $('#hidd' + ind).attr('display') == 'none' ? 'Подробнее' : 'Скрыть';
                $('#open' + ind).html(oc);
            });
 
        });
Ответ:
Сообщение от D1mka21
при повторном клике div закрывался обратно
Javascript
1
2
3
4
//Вместо 
blocks.eq(indx).slideDown();
//Пишем
blocks.eq(indx).slideToggle();
Вопрос: Нужна кнопка рядом с фото на fancyBox.

Имеем фотогалерею с просмотром на fancyBox.
Нужно как-то добавить кнопку "ЗАКАЗАТЬ" рядом с фото в окне fancyBox, при нажатии на которую открывалась бы другое всплывающее окно с формой заказа.
Окно fancyBox желательно на это время скрыть, а после отправки заказа, опять включить.

Это как-то сделать можно?
Ответ: kuzyaka, да вроде как оно free и commercial так и , только обновили CC BY-NC 3.0 на GNU GPLv3.
Вопрос: Скрытие контента и кнопка "показать полностью" как в ВКонтакте

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

Кому не сложно, помогите.
Пример как на сайте вк.
Ответ: Адам,
Вопрос: Скрыть div после нажатия на него

Здравствуйте. Есть блок текста с "Читать далее". После нажатие на читать далее все как обычно, блок раскрылся - внизу "Скрыть". Нужно при нажатии на div давать ему display:none
Подскажите как быть?
Код html:
<div class="more-btn">Читать далее...</div>
<div class="more">
Привет
<div class="hide-content">Скрыть</div>
</div>

CSS:
.more {
display: none;
}

JS:
<script type="text/javascript">
$('.more-btn').click(function(){
if($(this).hasClass('active')){
$('.more').slideUp();
$(this).removeClass('active');
} else {
$('.more').slideDown();
}
});
</script>
Ответ:
Сообщение от selv
Решил задачу, благодаря kalabuni
не за что
обращайтесь, ежели что
Вопрос: Скрывает блоке если есть определенный текст Например "Дата:"

Можно сделать что бы если в .miniblock находило слово например: "Дата:", то блок .miniblock, скрывался?
Код CSS
1
2
3
.profile_info .miniblock если есть "Дата:" то скрывало блок .miniblock {
    display: none !important;
}
Код CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* йцукенгшщзхъфывапролджэячсмитьбю */
<div class="profile_info">
    <div class="clear_fix miniblock">
        <div class="label">
            Год:
        </div>
        <div class="label">
            <a href="/">МСК</a>
        </div>
    </div>
    <div class="clear_fix miniblock">
        <div class="label">
            Дата:
        </div>
        <div class="label">
            <a href="/">МСК</a>
        </div>
    </div>
    <div class="clear_fix miniblock">
        <div class="label">
            Время:
        </div>
        <div class="label">
            <a href="/">МСК</a>
        </div>
    </div>
</div>
/* ------------------------------------------------------ */
Код CSS
1
2
3
4
5
/* скрывает второй блок "miniblock" */
.profile_info .miniblock:nth-child(2) {
    display: none !important;
}
/* ------------------------------------------------- */
Ответ:
Сообщение от remusmax
а если например у меня 2 и более слов скрыть надо, что для этого надо сделать?
Вместо переменной создать массив, а проверку условия поместить в цикл.