Replace class of a div using removeClass and addClass

Question

For my new wordpress site I need some help. I got 4 pages and 2 different sidebars. On 2 pages there shouldn't be a border-left and on the other 2 pages there should be a border-left. So I got following code:

<div id="sidebar" class="sidebar">
        <?php if(is_page('Willkommen') || is_page('Angebot'))
            {
                dynamic_sidebar('Angebot');
            }

            else
            {
                dynamic_sidebar('Anfahrt');
                if(is_page('Anfahrt'))
                {
                    echo "<script type='text/javascript'>
function removeBorder()
{
    $(document).ready(function() {
        if($('#sidebar').hasClass('sidebar'))
        {
            $(this).removeClass('sidebar')
            $(this).addClass('secondsidebar')
        }

    });
}
</script>";
                }
            }
        ?>
    </div><!-- sidebar -->

I want to remove the class "sidebar" and add the class "secondsidebar" if there is a div#sidebar on the page. But the code won't work. I wrote this code for myself and I'm a beginner in jQuery :) So please be patient.

I hope someone can give me a hint.

Cheers

You define a function removeBorder here, but never call it. — raina77ow
– raina77ow, Commented Sep 7, 2013 at 21:07

Bram Vanroy · Accepted Answer · 2013-09-07 21:48:40Z

2

A pure PHP solution should be possible as well.

<div id="sidebar" class="<?php if (is_page('Anfahrt')) : ?>secondsidebar<?php else : ?>sidebar<?php endif; ?>">
    <?php
    if (is_page('Willkommen') || is_page('Angebot')) {
        dynamic_sidebar('Angebot');
    }

    else {
        dynamic_sidebar('Anfahrt');
    }
    ?>
</div>

NOTE: try not to use IDs and classes with the same name. #sidebar and .sidebar might get confusing.

Explanation for the classes:

<div id="sidebar" class="<?php if (is_page('Anfahrt')) : ?>secondsidebar<?php else : ?>sidebar<?php endif; ?>">

When the server reads this (PHP is code that is executed by the server before rendering the result back to the user) it comes to "class" and it notices an if-statement. "what text should I put in the class="" of this element?" The server then sees the instructions:

If the page is "Anfahrt": the text to return should be secondsidebar
Else (in all other cases): the text should be sidebar

"Text" isn't really a good name here. But you get what I mean. This "text" is then placed where the if-statement is. The result then is (as it is returned to a user):

If the page is "Anfahrt":

<div id="sidebar" class="secondsidebar">

If the page is anything else:

<div id="sidebar" class="sidebar">

edited Sep 7, 2013 at 21:48

answered Sep 7, 2013 at 21:15

Bram Vanroy

28.9k29 gold badges151 silver badges266 bronze badges

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

6 Comments

roemel Over a year ago

Hm okay. Yeah it make sense. But it still doesn't replace the class "sidebar" with "secondsidebar"

roemel Over a year ago

Yeah I looked at your edit and I will thank you for explaining this so nice, but it still doesn't work. If I visit page "Anfahrt" it doesn't replace the class "sidebar" with "secondsidebar" :/ Is still something wrong?

Bram Vanroy Over a year ago

@Sergio Look closely, it isn't inside the function anymore. The first part was, the result doesn't.

roemel Over a year ago

Aaaaaah nice! It works now! Thank you. But: Can you explain it a little bit closer to me? Because I don't want to have a code that I don't understand :)

roemel Over a year ago

Ah yeah that sounds logical :) But for someone who has never looked closer to PHP it isn't as simple as it seems to write something like this :) Thank you for your help and support and for the very nice explanation :) (Y)

|

Collectives™ on Stack Overflow

Replace class of a div using removeClass and addClass

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related