Show and hide text feature with one issue. How to remove the initial "show less" element?

Question

The code functions the way that it should.

I am having a hard time figuring out how to initially hide the "show less" button from the display.

All i'm doing here is grabbing the first paragraph and hiding the rest to show once the continue reading button is clicked. However the show less button is on the display initially. I would like to figure out how to remove it. I tried taking it away in the .html method but then it never shows up at all.

Any suggestions?

jQuery(function() {

  //Read more / read less text functionality. Add "minimize" to any paragraph of text.
  var wrapPara = jQuery('.minimize p').nextAll().wrapAll('<div class="hide-body">');
  var minimized_elements = jQuery('.minimize > p:first-child');
  var continueReading = '<a href="#" class="btn btn-success mr-3 more">Continue reading</a>';
  var showLess = '<a href="#" class="btn btn-success less">Show less</a>';

  minimized_elements.each(function() {
    jQuery(this).html(
      minimized_elements.text() + '<span>... </span>' + continueReading + " " + showLess
    ).appendTo(".minimize");
  });

  jQuery('a.more', minimized_elements).click(function(event) {
    event.preventDefault();
    jQuery(this).toggle();
    jQuery(this).next().show();
    jQuery(".hide-body").show();
  });

  jQuery('a.less', minimized_elements).click(function(event) {
    event.preventDefault();
    jQuery(this).toggle();
    jQuery(this).prev().show().prev().show();
    jQuery(".hide-body").hide();
    jQuery(".less").show();
  });
});

.hide-body {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="minimize">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus tenetur minus omnis expedita at possimus est mollitia iste dignissimos amet ipsam, magni nam eum ipsa explicabo qui, cumque totam repellat. Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. Doloribus tenetur minus omnis expedita at possimus est mollitia iste dignissimos amet ipsam, magni nam eum ipsa explicabo qui, cumque totam repellat Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus tenetur minus omnis expedita
    at possimus est mollitia iste dignissimos amet ipsam, magni nam eum ipsa explicabo qui, cumque totam repellat</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea hic recusandae tenetur eos harum accusamus, fugiat quas quasi nulla nobis, sed tempora eveniet consequatur. Enim autem recusandae, iste est aut.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus tenetur minus omnis expedita at possimus est mollitia iste dignissimos amet ipsam, magni nam eum ipsa explicabo qui, cumque totam repellat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea hic recusandae tenetur eos harum accusamus, fugiat quas quasi nulla nobis, sed tempora eveniet consequatur. Enim autem recusandae, iste est aut.</p>
</div>

score 2 · Accepted Answer · answered Nov 04 '19 at 04:39

You want Show less link initially hidden, so just add style="display:none;" in its html like below.

var showLess = '<a href="#" class="btn btn-success less" style="display:none;">Show less</a>';

Moreover I think once user expands the paragraph and then click on Show less it should hide that link. So I've commented jQuery(".less").show(); line.

Complete code is below. You can test it.

jQuery(function() {

  //Read more / read less text functionality. Add "minimize" to any paragraph of text.
  var wrapPara = jQuery('.minimize p').nextAll().wrapAll('<div class="hide-body">');
  var minimized_elements = jQuery('.minimize > p:first-child');
  var continueReading = '<a href="#" class="btn btn-success mr-3 more">Continue reading</a>';
  var showLess = '<a href="#" class="btn btn-success less" style="display:none;">Show less</a>';

  minimized_elements.each(function() {
    jQuery(this).html(
      minimized_elements.text() + '<span>... </span>' + continueReading + " " + showLess
    ).appendTo(".minimize");
  });

  jQuery('a.more', minimized_elements).click(function(event) {
    event.preventDefault();
    jQuery(this).toggle();
    jQuery(this).next().show();
    jQuery(".hide-body").show();
  });

  jQuery('a.less', minimized_elements).click(function(event) {
    event.preventDefault();
    jQuery(this).toggle();
    jQuery(this).prev().show().prev().show();
    jQuery(".hide-body").hide();
    // jQuery(".less").show();  // Commented to hide show less link once it clicked.
  });
});

.hide-body {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="minimize">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus tenetur minus omnis expedita at possimus est mollitia iste dignissimos amet ipsam, magni nam eum ipsa explicabo qui, cumque totam repellat. Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. Doloribus tenetur minus omnis expedita at possimus est mollitia iste dignissimos amet ipsam, magni nam eum ipsa explicabo qui, cumque totam repellat Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus tenetur minus omnis expedita
    at possimus est mollitia iste dignissimos amet ipsam, magni nam eum ipsa explicabo qui, cumque totam repellat</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea hic recusandae tenetur eos harum accusamus, fugiat quas quasi nulla nobis, sed tempora eveniet consequatur. Enim autem recusandae, iste est aut.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus tenetur minus omnis expedita at possimus est mollitia iste dignissimos amet ipsam, magni nam eum ipsa explicabo qui, cumque totam repellat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea hic recusandae tenetur eos harum accusamus, fugiat quas quasi nulla nobis, sed tempora eveniet consequatur. Enim autem recusandae, iste est aut.</p>
</div>

Show and hide text feature with one issue. How to remove the initial "show less" element?

1 Answers1