Toggling doesn't work in IE 7

Question

I have two divs i need to perform toggling between two divs while doing this some of the divs in my main div are displaying even if i use hide() function this happens only in ie7

function initMakeAPost()

{

     $('questionheaderid').hide();  //hiding the questions section
     $('MP_questionofday_txtboxid').hide();//hiding the questions answer"textbox and button" section
     $('recaspotheaderid').hide();//hiding the search by txtspotname and city-spots
     //$('footer_userpost').hide();//hiding the footer
     $('makeapostid').show();//show the make a post content
     $('btnQAPost').hide();
     $('footer_userpost').hide();
     $('sreetCredContainer').hide();
     $('postbtnid_dead').hide();
     $('askNextQuestion').hide(); 
     //$('UploadImgContainer').show();// for upload

 }

Answer 1

First, your jquery selectors appear to be invalid:

ie:

$('questionheaderid') // matches the tag "questionheaderid"
$('#questionheaderid') // matches any tag with the id="questionheaderid"
$('.questionheaderid') // matches any tag with class="questionheaderid"

Next, the .hide()/show() methods simply add/remove the display:none style from the matched item. If you have additional CSS in seperate stylesheets that have a higher precedence than inline, they can override anything you would set with jquery. This can happen sometimes if you set an initial state in the CSS file and try to override with the inline style.

Answer 2

Show and hide are really simple stuff that should "just work". If it does not, I'd like to see the corresponding markup (and possibly css). Maybe there is something there that makes IE behave differently (as usual). :)

Btw, here's a tip for doing hide/show on lots of elements by id:

$('id0', 'id1', 'id2', 'id3').invoke('hide');
$('id4', 'id5').invoke('show');

It is described in the prototype.js docs: http://api.prototypejs.org/dom/dollar/