Скрытие и разворот текста

@Serezha · Регистрация: 29.11.2012

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

Всем привет. Столкнулся с такой проблемой не могу найти решение. Осуществляется вывод статей

PHP
1
2
3
4
5
6
7
8
9
<?php
    $articles = getAllcod_error();   //подключение функции
    for ($i = 0; $i < count($articles); $i++) {
        $id = $articles[$i]["id"];   //поле с id из базы
        $title = $articles[$i]["name"];//аналог
        $text = $articles[$i]["text"];//аналог
        include "intro_article.php"; //подключение к нужному файлу
    }
?>

PHP
1
2
3
4
5
6
7
<div class="article">
    <h2><?php echo $title;?></h2> <!-- ВЫВОД В БРАУЗЕР ИМЯ СТАТЬИ-->
    <p class="article_img">
        <img src="images/article_<?php echo $id;?>.png" alt="<?php echo $title;?>" /> <!-- ВЫВОД СТАТЬИ В ЗАВИСИМОСТИ ОТ ID-->
    </p>
    <?php echo $text;?>
</div>

хочу сделать чтоб текст автоматически сворачивался а при нажатии на title отображался с лева. Кто знает как это можно сделать?

@Ademar · 28.12.2018, 16:37

Объясни подробнее, что хочешь сделать.

1. Страница загрузилась. Текст должен быть скрыт или виден?
2. Хочешь чтобы текст автоматически сворачивался. При каком событии? При наведении на него? Или он изначально свёрнут, а при наведении на title разворачивается?
3. При нажатии на title отображался слева. Вот здесь тоже поясни. Сначала текст под картинкой, а затем при нажатии на title уже слева от картинки?

В общем для получения полноценного и правильного ответа распиши более детально. Что до события и что после события пользователь должен видеть. Лучше нарисуй схематически цветными прямоугольниками.

@andyyy · 28.12.2018, 17:34

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

Страница загрузилась. Текст должен быть скрыт или виден?

хочу сделать чтоб текст автоматически сворачивался

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

При каком событии? При наведении на него? Или он изначально свёрнут, а при наведении на title разворачивается?

а при нажатии на title отображался с лева.

Добавлено через 10 минут
вот на jq

HTML5
1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--Подключаем библиотеку-->
    <script src="js/jquery-1.3.2.min.js"></script>
</head>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
    
    $( document ).ready(function() {
   
  $('.article').toggle();
 
$(".push").click(function() {
  $('.article').toggle();
});
   
   
   
   
   
   
});
</script>

PHP
1
<?PHP $title = 'Как избавится от ... за 3 дня'; $id = 1;  $text = "Всем привет! Сегодня избавляемся от .... за три дня!"; ?>

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
    
    
 
    <h2  class='push'><?php echo $title;?></h2> <!-- ВЫВОД В БРАУЗЕР ИМЯ СТАТЬИ-->
    <p class="article_img">
        <img src="images/article_<?php echo $id;?>.png" alt="<?php echo $title;?>" /> <!-- ВЫВОД СТАТЬИ В ЗАВИСИМОСТИ ОТ ID-->
    </p>
        <div class="article"> <?php echo $text;?></div>
 
    
    
</body>
</html>

@Serezha · 28.12.2018, 17:46 **[ТС]**

изначально текст скрыт видны только title.

@Serezha · 28.12.2018, 17:55 **[ТС]**

вот так как то.

@andyyy · 28.12.2018, 17:57

я вам сделал. макет сами уже сделайте через <table>

@Serezha · 28.12.2018, 18:08 **[ТС]**

andyyy, Тут какая вещь в данном коде сворачиваются все статьи которые есть я такой вариант тоже находил.
А нужно чтоб у каждого title все работало отдельно.

@andyyy · 28.12.2018, 20:16

ну сразу бы написали

HTML5
1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--Подключаем библиотеку-->
    <script src="js/jquery-1.3.2.min.js"></script>
</head>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
    
    $( document ).ready(function() {
   
  $('div').toggle();
 
$("h2").click(function() {
 $(this).next().toggle();
});
   
   
   
   
   
   
});
</script>

HTML5
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
<body>
 
    
    
 
    <h2  >1</h2> 
  
        <div > Текст к 1</div>
 
    
    
        <h2 >2</h2> <!-- ВЫВОД В БРАУЗЕР ИМЯ СТАТЬИ-->
    
        <div > Текст к 2</div>
 
 <h2 >3</h2> 
  
        <div > Текст к 3</div>
 
    
    
        <h2 >4</h2> <!-- ВЫВОД В БРАУЗЕР ИМЯ СТАТЬИ-->
    
        <div> Текст к 4</div>
    
    
</body>
</html>

@Serezha · 29.12.2018, 10:56 **[ТС]**

andyyy, Спасибо большое, я в js вообще не селен, не могли бы подсказать, а вместе $('div').toggle(); я могу определенный идентификатор задать ? к примеру у меня в верстке <div id="cod_error"> а где $title <h2 id="cod_error_title">
чтоб обработка происходила только с этими элементами.

@andyyy · 29.12.2018, 12:59

Когда указываем div, js берет все div
Определенный индификатор, если нужен через id то $('#cod_error')
Через класс - $('.название класса')

@Serezha · 29.12.2018, 13:00 **[ТС]**

Даже вернее так вопрос: Я подставил классы

