Открытие и закрытие контента на jQuery

Кнопка "показать еще"

В этом примере часть контента с классом hide-content скрывается и показывается нажатием на кнопку или любой другой элемент с классом show-more

Каждая кнопка и скрытый текст должны находиться в контейнере content-block

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CSS в этом примере не выкладываю, т.к. оформление тут индивидуальное, но если кому нравится эта кнопка, ее код представлен ниже.

HTML
jQuery

<div class="content-block">
	<p>Видимый текст</p> 
	<button class="show-more">Показать еще</button>	
	<p class="hide-content">Скрытый текст</p>
	<p class="hide-content">Скрытый текст</p>
</div>

<p>Видимый текст</p>

<button class="show-more">Показать еще</button>

<p class="hide-content">Скрытый текст</p>

</div>

Или:

<div class="content-block">
	<p>Видимый текст</p> 
	<p class="hide-content">Скрытый текст</p>
	<p class="hide-content">Скрытый текст</p>
	<button class="show-more">Показать еще</button>	
</div>

<p>Видимый текст</p>

<p class="hide-content">Скрытый текст</p>

<button class="show-more">Показать еще</button>

</div>

Другими словами, где располагается кнопка и скрытый текст - не важно.

$(".content-block").each(function() {
	let more = $(this).find(".show-more");
	let hide = $(this).find(".hide-content");
	hide.hide();
	more.click(function() {
		hide.slideToggle();
		more.text(more.text() == "Скрыть" ? "Показать еще" : "Скрыть");
	});
});

