jQuery division visibility hidden is not working

$("#id_btnquizzestwo").click(function() {
    $temp = $("#rightsideeightone").is(":visible");     
    if($temp) {
        $("#rightsideeightone").css('display') = 'none';    
    }
})

The rightsideeightone division is not being hidden.

What to do ?

$("#id_btnquizzestwo").click(function() {
    $temp = $("#rightsideeightone").is(":visible");
    //alert($temp);

    if($temp) {
        $("#rightsideeightone").hide();         
    }

    $temp2 = $("#rightsideeighttwo").is(":hidden");
    //alert($temp2);

    if($temp2) {
        $("#rightsideeighttwo").show();
    }
})

I tried this, the rightsideeighttwo is not being visible. Initialy the rightsideeightone is visible and the rightsideeighttwo is hidden.

<div id="rightsideeight" >
    <div id="id_pollsquizzes" >
        <?php echo '<ul>'; ?>
        <?php
            echo '<li>';
            echo $this->Form->button('Polls',array('type'=>'button','id'=>'id_btnpollstwo'));
            echo '</l开发者_如何学编程i>';
            echo '&nbsp&nbsp';

            echo '<li>';
            echo $this->Form->button('Quizzes',array('type'=>'button','id'=>'id_btnquizzestwo'));
            echo '</li>';
            echo '&nbsp&nbsp';
        ?>

    </div>

    <div id="rightsideeightone" style="visibility: visible" >
            ......................
    </div>

    <div id="rightsideeighttwo" style="visibility: hidden" >
            ......................
    </div>

</div>

---

The line

$("#rightsideeightone").css('display') = 'none';

is incorrect. To change a style property, use this syntax:

$("#rightsideeightone").css('display','none'); 

Checking the visibility isn't necessary - if the element $("#rightsideeightone") is already hidden then hiding it again has no effect, so your function can be written as:

$("#id_btnquizzestwo").click(function() {
        $("#rightsideeightone").css('display','none');
});

---

Assuming that the $temp variable equals false you could try:

$('#rightsideeightone').hide();

---

All three explanation should work. But just for clarification:

Using this:

$("#rightsideeightone").css('display') = 'none';

Isn't working due to .css('display') this is a getter. As in get the current value of the display property. So what you are basically doing here is first getting the value (say 'block') and then try to assign a new value ('none') to it. It would be the equivalent of: (just for explanation, doesn't actually work):

'block' = 'none';

You need to set the value of display on the element not just overwrite the propert you get. Hence use the jQuery setter:

$("#rightsideeightone").css('display','none'); 
// OR
$("#rightsideeightone").css({ display: 'none' });

I prefer the later one.

Hope I explained it more the confused it :)

---

http://jsfiddle.net/LQg7W/89/

.visible { display: block; }
.hidden { display: none; }

$("#id_btnquizzestwo").click(function() {

  if( $("#rightsideeightone").is(".visible") )
    $("#rightsideeightone").removeClass("visible").addClass('hidden');

  if( $("#rightsideeighttwo").is(".hidden") )
    $("#rightsideeighttwo").removeClass("hidden").addClass('visible');

});