Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.10.2015, 19:45
Интересующийся
Отправить личное сообщение для subbziro Посмотреть профиль Найти все сообщения от subbziro
 
Регистрация: 02.08.2015
Сообщений: 10

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

$(document).ready(function() {

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

});
});


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

Мне кажется задача не сложная, но сам додуматься не могу))
P.S с меня "+" в карму))
Ответить с цитированием
  #2 (permalink)  
Старый 22.10.2015, 20:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

subbziro,
открывашка 230 и ещё куча
Ответить с цитированием
  #3 (permalink)  
Старый 23.10.2015, 14:12
Интересующийся
Отправить личное сообщение для subbziro Посмотреть профиль Найти все сообщения от subbziro
 
Регистрация: 02.08.2015
Сообщений: 10

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

2 блока "отрыть полностью"

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

К вашему решению можно прицепить изменения текста на кнопке "Читать подробнее" / "Скрыть"?
Ответить с цитированием
  #4 (permalink)  
Старый 23.10.2015, 14:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от subbziro
К вашему решению можно прицепить изменения текста на кнопке "Читать подробнее" / "Скрыть"?
да
Вывод информации при нажатии кнопки читать далее или
Вывод информации при нажатии кнопки читать далее
Сообщение от subbziro
Сделал обработку нажатия на кнопки в других блоках(предыдущий сворачивается->новый блок открывается), но работает криво.. костыли не прокатили
открывашка есть все варианты врятли вы придумаите то чего нет ещё.
Ответить с цитированием
  #5 (permalink)  
Старый 23.10.2015, 14:47
Интересующийся
Отправить личное сообщение для subbziro Посмотреть профиль Найти все сообщения от subbziro
 
Регистрация: 02.08.2015
Сообщений: 10

не получается прицепить сюда код с примеров, не работает, кнопка сделана тегом <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')
                });
            });
Ответить с цитированием
  #6 (permalink)  
Старый 23.10.2015, 15:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

subbziro,
сделайте минимальный html + css и описание
Ответить с цитированием
  #7 (permalink)  
Старый 23.10.2015, 15:16
Интересующийся
Отправить личное сообщение для subbziro Посмотреть профиль Найти все сообщения от subbziro
 
Регистрация: 02.08.2015
Сообщений: 10

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, это основные стили

Последний раз редактировалось subbziro, 23.10.2015 в 15:19.
Ответить с цитированием
  #8 (permalink)  
Старый 23.10.2015, 16:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

открывашка 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>

Последний раз редактировалось рони, 12.09.2017 в 22:36.
Ответить с цитированием
  #9 (permalink)  
Старый 24.10.2015, 11:07
Интересующийся
Отправить личное сообщение для subbziro Посмотреть профиль Найти все сообщения от subbziro
 
Регистрация: 02.08.2015
Сообщений: 10

Огромное спасибо, то что нужно!
Ответить с цитированием
  #10 (permalink)  
Старый 28.12.2016, 01:09
Новичок на форуме
Отправить личное сообщение для vasya62 Посмотреть профиль Найти все сообщения от vasya62
 
Регистрация: 28.12.2016
Сообщений: 1

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск