Question

I wanted to show div after clicking a button in magento.

code is

<div id="clickme" style="background-color: #333333; color: #FFFFFF; padding: 10px; width: 200px; cursor:pointer;">Click here to toggle me in and out</div>
 <div id="me"   style="display: none !important;"> <?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('footerbanner')->toHTML();?></div>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) { $('#clickme').click(function() { $('#me').animate({
           height: 'toggle'
           }, 1000
      );
 });
});

Its working. But by this code footer is shifted but I want that Body content is shifted to top not footer. Please help me…

Answer 1

Try this with your footer div,

<div id="footer" style='position:fixed;bottom: 0px;height: 40px;float: left;'>footer footer footer footer </div>

So, the footer will be displaying in bottom of the page always…

Live Demo

EDIT :
As per your requirement, just try this,

HTML

<div id="Content_div" style="height: 400px;">  
</div>

<div id="ja-botsl">
   <div class="main col4-set clearfix">
      <div style="height: 200px;" class="main-inner clearfix">
      </div>
      <span class='imgExpandSpan' id="ja-expand-trig">&nbsp;</span>
   </div>
</div>

<div id="footer_div" style="height: 100px;">
</div>​

CSS

<style type="text/css">
    .imgExpandSpan
    {
        background: url("https://bangalore/Ogo/Content/Images/arrow-green.png") no-repeat scroll center center #111111;
        cursor: pointer;
        height: 30px;
        left: 50%;
        position: absolute;
        top: -29px;
        width: 60px;
    }
    .imgExpandSpan.expand
    {
        background-image: url("https://bangalore/Ogo/Content/Images/arrow-red.png");
    }

    #ja-botsl
    {
        background: none repeat scroll 0 0 #111111;
        border-top: 1px solid #CCCCCC;
        color: #666666;
        position: relative;
        z-index: 2;
    }
</style>

JQuery

you should use the given below plug-ins

prototype.js

ja.script.js

Here is the Live Demo

Note : The script of ja.script.js have all our click event id’s & expand inner div id. So we can able to change id’s.,,