How to successfully show and hide a paragraph of text?

Question

I am trying to build a simple show and hide text using jquery but unsure where to go from here.

I have managed to show more text but when you hide the text you cant show it again.

it also leaves the link show more in the page when you have already pressed show more.

If anyone could guide me in the right direction i would much appreicte it.

here is my woking http://jsfiddle.net/nLzDk/

/*  SHOW MORE AND LESS TEXT PROFILE PAGE
===================================================================*/
$("#show-more-btn").click(function(e){
    e.preventDefault();
    $(".show-more").slideToggle('slow');
})

$("#show-less-btn").click(function(e){
    e.preventDefault();
    $(".show-less").slideUp('slow');
})

Answer 1

First of all good that you provided JsFiddle link, it helped me to find the actual issue.

Following approach might help you, you probably need to do changes as follows -

HTML-

    <div class="show-more clearfix">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pretium, turpis vitae tincidunt fermentum,
          <a href="#show-more-btn" id="show-more-btn">More</a>
       </p>
    </div>
<div class="show-less clearfix">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pretium, turpis vitae tincidunt fermentum,
          <a href="#show-less-btn" id="show-less-btn">Less</a>
       </p>
</div>

CSS -

    .show-less{
        display:none;
    }

Javascript -

    $("#show-more-btn").click(function(e){
       e.preventDefault();
       $(".show-less").slideToggle('slow');
    })

   $("#show-less-btn").click(function(e){
       e.preventDefault();
       $(".show-less").slideUp('slow');
   })

You just need to swap you classes correctly. I have tried this on JsFiddle, if that can help you.

But right approach for this kind of behavior would be as follows -

HTML -

    <div class="clearfix">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pretium, turpis vitae tincidunt fermentum,
        <button id="show-more">More</button>
      </p>
      <p class="more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pretium, turpis vitae tincidunt fermentum,
        <button id="show-less">Less</button>
      </p>
   </div>

CSS -

    .more{
      display:none;
    }

Javascript -

    $("#show-more").click(function(e){
      e.preventDefault();
      $(".more").slideToggle('slow');
      $(this).hide();
      $("#show-less").show(); 
    })

    $("#show-less").click(function(e){
      e.preventDefault();
      $(".more").slideUp('slow');
      $(this).hide();
      $("#show-more").show(); 
    })

Usually, you should show only one button at one time, either more button or less button and that is why we need to remove more button when user presses on more button and show less button button, and same applies when user clicks on less button.

I have implemented same here on JsFiddel

Answer 2

I can't see your full code (jsfiddle is blocked from my current network), but one thing I can tell you is that you are mixing approaches with your two buttons. JQuery has three basic "slide" methods: .slideUp(), .slideDown(), and .slideToggle().

• .slideUp() causes the selected element(s) to hide, using a sliding motion.
• .slideDown() causes the selected element(s) to display, using a sliding motion.
• .slideToggle() causes the selected element(s) to alternate between displayed or hidden, based on it's current state (i.e., if it's currently hidden, it will display and if it is currently displayed it will hide), using a sliding motion. Basically, it is a combination of .slideUp() and .slideDown() in one method.

In your case, if you are going to use two buttons, I would recommend using .slideUp() for "Show less" and .slideDown() for "Show more". However, it appears that you will have to add an additional .show() and .hide() on the buttons themselves, in order to show/hide the appropriate button for the view. Something like this:

$("#show-more-btn").click(function(e){
    e.preventDefault();
    $(".show-more").slideDown('slow');
    $("#show-more-btn").hide();
    $("#show-less-btn").show();
})

$("#show-less-btn").click(function(e){
    e.preventDefault();
    $(".show-more").slideUp('slow');
    $("#show-less-btn").hide();
    $("#show-more-btn").show();
})

If you went with one button, you could easily use the .slideToggle() method instead, but then you would also have to update the display of the button each time, to indicate the "show more/less" state. Something like this:

$("#show-btn").click(function(e){
    e.preventDefault();
    $(".show-more").slideToggle('slow');
    $("#show-btn").toggleClass("show-more show-less");
})

. . . or something similar.

Answer 3

try this:

/*  SHOW MORE AND LESS TEXT PROFILE PAGE
===================================================================*/
$("#show-more-btn").click(function(e){
    e.preventDefault();
    $(".show-more").slideToggle('slow');
    $("#show-more-btn").toggle();
})

$("#show-less-btn").click(function(e){
    e.preventDefault();
    $(".show-more").slideUp('slow');
    $("#show-more-btn").toggle();
})

*edited to hide the show and hide the show-more-button.