0

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!

Improve this question
0

5 Answers 5

Reset to default
6 
<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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

It changes the class, but it doesnt go back to the previous class, on second click.
Ah sorry, I didn't know you wanted that. Editing my answer accordingly.
2

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.net/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');
Improve this answer

2 Comments

It changes the class, but it doesnt go back to the previous class, on second click.
Was not aware you were needing to toggle the classes. Updated solution.
1

You can use the addClass and removeClass jQuery methods:

$('.author').removeClass('author').addClass('authornew');
Improve this answer

1 Comment

Also, it changes the class, but it doesnt go back to the previous class, on second click.
1

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.

Improve this answer

Comments

0

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.