scrollen automatisch nach unten, wenn div mit toggle geöffnet wird

Question

Ich habe ein verstecktes div, das über eine Slidestogle-Funktion geöffnet/geschlossen wird (siehe unten), wenn ich auf eine Schaltfläche klicke. Das funktioniert gut. Ich möchte jedoch, dass der untere Rand meiner Seite automatisch nach unten/oben scrollt, wenn das div geöffnet/geschlossen wird. Der untere Rand meiner Seite muss mit dem unteren Rand des geöffneten div + eines zusätzlichen Randes unter dem div übereinstimmen, so dass der geöffnete div vom Besucher meiner Seite gesehen wird. Wie kann ich das machen?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
$("#button_toggle_XRT").click(function() { 
     $("#XRT_overview").slideToggle(1000); 
}); 
}); 
</script> 

Answer 1

Versuchen Sie, Ihre div in einem anderen Div. Du musst ein paar zusätzliche CSS mit dem äußeren Div machen, aber das sollte alles in Schach halten. Nun wenden Sie das slideToggle() auf das innere div an, nicht das äußere div. Ich habe eine jsBin gemacht, um zu helfen:

http://jsbin.com/pacecibugu/edit?html,output

Es wird so etwas wie folgt aussehen:

<div style="height:200px;background-color:gray;" id="clickableDiv"> 

    <div style="height:190px;background-color:lightgray;" id="toggledDiv"> 
     <p>Here's my div</p> 
    </div> 

</div> 

<script> 

    $(document).ready(function() { 

     $("#clickableDiv").click(function() { 
     $("#toggledDiv").toggle(); 
     }); 

    }); 

</script>