There is a task to edit the slider. The SHOW / HIDE button is located at the top right, and you need it to be located at the bottom, and when you click on SHOW, the hidden content opens-goes down, and the button goes down below the content. When I change the div in some places, the hidden content ceases to go down (open). Here is the slider:

< script > $(".box .block").show(); $(".closed .block").hide(); $("div.hide").click(function() { $(this).toggleClass("show").next().slideToggle("medium"); }); < /script> 
 .box { background: #fff; margin-bottom: 20px; padding: 0; 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; } 
 <div class="box closed"> <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 class="block"> <div class="block_in"> Контент 2 </div> </div> </div>

    1 answer 1

     $(".hide").click(function() { var c = $(this); $('.block').slideToggle("medium"); c.toggleClass('show'); });