Нужно показать/скрыть текст

@bizzibumman · Регистрация: 22.10.2013

Студворк — интернет-сервис помощи студентам

Здравствуйте.
Возникла такая проблема: на страничке необходимо разместить элемент - заголовок с выпадающим, при нажатии на него, текстом.
Подскажите, пожалуйста, как это правильно прописать?

@sharpay · 23.06.2015, 00:47

может, просто так ?

HTML5
1
2
3
4
5
6
7
<select name="select2">
<option selected="selected">Выберите героя</option>
<option>Чебуpaшкa</option>
<option>Крокодил Гена</option>
<option>Шапокляк</option>
<option>Крыса Лариса</option>
</select>

@Lazy_Den · 23.06.2015, 01:01

Сообщение от bizzibumman

как это правильно прописать?

Скудноватое описание. Можно так сделать:

HTML5
1
2
3
4
<div class="box">
    <h3 class="title">Заголовок</h3>
    <div class="dropdown">Текст в раскрывающемся блоке.</div>
</div>

JavaScript
1
2
3
$('.title').on('click', function(){
    $(this).siblings('.dropdown').slideToggle();
});

@alsnake · 03.07.2015, 08:30

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div>
    <div class="hh">Список №1+</div>
        <div class="box">
            <p>Пункт №1</p>
            <p>Пункт №2</p>
        </div>
    <a href="#" class="btn" ><b>Раскрыть</b></a>
 
    <div class="hh">Список №2+</div>
        <div class="box">
            <p>Пункт №3</p>
            <p>Пункт №4</p>
        </div>
<a href="#" class="btn" onclick="this"><b>Раскрыть</b></a>
  
</div>

JavaScript
1
2
3
4
5
6
7
8
9
$(document).ready(function(){
$(".box").hide();
$(".hh").click(function(){
  $(this).next().slideToggle().document.getElementByClassName(".btn").innerHTML="Скрыть";
});
$(".btn").click(function () {
  $(this).prev().slideToggle().innerHTML="Скрыть" 
   });
});

@Lazy_Den · 03.07.2015, 10:50

alsnake, для такой простейшей задачи, у вас не продуманная разметка. Обернув каждую группу одним родительским элементом, вы бы уже упростили задачу (пример).

JavaScript
1
2
3
4
5
6
7
8
$(document).ready(function () {
    $(".box").hide();
    $(".hh, .btn").click(function () {
        var $parent = $(this).parent();
        $('.box',$parent).slideToggle();
        $('.btn',$parent).text($('.btn',$parent).text() == 'Раскрыть' ? 'Скрыть' : 'Раскрыть');
    });
});

Ну, а для вашей разметки, можно сделать так:

JavaScript
1
2
3
4
5
6
7
8
9
10
$(document).ready(function () {
    $(".box").hide();
    $(".hh, .btn").click(function () {
        var $that = $(this),
            isBtn = $that.hasClass('btn');
        var box = $that[isBtn ? 'prev' : 'next']().slideToggle(),
            btn = isBtn ? $that : box.next();
        btn.text(btn.text() == 'Раскрыть' ? 'Скрыть' : 'Раскрыть');
    });
});

@alsnake · 03.07.2015, 11:00

Благодарю! Лишний div не проблема. Просто JS плохо знаю. Учиться.....

@Lazy_Den · 03.07.2015, 11:26

alsnake, кстати, можно еще чуть упростить код за счет css:

CSS
1
2
3
4
5
6
.btn.close b:before {
    content: 'Скрыть';
}
.btn.open b:before {
    content: 'Раскрыть';
}

JavaScript
1
2
3
4
5
6
7
8
$(document).ready(function () {
    $(".box").hide();
    $(".hh, .btn").click(function () {
        var $parent = $(this).parent();
        $('.box',$parent).slideToggle();
        $('.btn',$parent).toggleClass('open close');
    });
});

Ссылки изначально имеют второй класс "open"

HTML5
1
<a href="#" class="btn open"><b></b></a>

@alsnake · 03.07.2015, 15:37

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

Добавлено через 1 час 22 минуты
А подскажите еще. Как-то можно реализовать скриптом, чтоб при нажатии кнопки "скрыть" страница возвращалась на заголовок пункта?

Добавлено через 2 часа 7 минут
Интересно.
Пытаюсь сделать чтобы при нажатии кнопки "скрыть" блок закрывался в позицию заголовка вверх страницы с отступом 70px (для меню).

Подключил jquery.scrollTo.min.js
Добавил в код

JavaScript
1
.scrollTop({top:'70px'})

Но что-то не работает. Я так понимаю надо как-то цель указать правильно. Как?

JavaScript
1
2
3
4
5
6
7
8
$(document).ready(function () {
    $(".box").hide();
    $(".hh, .btn").click(function () {
        var $parent = $(this).parent();
        $('.box',$parent).slideToggle();
        $('.btn',$parent).text($('.btn',$parent).text() == 'Раскрыть' ? 'Скрыть' : 'Раскрыть').scrollTop({top:'70px'});
    });
});

Новые блоги и статьи Все статьи Все блоги /
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .

@bizzibumman 0 / 0 / 0 Регистрация: 22.10.2013 Сообщений: 10

	Нужно показать/скрыть текст 22.06.2015, 16:44. Показов 3861. Ответов 7 Метки нет (Все метки) Здравствуйте. Возникла такая проблема: на страничке необходимо разместить элемент - заголовок с выпадающим, при нажатии на него, текстом. Подскажите, пожалуйста, как это правильно прописать? 0

@alsnake 0 / 0 / 0 Регистрация: 03.07.2015 Сообщений: 4
	03.07.2015, 11:00
	Благодарю! Лишний div не проблема. Просто JS плохо знаю. Учиться..... 0