How to make the text appear climbs up?
To do this, you need to put the .block block over h2 and change the jquery code:
$(".closed .block").hide(); $(".hide").click(function() { $(this).toggleClass("show").closest(".box").find(".block").slideToggle("fast"); });
.box { background: #fff; margin-bottom: 10px; width: 300px; padding: 0; margin: 40px auto; position: relative; overflow: hidden; border: 1px solid #ccc; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -webkit-box-shadow: 0 0 10px #DCDCDC inset; -moz-box-shadow: 0 0 10px #DCDCDC inset; box-shadow: 0 0 10px #DCDCDC inset; } .box h2 { font-size: 1em; font-weight: 700; text-transform: uppercase; color: #444; background: #ddd; margin: 0 -10px -1px -10px; padding: 12px; padding-left: 15px; padding-right: 45px; -webkit-box-shadow: 0 0 10px #DCDCDC inset; -moz-box-shadow: 0 0 10px #DCDCDC inset; box-shadow: 0 0 10px #DCDCDC inset; border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; } .block { padding: 0; } .block_in { padding: 12px; } .box div.hide { display: block; width: 40px; line-height: 24px; position: absolute; right: 5px; top: 8px; cursor: pointer; font-size: 10px; text-transform: uppercase; text-align: center; border: solid 1px #aaa; background: #f5f5f5; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -webkit-box-shadow: 0 0 4px #DCDCDC inset; -moz-box-shadow: 0 0 4px #DCDCDC inset; box-shadow: 0 0 4px #DCDCDC inset; } .box div.hide:hover { background: #fff; } .box div.hide span.h { display: block; } .box div.hide span.s { display: none; } .box div.show span.h { display: none; } .box div.show span.s { display: block; } .closed div.hide span.h { display: none; } .closed div.hide span.s { display: block; } .closed div.show span.h { display: block; } .closed div.show span.s { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box closed"> <div class="block"> <div class="block_in"> буквыбуквыбуквы </div> </div> <h2>Toggle <span class="l"></span> <span class="r"></span> </h2> <div class="hide"> <span class="s">Show</span> <span class="h">Hide</span> </div> </div>
UPD:
This option allows the text to appear at the top of h2 , but at the same time h2 shifts down. If you need h2 be fixed, and the text that appears does not move it, but moves up, then you need to redo the styles of the box , block , h2 blocks, like this:
$(".closed .block").hide(); $(".hide").click(function() { $(this).toggleClass("show").closest(".box").find(".block").slideToggle("fast"); });
.box { background: #fff; margin-bottom: 10px; width: 300px; padding: 0; margin: 40px auto; position: relative; /*overflow: hidden;*/ border: 1px solid #ccc; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -webkit-box-shadow: 0 0 10px #DCDCDC inset; -moz-box-shadow: 0 0 10px #DCDCDC inset; box-shadow: 0 0 10px #DCDCDC inset; } .box h2 { font-size: 1em; font-weight: 700; text-transform: uppercase; color: #444; background: #ddd; margin: 0 0px -1px 0px; padding: 12px; padding-left: 15px; padding-right: 45px; -webkit-box-shadow: 0 0 10px #DCDCDC inset; -moz-box-shadow: 0 0 10px #DCDCDC inset; box-shadow: 0 0 10px #DCDCDC inset; border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; } .block { padding: 0; background: #fff; width: 300px; padding: 0; margin-top: -45px; position: absolute; z-index: 1; border: 1px solid #ccc; border-radius: 5px 5px 0 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; -webkit-box-shadow: 0 0 10px #DCDCDC inset; -moz-box-shadow: 0 0 10px #DCDCDC inset; box-shadow: 0 0 10px #DCDCDC inset; } .block_in { padding: 12px; } .box div.hide { display: block !important; width: 40px; line-height: 24px; position: absolute; right: 5px; top: 8px; cursor: pointer; font-size: 10px; text-transform: uppercase; text-align: center; border: solid 1px #aaa; background: #f5f5f5; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -webkit-box-shadow: 0 0 4px #DCDCDC inset; -moz-box-shadow: 0 0 4px #DCDCDC inset; box-shadow: 0 0 4px #DCDCDC inset; } .box div.hide:hover { background: #fff; } .box div.hide span.h { display: block; } .box div.hide span.s { display: none; } .box div.show span.h { display: none; } .box div.show span.s { display: block; } .closed div.hide span.h { display: none; } .closed div.hide span.s { display: block; } .closed div.show span.h { display: block; } .closed div.show span.s { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box closed"> <div class="block"> <div class="block_in"> буквыбуквыбуквы </div> </div> <h2>Toggle <span class="l"></span> <span class="r"></span> </h2> <div class="hide"> <span class="s">Show</span> <span class="h">Hide</span> </div> </div>
