0

I am trying to make my expandable div(#myContent) have an automatic window focus when "learn more" is clicked.

I have the functionality to make the div expand, but I cannot seem to make the window focus on the expanding div(#myContent)

$(function () {
    $('a.togglebtn').click(function () {
        $(".glyphicon").toggleClass("glyphicon-minus glyphicon-plus");
        $('#toggleText').text($('#toggleText').text() === "Learn More" ? "Hide" : "Learn More");
        $('#myContent').stop().slideToggle(500);
        return false;
    });
});

 $('a.togglebtn').bind("click", function() {
    scrollToElement('#mycontent', 1000, -50);
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="lead p-color learn-button togglebtn">
  <small>
    <span class="glyphicon glyphicon-plus">
      </span>&nbsp;<span id="toggleText">Learn More</span>
  </small>
</a>
</div>

<div id="myContent" class="row row-offset" style="margin: 0 30px">
  <div class="col-xs-6 col-md-4">
    <div class="lead caption text-center">
      <h3 class="h-color">Profile</h3>
    </div>
    <div class="thumbnail">
      <img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Thumbnail">
    </div>
    <div class="lead caption">
      <p class="p-color"><small>Some sample text. Some sample text.</small></p>
    </div>
  </div>
</div>
Austin Perez
  • 587
  • 7
  • 27
  • does this help http://stackoverflow.com/questions/19012495/smooth-scroll-to-div-id-jquery ? – Dhiraj Jun 11 '15 at 02:59
  • 2 things. You are using `jquery.2.1.1` in the above snippet. Is that the same version you are using? If yes then instead of `.bind` use `.on`. Secondly what does `scrollToElement` contain? – Guruprasad J Rao Jun 11 '15 at 04:05

1 Answers1

0

Try this for button click event?

$('a.togglebtn').on('click', function () {
    $('html,body').animate({ scrollTop: $('#myContent').offset().top - 50 }, 500);
});
yeyene
  • 7,297
  • 1
  • 21
  • 29