Show Hide Text With Button and Button text Changes Show or Hide

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">loremipsum dolor sit amet loremipsum dolor sit amet loremipsum dolor sit amet loremipsum dolor sit amet loremipsum dolor sit amet loremipsum dolor sit amet loremipsum dolor sit amet loremipsum dolor sit amet loremipsum dolor sit amet loremipsum dolor sit amet loremipsum dolor sit amet loremipsum dolor sit amet loremipsum dolor sit amet loremipsum dolor sit amet loremipsum dolor sit amet loremipsum dolor sit amet loremipsum dolor sit amet loremipsum dolor sit amet loremipsum dolor sit amet loremipsum dolor sit amet loremipsum dolor sit amet loremipsum dolor sit amet loremipsum dolor sit amet loremipsum dolor sit amet loremipsum dolor sit amet loremipsum dolor sit amet loremipsum dolor sit amet loremipsum dolor sit amet loremipsum dolor sit amet loremipsum dolor sit amet </p>


<div class="show-hide-button">Show more ></div>
<script>
jQuery(".show-hide-button").click(function(){
    jQuery(".show-hide").toggle();
});

jQuery('.show-hide-button').click(function() {
    if (jQuery('.show-hide-button').text() === 'Show more >') {
         jQuery('.show-hide-button').text('Show less <<');
    }
    else {
        jQuery('.show-hide-button').text('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>