JavaScript
1
2
3
4
5
6
7
8
9
10
11
<script>
 
    $( document ).ready(function() {
 
  $('div.web').toggle();
 
$("h2.text").click(function() {
 $(this).next().toggle();
});
});
</script>

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<body>
    <h2 class="text">1</h2>
 
        <div clas="web" > Текст к 1</div>
 
 
 
        <h2 class="text" >2</h2> <!-- ВЫВОД В БРАУЗЕР ИМЯ СТАТЬИ-->
 
        <div clas="web"> Текст к 2</div>
 
 <h2 class="text">3</h2>
 
        <div clas="web" > Текст к 3</div>
 
 
 
        <h2 class="text" >4</h2> <!-- ВЫВОД В БРАУЗЕР ИМЯ СТАТЬИ-->
 
        <div clas="web"> Текст к 4</div>
 
 
</body>

но они при загрузке сразу открыты. как это можно изменить

@andyyy · 29.12.2018, 13:22

Не div. Web а просто .web
С . text также

@Serezha · 29.12.2018, 13:25 **[ТС]**

Так вроде разобрался, спасибо за помощь. Может еще кому то понадобится вот весь код:

HTML5
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--Подключаем библиотеку-->
    <script src="jquery-1.3.2.min.js"></script>
</head>
<script>
 
    $( document ).ready(function() {
 
  $('div#text').toggle();
 
$("h2#title").click(function() {
 $(this).next().toggle();
});
});
</script>
<body>
    <h2 id="title">1</h2>
 
        <div id="text"> Текст к 1</div>
 
 
 
        <h2 id="title">2</h2> <!-- ВЫВОД В БРАУЗЕР ИМЯ СТАТЬИ-->
 
        <div id="text"> Текст к 2</div>
 
 <h2 id="title">3</h2>
 
        <div id="text"> Текст к 3</div>
 
 
 
        <h2 id="title">4</h2> <!-- ВЫВОД В БРАУЗЕР ИМЯ СТАТЬИ-->
 
        <div id="text"> Текст к 4</div>
 
 
</body>
</html>

@Serezha · 29.12.2018, 19:42 **[ТС]**

andyyy, Подскажите пожалуйста по результату у меня получилось так: фото прикладываю Как можно сделать чтоб div на div не ложился чтоб оно или автоматически скрывалось или чтоб ниже уходило.

@Serezha · 29.12.2018, 19:43 **[ТС]**

PHP
1
2
3
4
5
6
 <div class="buttona">
    <div class="headline"><?php echo $title;?></div>
    <img class="set" src="images/settings.png" alt="st">
    <div class="disc">Cмотрите</div>
</div>
 <div class="tex"><?php echo $text;?> </div>

JavaScript
1
2
3
4
5
6
7
8
<script>
    $( document ).ready(function() {
  $('.tex').toggle();
$(".buttona").click(function() {
 $(this).next().toggle();
});
});
</script>

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Ademar 26 / 18 / 10 Регистрация: 26.11.2012 Сообщений: 183
	28.12.2018, 16:37
	Объясни подробнее, что хочешь сделать. 1. Страница загрузилась. Текст должен быть скрыт или виден? 2. Хочешь чтобы текст автоматически сворачивался. При каком событии? При наведении на него? Или он изначально свёрнут, а при наведении на title разворачивается? 3. При нажатии на title отображался слева. Вот здесь тоже поясни. Сначала текст под картинкой, а затем при нажатии на title уже слева от картинки? В общем для получения полноценного и правильного ответа распиши более детально. Что до события и что после события пользователь должен видеть. Лучше нарисуй схематически цветными прямоугольниками. 0

@Serezha 24 / 20 / 3 Регистрация: 29.11.2012 Сообщений: 454 Записей в блоге: 1
	28.12.2018, 17:46 [ТС]
	изначально текст скрыт видны только title. 0

@Serezha 24 / 20 / 3 Регистрация: 29.11.2012 Сообщений: 454 Записей в блоге: 1
	28.12.2018, 17:55 [ТС]
	вот так как то. Миниатюры 0

@andyyy 767 / 323 / 157 Регистрация: 26.05.2016 Сообщений: 2,127
	28.12.2018, 17:57
	я вам сделал. макет сами уже сделайте через <table> 0

@Serezha 24 / 20 / 3 Регистрация: 29.11.2012 Сообщений: 454 Записей в блоге: 1
	28.12.2018, 18:08 [ТС]
	andyyy, Тут какая вещь в данном коде сворачиваются все статьи которые есть я такой вариант тоже находил. А нужно чтоб у каждого title все работало отдельно. 0

@Serezha 24 / 20 / 3 Регистрация: 29.11.2012 Сообщений: 454 Записей в блоге: 1
	29.12.2018, 10:56 [ТС]
	andyyy, Спасибо большое, я в js вообще не селен, не могли бы подсказать, а вместе $('div').toggle(); я могу определенный идентификатор задать ? к примеру у меня в верстке <div id="cod_error"> а где $title <h2 id="cod_error_title"> чтоб обработка происходила только с этими элементами. 0

@andyyy 767 / 323 / 157 Регистрация: 26.05.2016 Сообщений: 2,127
	29.12.2018, 12:59
	Когда указываем div, js берет все div Определенный индификатор, если нужен через id то $('#cod_error') Через класс - $('.название класса') 0

@andyyy 767 / 323 / 157 Регистрация: 26.05.2016 Сообщений: 2,127
	29.12.2018, 13:22
	Не div. Web а просто .web С . text также 1

@Serezha 24 / 20 / 3 Регистрация: 29.11.2012 Сообщений: 454 Записей в блоге: 1
	29.12.2018, 19:42 [ТС]
	andyyy, Подскажите пожалуйста по результату у меня получилось так: фото прикладываю Как можно сделать чтоб div на div не ложился чтоб оно или автоматически скрывалось или чтоб ниже уходило. Миниатюры 0