Question

Right now I have a link that causes a hidden div to appear when you click on on it. However, the page itself doesn’t scroll when the hidden div appears – so, unless the user knows to scroll down, they’re not going to see the hidden div.

Here is my HTML code:

<p class="telephone2"><a href="#">Disclaimer</a></p>
    <div class="disclaimer">
      <p>Hidden div!</p>
   </div><!--end disclaimer -->

Here is my Javascript, which just calls Jquery:

// Drop down disclaimer

$(".telephone2").click(function () {
    if ($(".disclaimer").is(":hidden")) {
        $(".disclaimer").slideDown("slow");
    }
    return false;
});

Does anyone have any ideas?

Thank you very much!

Answer 1

Here you go : working demo : http://jsfiddle.net/epinapala/xy2Ua/

<p class="telephone2"><a href="#">Disclaimer</a></p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
    <div class="disclaimer">
      <p>Hidden div!</p>
   </div><!--end disclaimer -->

<script type='text/javascript'>
    $(".disclaimer").hide();
    $(".telephone2").click(function () {
        if ($(".disclaimer").is(":hidden")) {
            $(".disclaimer").slideDown("slow",function(){
                var elem = $('.disclaimer');
        $(window).scrollTop(elem.offset().top);
            });

        }
        return false;
    });

​</script>