CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Chiti Dahan
Chiti Dahan

Reputation: 254

div tag with style='display: none;' not working

So, I am trying to have a full div hidden until user clicks a button. I tried setting display:none; but it is not working. i tried setting display:none !important; but that didn't work either. I tried using 

$(document).ready(function(){
jQuery('#div').hide();
});

but it is not working.. Below is my code. Any help would be appreciated.

<div name="Head">
    <div id="first_box" align=right>
        <input type="button" id="get_preview" onClick="bringPreview()" value="Generate Preview"/>
        <input type="button" id="get_code" onClick="bringCode()" value="Generate Code"/>
    </div>
</div>
<script>
   function bringPreview() {
        jQuery('#batchemail').toggle();
   }

   function bringCode() {
        jQuery('#batchemail').hide();
        jQuery('#batchemailcode').toggle();
   }


</script> 
<div id="batchemailcode" style="display: none;">
    <xmp> <p>Hello</p>
    </xmp>
</div>
<div id="batchemail" style="display:none;">
    <body style="background:#f6f6f6; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; margin:0; padding:0;">
    <div style="background:#f6f6f6; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; margin:0; padding:0;">
    <table cellspacing="0" cellpadding="0" border="0" width="100%">
    <tr>
        <td align="center" valign="top" style="padding:20px 0 20px 0">
            <table bgcolor="#ffffff" cellspacing="0" cellpadding="20" border="0" width="650" style="border:1px solid #E0E0E0;">
            <!-- [ header starts here] -->
                <tr>
                    <td style="width:200px; height:70px; float:left;">
                            <a href="{{store url=""}}"><img src="{{ logo }}"
                                    alt="{{var logo_alt}}" style="margin-bottom:10px; width:299px; height:62px" border="0"/> </a></div>
                        <div style="width:240px; float:right; font-size: 12px;text-align:right; color: #222222;">Subheader subject line<br/> <a href="{{ url }}" style="color: #222222; margin-top: 10px;"><span style="font-size: 12px;">View The Online Version</span></a>
                    </td>
                </tr>
            <!-- [ middle starts here] -->          
                <tr>
                    <td valign="top">
                        <div style="text-align: center; font-size: 14px; text-decoration: none; color: #222222; padding: 10px 0 10px 0; margin-bottom: 5px; background-color: #cccccc;">
                            <a href="{{ url }}" style="color: #222222; text-decoration: none; padding: 0 5px 0 5px;">Appliances</a> | <a href="{{ url }}" style="color: #222222; text-decoration: none; padding: 0 5px 0 5px;">Furniture</a> | <a href="{{ url }}" style="color: #222222; text-decoration: none; padding: 0 5px 0 5px;">Bed &amp; Bath</a> | <a href="{{ url }}" style="color: #222222; text-decoration: none; padding: 0 5px 0 5px;">Lighting</a> | <a href="{{ url }}" style="color: #222222; text-decoration: none; padding: 0 5px 0 5px;">Rebates</a> | <a href="{{ url }}" style="color: #222222; text-decoration: none; padding: 0 5px 0 5px;">Scratch &amp; Dent</a>
                        </div>

                        <hr style="border:1px; color:#cccccc; border-style:dotted;" />

                    <!--<div class="email-large-banner" style="width: 640px; border: 1px solid #e0e0e0; margin-top: 5px; margin-bottom: 10px;">-->
                    <!--    <a href="<?php echo $link ?>"><img src="<?php echo $image?>" alt="<?php echo $brand?>" /></a>   -->
                    <!--</div>-->
    <?php elseif($counter == 2):
            foreach ($imagesByRow as $row => $images):
            $count = 1;
            foreach($images as $image):
                $link = $model->getAllLinks($rowPositions[$row], $count);
                $sku = $model->getAllSkus($rowPositions[$row], $count);
                //Mage::log($link); ?>
                    <div class="email-two-column" style="width: 295px;">
                        <a href="<?php echo $link ?>"><img src="<?php echo $image?>" alt="<?php echo $brand ?>" /></a>
                    </div>
            <?php endforeach ?>
            <?php endforeach?>
            <?php endif ?>
                    </div>
                </td>
            </tr>
        </table>
    </td>
</tr>
</table>
</div>
</body>
</div>

Upvotes: 0

Views: 3194

Answers (1)

Kenny Grage
Kenny Grage

Reputation: 1124

You have to be clear on what you are targeting. "#div" is trying to target a block with id="div". It looks to me that you are trying to hide the div with the id="batchemailcode". If this is the case, try this:

$("#batchemailcode").hide();

Also, all divs need to be inside the <body> tag. It appears that you only copied the bottom part of your code leaving out the body on the top, which is fine for our purposes, but I see at the bottom an ending </div> tag after the ending </body> tag. Please know that all divs need to be within the <body> tag.

Upvotes: 1

Related Questions