Expand DIV vertically by keeping the footer at the same position when open/hide element
Question
I have a div that is shown/hide by clicking a button as shown on the image below. At here, when pressing the button, I want the the button at the same position and expand the div (content) above it (towards to the top - position 1 instead of the bottom - position 2). I tried with the position:absolute; properties but nothing has changed. Any idea?
Here is the sample html just for indicating this layout:
<body>
<div class="content">
//Content...
</div>
<div id=hidden>
//Hiddent area...
</div>
<input type="button">
<footer>
//Footer...
</footer>
</body>
Update:
Here is the second behaviour for the second sample: I want the code works as explained.
1 answers
solution1
0 ACCPTED 2015-07-14 08:04:51
Looks like you may need position: fixed; and not position: absolute; . Does this work?
$(function () { $(".expcol").hide(); $("#btnCM").click(function () { $(".expcol").slideToggle(); }); });
/* Start Praveen's Reset for Fiddle ;) */ * {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} /* End Praveen's Reset for Fiddle ;) */ footer {position: fixed; bottom: 0; width: 100%; background: #ccf;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <footer> <button id="btnCM">Click Me</button> <div class="expcol"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione commodi, tenetur laborum et beatae praesentium animi, repellat cum pariatur nostrum harum hic excepturi cumque, magnam illo neque quam molestias nam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet asperiores sunt sed nemo dignissimos enim tempora quam recusandae cum debitis provident eaque dicta illum, voluptatum expedita rerum vel cupiditate deleniti.</p> </div> </footer>
Or if the button is on the bottom:
$(function () { $(".expcol").hide(); $("#btnCM").click(function () { $(".expcol").slideToggle(); }); });
/* Start Praveen's Reset for Fiddle ;) */ * {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} /* End Praveen's Reset for Fiddle ;) */ footer {position: fixed; bottom: 0; width: 100%; background: #ccf;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <footer> <div class="expcol"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione commodi, tenetur laborum et beatae praesentium animi, repellat cum pariatur nostrum harum hic excepturi cumque, magnam illo neque quam molestias nam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet asperiores sunt sed nemo dignissimos enim tempora quam recusandae cum debitis provident eaque dicta illum, voluptatum expedita rerum vel cupiditate deleniti.</p> </div> <button id="btnCM">Click Me</button> </footer>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.