CODEWITHSUNDEEP
javascriptjquery
Henry Jeff
Henry Jeff

Reputation: 57

Having troubles with removing and reapearing html elements with jquery

Basically I want to slide down a element, then when the button is hit again I want it to slide up, empty the div, then slide down with the new results. I'v been trying to figure out how to do this for so long and I cant seem to get it working with jquery.

$(".search").on("click",function(){
    $('.results').slideUp(500).empty().append("<p>Results</p>").hide().slideDown(500)
});

I understand this is kind of specific to my project kind of but I do feel others might find this useful

Upvotes: 0

Views: 53

Answers (2)

kogelnikp
kogelnikp

Reputation: 447

I'm not sure what exactly your problem is, but I think the slideUp animation is not shown in your example.

The slideUp method takes a second argument, which is the function callback. It is called when the slideUp action is finished. If you do the rest of your actions in this callback function, is guaranteed to be performed after the slideUp.

jQuery('#testbutton').on('click',function() {
  $('#testlist').slideUp(500, function() {
    $('#testlist').empty().append("<li>this is a test</li>").slideDown(500);
  });  
});

You can find a fully working example here:

https://jsfiddle.net/dxyybwyh/5/

Upvotes: 3

Rohit Hazra
Rohit Hazra

Reputation: 667

I want to slide down a element, then when the button is hit again I want it to slide up, empty the div, then slide down with the new results.

It seems simple enough to me

let me know if you need anything more

$('#myButton').click(function () {
  if ( $( ".myDiv" ).is( ":hidden" ) ) {
    //show the div
    $( ".myDiv" ).slideDown( "slow" );
    //add content
    $( ".myDiv" ).html("New Content")
  } else {
    //hide the div
    $( ".myDiv" ).slideUp( "slow" );
    //clear content
    $( ".myDiv" ).html("");

  }
});

http://codepen.io/Rohithzr/pen/jqmGXg

Updated the pen with append ability and more readability

$('#myButton').click(function () {
  if ( $( ".myDiv" ).is( ":hidden" ) ) {
    show();
  } else {
    hide();
    clearContent();
    appendContent("New Content");
  }
});
function clearContent(){
  //clear content
  $( ".myDiv" ).html("");
}
function appendContent(content){
  $( ".myDiv" ).html($( ".myDiv" ).html()+content);
}
function hide(){
  //hide the div
  $( ".myDiv" ).slideUp( "slow" );
}
function show(){
  //show the div
  $( ".myDiv" ).slideDown( "slow" );
}

Upvotes: 1

Related Questions