<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-скрипта для этого, но не сработал. Еще одна вещь: при нажатии на эту кнопку все остальное содержимое должно быть скрыто, кроме содержимого, связанного с этой кнопкой, которую мы собираемся щелкнуть.
Возможно, вы неправильно закрыли стиль .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>
Проверьте обновленный пост. Вместо этого вы можете поиграть с непрозрачностью.
Или вы можете настроить height: 0; overflow: hidden;
на то же самое.
Когда мы нажимаем кнопку, используя мои коды, все содержимое будет отображаться и скрываться. Мне нужно, чтобы одно содержимое сетки открывалось при нажатии на кнопку «Подробнее», а другие должны скрываться. И при нажатии на другую кнопку readmore, которая должна быть открыта, а старая должна закрываться автоматически ...
Большое спасибо, дружище ... :)) Я пытаюсь поставить высоту и вместо непрозрачности ... :)
Рад, что у тебя получилось. Как только вы почувствуете, что это решает проблему, отметьте это как ответ, чтобы он помог другим :)
Конечно ... Я сделаю это :))
Брат, мы можем придать этому контенту анимацию? Я пробовал переход, но у меня не получилось ... есть ли решение ??
Нет .. на самом деле мне нужен код java-скрипта для этого. Этот раздел требует некоторого поведения, я добавил их выше. Не могли бы вы мне помочь?