This jquery shows or hides the p tag with the show-hide CSS selector and it changes the button text too for show less again. it Toggles between them.
If you want to use more than one in the same page add 2 or 3 to show-hide and other CSS classes like show-hide2. so they don’t open and close same time 🙂
<p class="show-hide" style="display:none">lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet </p>
<div class="show-hide-button">Show more ></div>
<script>
// Select elements
const showHideText = document.querySelector('.show-hide');
const showHideButton = document.querySelector('.show-hide-button');
// Add event listener to the button
showHideButton.addEventListener('click', function() {
// Toggle visibility of the text
showHideText.style.display = showHideText.style.display === 'none' ? '' : 'none';
// Toggle button text
showHideButton.textContent = showHideButton.textContent === 'Show more >' ? 'Show less <<' : 'Show more >';
});
</script>
<style>
.show-hide{
font-size:16px;
font-family: "Poppins";
font-weight: 400;
color: black;
}
.show-hide-button{
font-size:16px;
font-family: "Poppins";
font-weight: 600;
cursor: pointer;
color: #fc4639;
margin-bottom:5px;
text-transform: uppercase;
}
</style>