Question

I need to change a class .author to .authornew when I click.

my html:

<div class="meta-info" id="showhide">
    <div class="author"></div>
 <div id="author-dropdown" style="display: none;"></div>    

My script:

<script>
$(document).ready(function() {
  $('#showhide').click(function() {
    if($('#author-dropdown').css('display') == 'none') {
      $('#author-dropdown').attr("id","author-dropdown-extended").slideDown();
    } else {
      $('#author-dropdown-extended').attr("id","author-dropdown").slideUp();
    }
    return false;
  });
});
</script>

#showhide is the id to press on. #author-dropdown is the drop down content. Now, the script changes id of drop down content, but I actually need to change class .author to .authornew. How should I amend my script to do this? Thanks!

Answer 1

<script>
   $(document).ready(function() {
       $('div#showhide').click(function() {

           //Check if element with class 'author' exists, if so change it to 'authornew'
           if ($('div.author').length != 0)
                $('div.author').removeClass('author').addClass('authornew');
           //Check if element with class 'authornew' exists, if so change it to 'author'
           else if ($('div.authornew').length != 0)
                $('div.authornew').removeClass('authornew').addClass('author');

       });
   });
</script>

This should do the trick!

First it removes the author class of your div with class author, and it then adds the class authornew to the object.