Jquery show/hide not working

Question

Hi all, I have this jquery script which suppose to hide/show div element base on the hyperlink that is clicked. I don't know why but it's not working at all. The following is the except of my code.

function hide_current_commoncontainer(commoncontainer){
   $(commoncontainer).each(function(){
 if(this.is(":visible")){this.hide();} 
 });
}

function init(){
$("#compose_link").bind("click",function(){
 hide_current_commoncontainer(".pmcommoncontainer");
 ("#composer").show();  
 return false;
 }
);

if(Drupal.jsEnabled){  
 $(document).ready(init);
} 

I've pinpoint the cause and found out that it is show/hide function which is not working. The rest - function calls - are ok. Can anyone tell me where I am doing wrong? Where should I amend my code in order to hide/show div element as the way I wanted.

Answer 1

You're missing the $ before ("#composer").show(); and this

Shouldn't it be $("#composer").show(); and $(this)? Also, make sure you've pulled in the definitions of show/hide

Answer 2

instead of this, you have to use $(this) for jquery objects.

Answer 3

I think that there are a couple of areas that need to be tweaked in your code sample.

REPLACE

("#composer").show();  

WITH

$("#composer").show();  

---

REPLACE

if(this.is(":visible")){this.hide();} 

WITH

if($(this).is(":visible")){$(this).hide();} 

Answer 4

I'd suggest you do something like

$(function() {
    $('#compose_link').click(function(e) { 
        $('.pmcommoncontainer').children(':visible').hide();
        $('#composer').show();
        e.preventDefault();
    });
});

Which will show the element with the id of composer, and hide all visible child elements of the class pmcommoncontainer when the element with the id compose_link is clicked.

I think this is what you want to do - no need to iterate as jQuery works with sets :).

EDIT

Looks like you also wanted the click or post to be stopped - with events you can use the preventDefault() function to stop that behaviour.

Answer 5

Ok I found out why $("#composer").show() is not working. It's because I hard-coded the visibility style of those divs to "hidden" and jquery's "show" method can't revert that. Strangely, as opposed to "show" method, "hide" can revert hard-coded "visible" style with no problem. So, to hide/show elements as intended, I either have to use hide/show method combo without no visibility style hard-coding or use css method of jquery and set the visibility style as desire.