Question

Hello Friends i m getting blocked with a confusing error its seems simple but i cant got it done i just want to toggle a div on clicking on an ID and change the html() of this ID like currently its showing Hide when user click on it then its show ‘show’ but in my code its not happend and the panel works fine with toggle effect Please check DEMO. Please help me
Thanks in advance ….

Answer 1

You are making this MUCH more difficult than it needs to be. This is how I would do it:

$('#showhide').click(function(){
  var div = $(this);
  $('.camera_discription_cont_text_container').slideToggle('slow',function() {
      div.html($(this).is(":visible") ? "hide" : "show");
  });
})

But to actually explain what is wrong with your code, you want to use “else if” instead of the second “if” statement, as such:

$('#showhide').click(function(){

    if($(this).html()=='hide') {
        $(this).removeClass('hide');
        $(this).addClass('show');
        $(this).html('show');
    }
    else if($(this).html()=='show') {   //note the "else if", not "if"
        $(this).removeClass('show');
        $(this).addClass('hide');
        $(this).html('hide');
    }

    $('.camera_discription_cont_text_container').slideToggle('slow', function() {
        // Animation complete.
    });

})

If in your first if statement, you are changing the html to “show”. Then the statement finishes, and you are saying “if html is ‘show’, change it to hide”. So then it changes to hide. In other words, it is changing from hide to show to hide. Using “else if” is what you want.