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!

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!

• javascript
• jquery
• click

5 Answers 5

<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.

Updated solution:

If you are just wanting to toggle the .author class from .author to .authornew and back to .author on the click() event, then you should be able to utilize the toggle() function:

HTML:

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

CSS:

.author { background: #000; }
.authornew { background: #ccc; }

jQuery:

$('#showhide').click(function() { 
    $('div.author').toggleClass('authornew');
});

Working example with toggle(): http://jsfiddle/zydJd/

A simple conditional example would be:

var obj = $(this);
if(obj.hasClass('author')){
    obj.removeClass('author').addClass('authornew');
}else{
    obj.removeClass('authornew').addClass('author');
}

Where $(this) would reference the object in question, i.e. $('.author').

Or to just make the change then:

$('.author').removeClass('author').addClass('authornew');

You can use the addClass and removeClass jQuery methods:

$('.author').removeClass('author').addClass('authornew');

jQuery toggleClass can be useful too.

$('#author-dropdown').toggleClass("author authornew");

This will toggle the class between author and authornew each time you call it. It works by removing either that are present and adding either that are not present. If one is initially present, then it will toggle between the two each time you call it.

Internally, jQuery does a string split on the passed in classnames to isolate each name and then for each className you pass, it does a hasClass on it and if true, it does removeClass, if not true, it does addClass.

This is linked to your previous question. I have added to the answer to your previous question to cover this...

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