$(".content-block").each(function() {

let more = $(this).find(".show-more");

let hide = $(this).find(".hide-content");

hide.hide();

more.click(function() {

hide.slideToggle();

more.text(more.text() == "Скрыть" ? "Показать еще" : "Скрыть");

});

Более простой вариант, при котором кнопка откроет текст ниже нее, будет выглядеть так:

HTML
jQuery

<p>Видимый текст</p> 
<button class="show-more">Показать еще</button>	
<p class="hide-content">Скрытый текст</p>

<p>Видимый текст</p>

<button class="show-more">Показать еще</button>

<p class="hide-content">Скрытый текст</p>

$(".hide-content").hide();
$(".show-more").click(function() {
	$(this).next(".hide-content").slideToggle();
    $(this).text($(this).text() == "Скрыть" ? "Показать еще" : "Скрыть");
});

$(".hide-content").hide();

$(".show-more").click(function() {

$(this).next(".hide-content").slideToggle();

$(this).text($(this).text() == "Скрыть" ? "Показать еще" : "Скрыть");

});

Кнопка "показать полностью"

В этом примере у нас есть блок определенной высоты, и если текст в нем не умещается, мы показываем кнопку "показать полностью".

<div class="content-block-fix">
	<div class="content-block-text">
		<p>Текст</p>
	</div>
	<div class="show-all-container">
		<button class="show-all">Показать полностью</button>	
	</div>
</div>

<p>Текст</p>

</div>

<button class="show-all">Показать полностью</button>

</div>

.content-block-fix {
	margin: 20px 0;
	padding: 20px;
	background: #FFF;
	font-size: 16px;
	border: 2px solid #BFE2FF;
	position: relative;
}
.content-block-text {
	height: 150px;
	overflow: hidden;	
	position: relative;
	transition: margin 0.3s;
}
.content-block-text-open {
	height: auto;
	margin-bottom: 50px;
}
.content-block-text-shadow:after {
	content: "";
	position: absolute;
	pointer-events: none;
	left: 0;
	bottom: 0;
	height: 100px;
	width: 100%;
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #FFF 75%)	
}
.show-all-container {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: none;
}

.content-block-fix {

margin: 20px 0;

padding: 20px;

background: #FFF;

font-size: 16px;

border: 2px solid #BFE2FF;

position: relative;

}

.content-block-text {

height: 150px;

overflow: hidden;

position: relative;

transition: margin 0.3s;

}

.content-block-text-open {

height: auto;

margin-bottom: 50px;

}

.content-block-text-shadow:after {

content: "";

position: absolute;

pointer-events: none;

left: 0;

bottom: 0;

height: 100px;

width: 100%;

background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #FFF 75%)

}

.show-all-container {

position: absolute;

right: 10px;

bottom: 10px;

display: none;

}

Оформление кнопки выложено ниже.

$(".content-block-text").each(function() {
	let th = $(this);
	if (th.prop('scrollHeight') > th.height()) {
	let more = th.next(".show-all-container").find(".show-all");	
		th.next(".show-all-container").show();	
		th.addClass("content-block-text-shadow");
		more.click(function() {
			th.toggleClass("content-block-text-shadow content-block-text-open");
			more.text(more.text() == "Скрыть" ? "Показать полностью" : "Скрыть");
		});
	}
});

$(".content-block-text").each(function() {

let th = $(this);

if (th.prop('scrollHeight') > th.height()) {

let more = th.next(".show-all-container").find(".show-all");

th.next(".show-all-container").show();

th.addClass("content-block-text-shadow");

more.click(function() {

th.toggleClass("content-block-text-shadow content-block-text-open");

more.text(more.text() == "Скрыть" ? "Показать полностью" : "Скрыть");

});

}

});

CSS код кнопки для обоих примеров:

.show-more,
.show-all {
	display: inline-flex;
	margin: 10px;
	text-decoration: none;
	position: relative;
	font-size: 20px;
	line-height: 20px;
	padding: 12px 30px;
	color: #FFF;
	font-weight: bold;
	text-transform: uppercase; 
	font-family: 'Roboto', Тahoma, sans-serif;
	background: #337AB7;
	cursor: pointer; 
	border: 2px solid #BFE2FF;
	overflow: hidden;
	z-index: 1;
}
.show-more:hover,
.show-more:active,
.show-more:focus,
.show-all:hover,
.show-all:active,
.show-all:focus{
	color: #FFF;
}
.show-more:before,
.show-all:before {
	content: '';
	position: absolute;
	top: 0;
	right: -50px;
	bottom: 0;
	left: 0;
	border-right: 50px solid transparent;
	border-top: 50px solid #2D6B9F;
	transition: transform 0.5s;
	transform: translateX(-100%);
	z-index: -1;
}
.show-more:hover:before,
.show-more:active:before,
.show-more:focus:before,
.show-all:hover:before,
.show-all:active:before,
.show-all:focus:before{
	transform: translateX(0);
}

.show-more,

.show-all {

display: inline-flex;

margin: 10px;

text-decoration: none;

position: relative;

font-size: 20px;

line-height: 20px;

padding: 12px 30px;

color: #FFF;

font-weight: bold;

text-transform: uppercase;

font-family: 'Roboto', Тahoma, sans-serif;

background: #337AB7;

cursor: pointer;

border: 2px solid #BFE2FF;

overflow: hidden;

z-index: 1;

}

.show-more:hover,

.show-more:active,

.show-more:focus,

.show-all:hover,

.show-all:active,

.show-all:focus{

color: #FFF;

}

.show-more:before,

.show-all:before {

content: '';

position: absolute;

top: 0;

right: -50px;

bottom: 0;

left: 0;

border-right: 50px solid transparent;

border-top: 50px solid #2D6B9F;

transition: transform 0.5s;

transform: translateX(-100%);

z-index: -1;

}

.show-more:hover:before,

.show-more:active:before,

.show-more:focus:before,

.show-all:hover:before,

.show-all:active:before,

.show-all:focus:before{

transform: translateX(0);

}

Другие варианты можно найти в теме "Оформление кнопок на CSS"

Андре: 12.11.2022 в 15:58

кнопка в последнем примере не работает при первой загрузке страницы.

Ответить
Андрей: 28.09.2022 в 02:09

Кто будет подключать в head добавьте строку первой строчкой. Иначе не заработает.

$(document).ready(function() {
здесь ваш скрипт
});

Ответить
Альберт: 08.04.2022 в 12:00

Куча всего расписано, толку ноль

Ответить
- Alexander: 08.04.2022 в 16:03
  
  Значит вам это решение не подходит
  
  Ответить
Альберт: 08.04.2022 в 11:59

не работает
почему нет кнопки скачать исходники?

Ответить
Михаил: 29.01.2022 в 22:27

Здравствуйте не появляется кнопка, те Css Работает.
А Js походу спит может я не так вставляю, не разобрался ещё толком!

Ответить
- Alexander: 30.01.2022 в 00:57
  
  Я увидел ваш скрин, но с элементором я ничем не подскажу, я с ним не знаком
  
  Ответить
  - Михаил: 31.01.2022 в 06:31
    
    Хорошо спасибо, потихоньку сам разбираюсь
    
    Ответить
  - Михаил: 31.01.2022 в 10:57
    
    jQuery(document).ready(function($) {
    
    В первом варианте заработало при исправлении в первой строчки на jQuery(document).ready(function($) {
    
    Ответить
  - Михаил: 31.01.2022 в 10:59
    
    Мне нужен третий вариант там тоже где то, что-то прячется, не могу понять так сразу!
    
    Ответить

Кнопка "показать еще"

Кнопка "показать полностью"

CSS код кнопки для обоих примеров:

Смотрите также:

Добавить комментарий:

Комментарии: