Исходя из того, что изначально причина ПОКАЗАТЬ в том, что все p скрыты, нам нужно скрыть gt (2), когда мы переключаемся.
код можно сократить, если вместо кнопки использовать кнопку .toggle(this.textContent==='Show More')с двумя обработчиками событий и двумя именами классов
$(document).ready(function() {
$('.read-more2').each(function() {
if ($(this).children('p').length > 4) {
$(this).children('p:lt(3)').show(); // because they were hidden
$(this).append('<button class="loadMore btn btn-primary">Show More</button>');
}
});
$('.read-more2').on("click", '.loadMore', function() {
$(this).parent('.read-more2').children('p').show(); // use p to show all
$(this).removeClass('loadMore').addClass('loadLess').text('Show Less');
});
$('.read-more2').on("click", '.loadLess', function() {
$(this).parent('.read-more2').children('p:gt(2)').hide(); // use gt 2 instead
$(this).removeClass('loadLess').addClass('loadMore').text('Show More');
});
});
.read-more2 > p { display:none }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="read-more2">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
</div>
<div class="read-more2">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
</div>
$(document).ready(function() {
$('.read-more-spec').each(function() {
if ($(this).find('ul li').length > 4) {
$(this).find('ul li:lt(3)').show(); // because they were hidden
$(this).append('<button class="loadMore btn btn-primary">Show More</button>');
}
});
$('.read-more-spec').on("click", '.loadMore', function() {
$(this).parent('.read-more-spec').find('ul li').show(); // use p to show all
$(this).removeClass('loadMore').addClass('loadLess').text('Show Less');
});
$('.read-more-spec').on("click", '.loadLess', function() {
$(this).parent('.read-more-spec').find('ul li:gt(2)').hide(); // use gt 2 instead
$(this).removeClass('loadLess').addClass('loadMore').text('Show More');
});
});
.read-more-spec ul li { display:none }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6 read-more-spec black">
<h3>LODGE FEATURES</h3>
<div>
<ul>
<li>Vaulted ceiling to lounge, kitchen and diner</li>
<li>Two sets of French doors to the front elevation</li>
<li>Overhanging eaves with discreet lighting to the external front elevation</li>
<li>Colour coordinated curtains, blinds and carpets</li>
<li>Fully fitted country style kitchen with four burner gas hob, built under oven and integrated dishwasher and fridge/freezer</li>
<li>Centre island/breakfast bar with two high backed chairs</li>
<li>Utility cupboard with under counter washing machine, condensing dryer, hooks, shelves and boot drying area under boiler</li>
<li>Solid wood dining table top with four painted white chairs</li>
<li>One large comfortable sofa and two armchairs – both in a classical design</li>
<li>Coffee table and lamp table also feature in the lounge area</li>
<li>Fireplace mantel and, electric log burner style fire</li>
<li>5ft King sized bed in master bedroom with gas lift under-bed storage</li>
<li>Freestanding bedroom furniture which includes large wardrobe, mirror, dressing table, dressing stool and bedside tables</li>
<li>Ensuite bathroom with tiled corner shower and heated towel rail</li>
<li>Bath in main bathroom with overhead shower and heated towel rail</li>
<li>Wall mirrors in both bathrooms</li>
<li>TV points in lounge and master bedroom</li>
<li>Energy efficient A Rated boiler with radiators and central heating throughout</li>
<li>Built to British Standard 3632 – residential specification</li>
<li>Timber frame structure</li>
<li>10 year structural warranty</li>
<li>Horizontal Sierra Canexel Cladding to the exterior for easy maintenance</li>
<li>Anthracite grey UPVC double glazed doors and windows</li>
<li>Large decking in complementing grey composite board and handrail with two lockable gates (ideal for dog owners) to front and side. Steps down into the side garden area</li>
<!-- <button class="loadMore btn btn-primary">Show More</button> -->
</ul>
</div>