Как мы можем отображать скрытый абзац при нажатии кнопки?

<div class="inf-frame-text">
<h4> Learning Plus </h4>
<p> For our clients, the future is a continuum. It’s not about the next big thing, it's simply everything that's next. The next experience. The next innovation. For our clients, the future is a continuum. It’s not about the next big thing, it's simply everything that's next. The next experience. The next innovation. For our clients, the future is a continuum. It’s not about the next big thing, it's simply everything that's next. The next experience. The next innovation.  </p>
<a class="inf-read-btn"> Read More + </a>
</div>

        .inf-frame-text {
            margin-top: 120px;
            &:first-child {
                margin-top: 0;
            }
            p {
                height: 62px;
                overflow: hidden;
                transition:height 0.3s ease-out;
            }
            p.is-active {
                height: 100%;
                overflow: visible;
                transition:height 0.3s ease-out;
            }
        .inf-read-btn {
            display: block;
            color:#00ffbf !important; 
            cursor: pointer;
        }

      $('.inf-read-btn').on('click', function() {
        $('.inf-frame-text p').toggleClass('is-active');
      });

Привет, ребята, мне нужно создать несколько сеток с содержимым. Но некоторые части содержимого должны быть скрыты, и когда я нажимаю кнопку «Читать дальше», все содержимое должно отображаться с анимацией переключения. Здесь я просто попробовал код java-скрипта для этого, но не сработал. Еще одна вещь: при нажатии на эту кнопку все остальное содержимое должно быть скрыто, кроме содержимого, связанного с этой кнопкой, которую мы собираемся щелкнуть.

0
0
58
1

Ответы 1

Возможно, вы неправильно закрыли стиль .inf-frame-text. Отсутствует закрывающая скобка.

.inf-frame-text {
   margin-top: 120px;

   &:first-child {
      margin-top: 0;
   }

$('.inf-read-btn').on('click', function() {
  // Find the container whose button was clicked
  var $container = $(this).closest('.inf-frame-text');
  // find the p inside it
  var $elem = $container.find('p');
  
  // toggle the p element for that container
  $elem.toggleClass('is-active');
  
  $('.inf-frame-text p').not($elem).removeClass('is-active');
});
.wrapper {
  display: flex;
  flex: 1 0 auto;
}

.inf-frame-text {
  margin-top: 120px;
  &:first-child {
    margin-top: 0;
  }
}

p {
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.3s ease-out;
}

p.is-active {
  opacity: 1;
  overflow: visible;
}

.inf-read-btn {
  display: block;
  color: #00ffbf !important;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div class="wrapper">
  <div class="inf-frame-text">
    <h4> Learning Plus </h4>
    <p> For our clients, the future is a continuum. It’s not about the next big thing, it's simply everything that's next. The next experience. The next innovation. For our clients, the future is a continuum. It’s not about the next big thing, it's simply
      everything that's next. The next experience. The next innovation. For our clients, the future is a continuum. It’s not about the next big thing, it's simply everything that's next. The next experience. The next innovation. </p>
    <a class="inf-read-btn"> Read More + </a>
  </div>
  <div class="inf-frame-text">
    <h4> Learning Plus </h4>
    <p> For our clients, the future is a continuum. It’s not about the next big thing, it's simply everything that's next. The next experience. The next innovation. For our clients, the future is a continuum. It’s not about the next big thing, it's simply
      everything</p>
    <a class="inf-read-btn"> Read More + </a>
  </div>
  <div class="inf-frame-text">
    <h4> Learning Plus </h4>
    <p> For our clients, the future is a continuum. It’s not about the next big thing, it's simply everything that's next. The next experience. The next in it's simply everything that's next. The next experience. The next innovation. </p>
    <a class="inf-read-btn"> Read More + </a>
  </div>
</div>

Нет .. на самом деле мне нужен код java-скрипта для этого. Этот раздел требует некоторого поведения, я добавил их выше. Не могли бы вы мне помочь?

Danish 13.09.2018 19:51

Проверьте обновленный пост. Вместо этого вы можете поиграть с непрозрачностью.

Sushanth -- 13.09.2018 19:53

Или вы можете настроить height: 0; overflow: hidden; на то же самое.

Sushanth -- 13.09.2018 19:55

Когда мы нажимаем кнопку, используя мои коды, все содержимое будет отображаться и скрываться. Мне нужно, чтобы одно содержимое сетки открывалось при нажатии на кнопку «Подробнее», а другие должны скрываться. И при нажатии на другую кнопку readmore, которая должна быть открыта, а старая должна закрываться автоматически ...

Danish 13.09.2018 19:56

Большое спасибо, дружище ... :)) Я пытаюсь поставить высоту и вместо непрозрачности ... :)

Danish 13.09.2018 20:05

Рад, что у тебя получилось. Как только вы почувствуете, что это решает проблему, отметьте это как ответ, чтобы он помог другим :)

Sushanth -- 13.09.2018 20:06

Конечно ... Я сделаю это :))

Danish 13.09.2018 20:09

Брат, мы можем придать этому контенту анимацию? Я пробовал переход, но у меня не получилось ... есть ли решение ??

Danish 13.09.2018 20:11

Другие вопросы по теме