Monday, May 20, 2024
Homepage · html
 Popular · Latest · Hot · Upcoming
157
rated 0 times [  160] [ 3]  / answers: 1 / hits: 15483  / 10 Years ago, thu, november 6, 2014, 12:00:00

This is the dummy code. My requirement is when I click on last li element then one hidden div inside it will be displayed.But I need to scroll down to it to see it.
So when I click on li with id=hello then window should automatically scroll down to that div?



First preference using CSS then JS and no jQuery.





var ele=document.getElementById('hello');





ele.addEventListener(click, function (event) {

    document.getElementById(hidden-div).style.display=block;

},false);

.fixed-height-div{

 height:120px;

 overflow-y:scroll;

}



.fixed-height-div > li{

    background-color:lightblue;

    list-style-type: none;

}

<div class=fixed-height-div>

  <li>A</li>

  <li>B</li>

  <li>C</li>

  <li>D</li>

  <li>E</li>

  <li>F</li>

  <li>G</li>

  <li id=hello>H

      <div id=hidden-div style=display:none;>

          This should be displayed after click<br><br>

          And the scroll should come to this screen.

       </div>

    </li>




More From » html
 Answers
9

Just after you show/expand your hidden div, call the scrollIntoView function of the li element.


This requires no jQuery.


function showIt(elementId) {

    var el = document.getElementById(elementId);

    el.scrollIntoView(true);

}

For more refer https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView


[#68899] Monday, November 3, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
ignacio
Add To Favorites
Follow
Total Points: 467
Total Questions: 128
Total Answers: 79
Location: Luxembourg
Member since Tue, Mar 14, 2023
1 Year ago
ignacio questions
Tue, Aug 16, 22, 00:00, 2 Years ago
Fri, Jun 10, 22, 00:00, 2 Years ago
Fri, Jun 4, 21, 00:00, 3 Years ago
Fri, Apr 23, 21, 00:00, 3 Years ago
Wed, Jul 22, 20, 00:00, 4 Years ago
View All
;