I would like to amend my jquery script to add a different #id

I have this jquery code which pushes the content down on click:

<script>
$(document).ready(function() {
  $('#showhide').click(function() {
    if($('#author-dropdown').css('display') == 'none') {
      $('#author-dropdown').slideDown();
    } else {
      $('#author-dropdown').slideUp();
    }
    return false;
  });
});
</script&g开发者_C百科t;

I would like to add up a different id. So, lets say when the script is to display==none, user should see #author-dropdown and when display==block, the id should be #author-dropdown-extended. How should I amend this script to make it happen?

$('#author-dropdown').attr("id","author-dropdown-extended").slideDown();

and also change the following to set it back to original state

$('#author-dropdown-extended').attr("id","author-dropdown").slideUp();

I would personally try something like this though...

$('#showhide').click(function() {
    if($('.author-dropdown').is(':hidden')) {
      $('.author-dropdown').slideDown().removeClass('author-dropdown').addClass('author-dropdown-extended');
    } else {
      $('.author-dropdown').slideUp().removeClass('author-dropdown-extended').addClass('author-dropdown');
    }
    return false;
  });

Amend this script? Try this.

$(document).ready(function() {
    $('#showhide').click(function() {
        if ($('#author-dropdown').css('display') == 'none') {
            $('#author-dropdown-extended').slideUp('fast', function() {
                $('#author-dropdown').slideDown('slow');
            });
        } else {
            $('#author-dropdown').slideUp('fast', function() {
                $('#author-dropdown-extended').slideDown('slow');
            });
        }
        return false;
    });
});

Note that you probably shouldn’t dynamically change IDs in documents — use the class attribute for that. But you can if you really want to — using jQuery 1.6+:

var $elem = $('#author-dropdown');
$elem.prop('id', 'new-id');

In older jQuery versions, just use .attr() instead of .prop().