jQuery expand and collapse text

Question

I am having trouble expending and collapsing text on a button click. I was able to make so when you click the button, text collapse, but I also need to make so you can expand it back. I need to make it so first it is hidden, and when you click button it expends and you can collapse it again after that. Here is my code

 $(document).ready(function() { $('#btnSlideUp').click(function() { $('#p1').slideUp(1000); }); $('#btnSlideDown').click(function() { $('#p1').slideDown(1000); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <button id="btnSlideUp" class="btn btn-outline-success"><h1 class="jumbotron-heading">Expand</h1></button> <p class="lead text-muted" id="p1">Below this post you can find different articles, tips&tricks about how to find the job. You can try to contact us, and we will greatly try to answer all of your questions. You can click on "Start finding a job" and we will take you through the basics of finding a job, from the beginning till the end if you have absolutely no excperience.</p> <p> <a href="contactus.html"><button type="button" class="btn btn- outline-primary btn-lg">Contact Us</button></a> <a href="path.html"><button type="button" class="btn btn-outline secondary btn-lg">Start finding a job</button></a> </p> </div> 

Answer 1

The issue is that you bind two handlers to the click event on the button. When the button is clicked, both are triggered but you only see the initial one (slideUp) .

$('#btnSlideDown') refers to an element that doesn't exist (at least not in your example).

The easiest way to resolve this is to use jQuery's slideToggle() method to handle the click event.

 $(document).ready(function() { $('#btnSlideUp').click(function() { $('#p1').slideToggle(1000); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <button id="btnSlideUp" class="btn btn-outline-success"><h1 class="jumbotron-heading">Expand</h1></button> <p class="lead text-muted" id="p1">Below this post you can find different articles, tips&tricks about how to find the job. You can try to contact us, and we will greatly try to answer all of your questions. You can click on "Start finding a job" and we will take you through the basics of finding a job, from the beginning till the end if you have absolutely no excperience.</p> <p> <a href="contactus.html"><button type="button" class="btn btn- outline-primary btn-lg">Contact Us</button></a> <a href="path.html"><button type="button" class="btn btn-outline secondary btn-lg">Start finding a job</button></a> </p> </div> 

Answer 2

You can use jQuery's toggle method instead:

$(document).ready(function(){
    $('#btnSlideUp').click(function(){
        $('#p1').toggle(1000);
    });
 });

Answer 3

Try This.

$(document).ready(function() {
  $('#btnSlideUp').click(function() {
    $('#p1').slideToggle(1000);
  });

You can read the full documentation here

Answer 4

Use jquery .slideToggle() function.

 $(document).ready(function() { $('#btnSlideUp').click(function() { $('#p1').slideToggle(1000); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <button id="btnSlideUp" class="btn btn-outline-success"><h1 class="jumbotron-heading">Expand</h1></button> <p class="lead text-muted" id="p1">Below this post you can find different articles, tips&tricks about how to find the job. You can try to contact us, and we will greatly try to answer all of your questions. You can click on "Start finding a job" and we will take you through the basics of finding a job, from the beginning till the end if you have absolutely no excperience.</p> <p> <a href="contactus.html"><button type="button" class="btn btn- outline-primary btn-lg">Contact Us</button></a> <a href="path.html"><button type="button" class="btn btn-outline secondary btn-lg">Start finding a job</button></a> </p> </div> 

Answer 5

Use a boolean

 var isDown=true; $('#btnSlideUp').click(function() { if(isDown){ $('#p1').slideUp(1000); isDown=false; }else { $('#p1').slideDown(1000); isDown=true; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <button id="btnSlideUp" class="btn btn-outline-success"><h1 class="jumbotron-heading">Expand</h1></button> <p class="lead text-muted" id="p1">Below this post you can find different articles, tips&tricks about how to find the job. You can try to contact us, and we will greatly try to answer all of your questions. You can click on "Start finding a job" and we will take you through the basics of finding a job, from the beginning till the end if you have absolutely no excperience.</p> <p> <a href="contactus.html"><button type="button" class="btn btn- outline-primary btn-lg">Contact Us</button></a> <a href="path.html"><button type="button" class="btn btn-outline secondary btn-lg">Start finding a job</button></a> </p> </div>