Javascript-форум - Toggle эффект блока с кнопкой "Читать дальше". С меня "+"

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Toggle эффект блока с кнопкой "Читать дальше". С меня "+" (https://javascript.ru/forum/misc/59027-toggle-ehffekt-bloka-s-knopkojj-chitat-dalshe-s-menya.html)

Toggle эффект блока с кнопкой "Читать дальше". С меня "+"

Добрый вечер. Помогите пожалуйста в таком деле.. есть много одинаковых блоков с разной высотой, нужно реализовать что-то вроде toggle-эффекта.

$(document).ready(function() {

  $('.toggle_block').css('height', '90px');
  $(".info_name").click(function(){
     $('.toggle_block').css('height', 'auto');

});
});

задал высоту этих самых блоков, при клике делаю автоматическую.. но, нужно чтобы менялась высота только того блока в котором была нажата кнопка "Читать дальше", а при втором нажатии блок обратно становился высотой 90px.
Было бы хорошо если бы и текст кнопки менялся, ну это не обязательно)

Мне кажется задача не сложная, но сам додуматься не могу))
P.S с меня "+" в карму))

subbziro,
открывашка 230 и ещё куча

Спасибо:dance: воспользовался поиском, сделал по вашему примеру из темы:

http://javascript.ru/forum/dom-windo...polnostyu.html

Сделал обработку нажатия на кнопки в других блоках(предыдущий сворачивается->новый блок открывается), но работает криво.. костыли не прокатили:)

К вашему решению можно прицепить изменения текста на кнопке "Читать подробнее" / "Скрыть"?

Цитата:

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

К вашему решению можно прицепить изменения текста на кнопке "Читать подробнее" / "Скрыть"?

да
http://javascript.ru/forum/dom-windo...tml#post318670 или
http://javascript.ru/forum/dom-windo...tml#post379073

Цитата:

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

Сделал обработку нажатия на кнопки в других блоках(предыдущий сворачивается->новый блок открывается), но работает криво.. костыли не прокатили

открывашка есть все варианты врятли вы придумаите то чего нет ещё.

не получается прицепить сюда код с примеров, не работает, кнопка сделана тегом <a></a> и классом .info_name. да я и не знаю как ее в код правильнее поставить

$('.toggle_block').css('height', '90px');
            var txt = document.querySelectorAll('.toggle_block'), min = 90;
            [].forEach.call(document.querySelectorAll('.info_name'), function(item,i) {
            var elem = txt[i];
            item.addEventListener('click', function() {
                    var h = elem.clientHeight < elem.scrollHeight  ? elem.scrollHeight : min
                    elem.style.height = h + 'px';

                   // elem.classList.toggle('open')
                });
            });

subbziro,
сделайте минимальный html + css и описание

HTML

<div class="question-cont">
      <div class="toggle_block">
            <p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст   
             </p>
        </div>
        <div class="question_info">
               <a class="info_name">читать подробнее</a> </div>
          </div>
</div>

CSS

.toggle_block{
  float: left;
  overflow: hidden;
}
.question-cont{
  float: left;
  margin: 50px;
}

высота блока регулируется через js, это основные стили

открывашка 231 со сменой текста на кнопке

subbziro,
медитируйте и давайте переменным разумные имена, а не так как в коде ниже.

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .toggle_block{
  float: left;
  overflow: hidden;
}
.question-cont{
  float: left;
  margin: 50px;
  width: 300px;
}

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
    var a = $(".question-cont"),
        e = $(".toggle_block"),
        h = $(".info_name"),
        f = ["читать подробнее", "скрыть"];
    e.css("height", "90px");
    a.each(function(a, g) {
        var c = $(".info_name", g);
        c.click(function(b) {
            b.preventDefault();
            b = $(".toggle_block", g);
            e.not(b).animate({
                height: "90px"
            }, 800, function() {
                h.not(c).text(f[0])
            });
            var d = b[0],
                a = d.clientHeight < d.scrollHeight ? d.scrollHeight + "px" : "90px";
            b.animate({
                    height: a
                },
                1000,
                function() {
                    c.text(f[+("90px" != a)])
                })
        })
    })
});
  </script>
</head>

<body>
<div class="question-cont">
      <div class="toggle_block">
            <p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
             </p>
        </div>
        <div class="question_info">
               <a class="info_name">читать подробнее</a> </div>
          </div>

<div class="question-cont">
      <div class="toggle_block">
            <p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
             </p>
        </div>
        <div class="question_info">
               <a class="info_name">читать подробнее</a> </div>
          </div>


</body>

</html>

Огромное спасибо, то что нужно!:yes:

Подскажите как в этом коде вместо переменной f = ["читать подробнее", "скрыть"]; прописать чтобы картинка менялась типа этого:
imgElem.src = "/new/images/min.png"; или что то другое