$("#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 '</li>';
            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>

$("#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 '</li>';
            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>

• javascript
• jquery

Share Improve this question Follow edited Sep 7, 2011 at 7:56 cola asked Sep 7, 2011 at 6:50 colacola 12.5k3636 gold badges108108 silver badges166166 bronze badges 3

• I have edited the original post/question and the html code to understand. – cola Commented Sep 7, 2011 at 7:57
• What html is generated by this string? echo $this->Form->button('Polls',array('type'=>'button','id'=>'id_btnpollstwo')); And besides you haven't closed ul element. – Arsen Kazydub Commented Sep 7, 2011 at 8:12
• @Webars, is this what you are looking for ? jsfiddle/LQg7W/85 – cola Commented Sep 7, 2011 at 8:24

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

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/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');

});