Как сделать несколько read more на странице?

Question

[Валентина]

На странице есть элементы которые открыватьюсь по клику.
Есть код котрый их скрывает и открывает.
Но проблема в том, что он открывает сразу все.
Как сделать так, чтобы не открывались все, а только в данойм блоке.

jQuery(document).ready(function($){
	$('.content_toggle').click(function(){
		$('div.content_block').toggleClass('hide');	
		if ($('.content_block').hasClass('hide')) {
			$('.content_toggle').html('Подробнее');
		} else {
			$('.content_toggle').html('Скрыть');
		}		
		return false;
	});				
});

<div class="content_block hide">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in libero cursus, placerat magna in, malesuada ligula. Proin tellus lacus, tempor in est sodales, elementum fringilla tellus. Donec dignissim elit arcu, et tempor nunc cursus at. Phasellus non commodo lacus, non tempus mi. Donec mattis eros a porta ullamcorper. Pellentesque at ullamcorper turpis. Aliquam non semper ligula, sed porttitor nulla. Donec a elit accumsan, egestas urna ut, elementum ex. Cras vitae elit nec tortor luctus fermentum. Maecenas et orci in mi venenatis feugiat in sed lectus.</p>
	<p>Ut sed laoreet mi, finibus auctor sapien. Nam a nisl maximus, volutpat dui bibendum, suscipit mi. Quisque porttitor sapien ut nulla porta, id faucibus est lobortis. Morbi volutpat non turpis eu tincidunt. Donec gravida felis sem, at vestibulum quam congue in. Suspendisse lacinia eget risus a dignissim. Etiam condimentum dapibus tortor sit amet volutpat. Fusce porttitor leo non erat gravida, ac pulvinar leo congue. Praesent felis eros, hendrerit quis dui in, consequat accumsan enim. Curabitur ultricies vel sapien ut consequat.</p>
	<p>Nulla tempus eleifend erat, ut vulputate erat tempus et. Integer ultricies elit nisi, vel lacinia dui molestie at. Cras vel feugiat tortor. Suspendisse vulputate, lorem non mollis bibendum, lorem elit aliquet lorem, sit amet euismod metus lacus nec mauris. Mauris cursus gravida ultrices. Cras risus metus, blandit placerat vehicula quis, ultrices vel est. Praesent accumsan suscipit enim, vel placerat metus.</p>
</div>

<a class="content_toggle" href="#">Подробнее</a>

<div class="content_block hide">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in libero cursus, placerat magna in, malesuada ligula. Proin tellus lacus, tempor in est sodales, elementum fringilla tellus. Donec dignissim elit arcu, et tempor nunc cursus at. Phasellus non commodo lacus, non tempus mi. Donec mattis eros a porta ullamcorper. Pellentesque at ullamcorper turpis. Aliquam non semper ligula, sed porttitor nulla. Donec a elit accumsan, egestas urna ut, elementum ex. Cras vitae elit nec tortor luctus fermentum. Maecenas et orci in mi venenatis feugiat in sed lectus.</p>
	<p>Ut sed laoreet mi, finibus auctor sapien. Nam a nisl maximus, volutpat dui bibendum, suscipit mi. Quisque porttitor sapien ut nulla porta, id faucibus est lobortis. Morbi volutpat non turpis eu tincidunt. Donec gravida felis sem, at vestibulum quam congue in. Suspendisse lacinia eget risus a dignissim. Etiam condimentum dapibus tortor sit amet volutpat. Fusce porttitor leo non erat gravida, ac pulvinar leo congue. Praesent felis eros, hendrerit quis dui in, consequat accumsan enim. Curabitur ultricies vel sapien ut consequat.</p>
	<p>Nulla tempus eleifend erat, ut vulputate erat tempus et. Integer ultricies elit nisi, vel lacinia dui molestie at. Cras vel feugiat tortor. Suspendisse vulputate, lorem non mollis bibendum, lorem elit aliquet lorem, sit amet euismod metus lacus nec mauris. Mauris cursus gravida ultrices. Cras risus metus, blandit placerat vehicula quis, ultrices vel est. Praesent accumsan suscipit enim, vel placerat metus.</p>
</div>

<a class="content_toggle" href="#">Подробнее</a>

.content_block {
	overflow: hidden;
	position: relative;    
}
.content_block.hide {
	height: 300px;
}
.content_block.hide:after{
	content: "";
	display: block;
	height: 100px;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 75%)
}
p {
	font-size: 16px;
	color: #777;
	margin: 0 0 10px 0;
	padding: 0;
	line-height: 1.6;
}

/* Кнопка */
.content_toggle {
	display: inline-block;
	padding: 15px 20px;
	background: #672cc5;
	font-size: 16px;
	text-decoration: none;
	color: #fff;
	margin-bottom: 20px;
	border-radius: 5px;
	border-bottom: 3px solid #32145a;
}
.content_toggle:hover {
	color: #fff;
	background: #7c4acc;
	border-bottom: 3px solid #32145a;
}
.content_toggle:active {
	background: #34106d;
}

Answer 1

[Alex]

Потому что вы удаляете класс со всех блоков
$('div.content_block').toggleClass('hide');
А нужно только с конкретного

Comments

[Валентина]

а как удалить с конкретного?

Answer 2

[Александр Черемхин]

jQuery(document).ready(function($){
  $('.content_toggle').click(function(event){
     event.preventDefault();   // блокировать переход по ссылке

     const $link= $(event.target); // a - конкретная ссылка которая была нажата
     const $content = $link.prev('div.content_block');  // div -контент блок перед ссылкой
   
     $content.toggleClass('hide'); // показать или скрыть контент блок

     const htmlLink  = $content.hasClass('hide') ? 'Подробнее' :  'Скрыть'; 
     $link.html(htmlLink);	
  });				
});

Comments

[Валентина]

Спасибо. В редакторе работает, а на WordPress нет, буду разбираться