Раскрывающийся div?

185

Romaldo

1 августа 2016, 11:38

1451

Уважаемые коллеги.

Подскажите, как реализовать раскрывающийся по кнопке div?

Прямо как на play google

То есть, часть описания видна сразу, остальное по кнопке.

Очень желательно без JS.

Спасибо.

I2

38

indenger20

1 августа 2016, 11:52

#1

Вообще то гуглится это.

Например, "как открыть див по клику javascript "

и мне уж очень интересно, чем вам js не угодил?

если уж хотите без него, можете поизвращаться с радио кнопками :)

Качественная верстка PSD макетов (/ru/forum/974524)

Меню сайта,как лучше? [JQUERY&PHP] POST Запрос Исчезает счетчик liveinternet при

SO

83

SmilerOff

1 августа 2016, 11:53

#2

Я использовал это решение:

http://www.jqueryscript.net/demo/Lightweight-jQuery-Read-More-Link-Plugin-Readmore-js/

Конечно используется JS, Jquery и плагин к нему.

Но пользоваться очень просто.

I2

38

indenger20

1 августа 2016, 11:53

#3

Вообще то гуглится это.

Например, "как открыть див по клику javascript "

и мне уж очень интересно, чем вам js не угодил?

если уж хотите без него, можете поизвращаться с радио кнопками [emoji6]

Меню сайта,как лучше? [JQUERY&PHP] POST Запрос Исчезает счетчик liveinternet при

S3

367

Sly32

1 августа 2016, 12:16

#4

SmilerOff:
Я использовал это решение:

Ну ладно еще jquery для эффектов, Хотя в вашем примере их нет, но и еще плагин тащить... Зачем?

Вот мое решение такого вопроса. Предварительно должен быть jQuery подключен


<h3 class="car title button">Полное описание</h3>
         
    <div class="full-item">
       Здесь скрытое содержимое
    </div>
<script>
$(".car").click(function () {
    $(".full-item").fadeToggle("slow");
});
</script>

блоку full-item предварительно задать display:none. Можно еще менять надпись на кнопке Показать/скрыть. Это несложно.

2

Влияет ли css "display: Адаптивный логотип: 2 разных Мастера jQuery, нужна помощь

I2

38

indenger20

1 августа 2016, 12:22

#5

да тут проще, блоку фикс высоту, а по клику высоту в auto

185

Romaldo

1 августа 2016, 12:43

#6

Sly32:
Ну ладно еще jquery для эффектов, Хотя в вашем примере их нет, но и еще плагин тащить... Зачем?

Вот мое решение такого вопроса. Предварительно должен быть jQuery подключен


<h3 class="car title button">Полное описание</h3>

         

    <div class="full-item">

       Здесь скрытое содержимое

    </div>

<script>

$(".car").click(function () {

    $(".full-item").fadeToggle("slow");

});

</script>

блоку full-item предварительно задать display:none. Можно еще менять надпись на кнопке Показать/скрыть. Это несложно.

Нужно, без вставок всяких скрытых блоков и тд.

Человек будет просто вставлять голый текст.

Поэтому изначально задача была - не показывать скрытый текст - а расширять div по кнопке.

---------- Добавлено 01.08.2016 в 15:51 ----------

Спасибо всем за советы.

Нашел простой вариант:

<html>

  <head>    

  </head>



<body >

    <button type="button" onClick = "document.getElementById('chartdiv').style.height = 200px">Click Me!</button>

    <div id="chartdiv" style="width: 100%; height: 50px; background-color:#E8EDF2"></div>

</body>

</html>

Одна проблема с ним.

Как сделать, чтобы после клика сама кнопка исчезала?

Как создать спойлер "читать Wordpress - воруют трафик. Честное скрытие текста, можно

142

VHS

1 августа 2016, 12:58

#7

Если очень нравится это решение, то так ))))

<button type="button" onClick = "document.getElementById('chartdiv').style.height = '200px'; this.style.display = 'none'">Click Me!</button>
<div id="chartdiv" style="width: 100%; height: 50px; background-color:#E8EDF2"></div>

185

Romaldo

1 августа 2016, 13:30

#8

VHS:
Если очень нравится это решение, то так ))))

Ага, работает.

Спасибо!

Не то, чтобы очень нравится, но оно очень компактное.

R

74

rixter

1 августа 2016, 14:19

#9

http://jsfiddle.net/NRc3x/84/ на jquery

142

VHS

1 августа 2016, 14:26

#10

Просто грязный код получается, да и javascript используется...

Если не использовать JQuery, я бы подвесил все это через

document.addEventListener("DOMContentLoaded", myfunc);

Вышел новый Яндекс Браузер с YandexGPT и YandexART

Все что нужно знать о DDоS-атаках грамотному менеджеру